Web Accessibility Checklist

A beginner's guide to web accessibility

Landmarks

ARIA Landmark Roles are helpful landmarks that can be used by AT to navigate a website.

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

Contains navigational links.

Focal content of document. Use only once.

Supporting section related to the main content even when separated.

A region that contains a collection of items and objects that, as a whole, combine to create a form.

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

Add a `search` role to your primary search form.

Language Attribute

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

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

Document Outline
Images
Javascript

Use unobtrusive Javascript (never use inline scripting).

Provide alternatives for users without Javascript enabled.

Forms

Tab order of the form follows a logical pattern.

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

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.

Color and 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 against different types of color blindness with a tool like http://colorfilter.wickline.org/.

Testing

Navigating your site using a screen reader may help you understand how a blind or low-vision user will experience it.