Web Accessibility Checklist

A beginner's guide to web accessibility

Landmarks

ARIA Landmark roles can help assistive technology users to quickly navigate to and past blocks of content in a web interface.

Note: When you validate HTML that utilizes most landmark roles, you'll receive a warning stating these roles are redundant.

In HTML5, several of the landmark roles are implicit via the native structural elements which are supported by modern desktop browsers. With that said, if you need to support older browsers, you'll want to check their support for landmark roles. If you find support to be lacking, then use the landmark roles regardless of the validation warnings. For more information, read Quick Tip: ARIA Landmark Roles and HTML5 Implicit Mapping.

header role="banner"

A region of the page that is site focused. Typically your global page header.

nav role="navigation"

Contains links to navigate to different pages of a website, screens of an application, or a sections within a single document.

main role="main"

Wraps the focal content of document. Use only once.

article role="article"

Represents an independent item of content. There may be many articles in a single document. articles are not considered landmarks, but screen readers may still surface articles when navigating by regions or landmarks in a document.

aside role="complementary"

Supporting section related to the main content even when separated.

footer role="contentinfo"

Contains information about the document (meta info, copyright, company info, etc).

form role="search"

Add a `search` role to your primary search (how to implement).

Language Attribute

Declaring a language attribute on the HTML element enables a screen reader to read out the text with correct pronunciation.

html lang="en"

Specify a language with the lang attribute on the html element.

Document Outline

Use semantic headings and structure

Images

Use appropriate alt text. Read article on using ALT text

JavaScript Unobtrusive JavaScript

Unobtrusive JavaScript

Use unobtrusive JavaScript (never use in line scripting).

No-JS Alternatives

Provide alternatives for users who do not have JavaScript enabled and for environments where JavaScript is unavailable.

Forms

Logical layout

Tab order of the form follows a logical pattern.

Associated label for all form controls (e.g. input, select etc.)

(e.g. <label for="name">Name:</label><input id="name" type="text">)

Make sure placeholder attributes are not being used in place of label tags. WHATWG

An exception to this rule would be smaller forms with one or two fields (eg. search or log in forms)

Group related form elements with fieldset and describe the group with legend

Important for input type="radio" and input type="checkbox"

Media (Audio and Video)

Providing text alternatives makes the audio information accessible to people who are deaf or hard of hearing. This also goes for search engines who are deaf and hard of hearing as well.

Provide text transcripts
Synchronized subtitles for videos

Color and Contrast

Test color contrast

Best done early in the process, by ensuring that the foreground and background colors of your site have sufficient contrast you will help make your site more readable for everyone. Contrast Ratio is one tool for checking the contrast of your colors for both standard vision and color deficient user.

Test for different types of color blindness.

Deuteranopia
Protanopia
Tritanopia

Test against different types of color blindness with a tool like http://colorfilter.wickline.org. If you are on a Mac, another option is Michel Fortin's, Sim Daltonism color blindness simulator.

Testing

Navigate your site or application using a range of tools. For instance, using only a keyboard or a screen reader will help you understand how a blind, low-vision, or limited-mobility user will experience it.

Test using a screen reader
Test using keyboard only

yosevu/web-accessibility-checklist.md

Select an option

No results found