This document is a general checklist of potential accessibility issues that can be used to review a site for usability. Additional topic-specific checklists will be created that go into more detail.
Landmarks
The following HTML 5 elements function as landmarks that can be used by assistive technology to navigate a website.
<header><nav><main><article><aside><footer>
ARIA roles can be used to create landmarks on elements that aren't inherently landmarks:
Language Support
- Declaring a language attribute on the html element enables a screen reader to read out the text with correct pronunciation: <html lang="en">
- Layouts and elements should properly change directions and flip sides when the page is translated to a right-to-left language like arabic.
Document Outline
- Use semantic headings and structure
Links
- Ensure links are recognizable (Both underlined and colored in body text. At least one indicator in menus and lists).
- Ensure links have :hover state (Either underline or color change)
- Ensure links have :focus state (Either the default blue outline used by browsers is clearly visible, or an alternate focus style is created.)
- For links in menus, the hover/focus states should be different than the active state for the current page link.
- External links have visual and text indicator that they open in new windows.
Images
- Use appropriate alt text. Read article on using ALT text
- If no alt text has been entered make sure an empty alt="" attribute is present.
- Add role="presentation" to any images that are purely decorative.
- If an image is in a link (such as in a tout), setting alt="" is usually preferred to keep it from distracting users while they are navigating
Javascript
- Unobtrusive Javascript
- No-JS Alternatives
Forms
- Logical layout
- Associated label for all form controls (e.g. input, select etc.)
- Make sure placeholder attributes are NOT being used in place of label tags. See WHATWG article
- Group related form elements with fieldset and describe the group with legend
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
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.
If you are on a Mac, another option is Michel Fortin's, Sim Daltonism color blindness simulator.
- Deuteranopia
- Protanopia
- Tritanopia
Keyboard navigation
- "Skip to main content" link should be visible on focus.
- Tabbing through links goes in the same order as things visually appear on the screen.
- Focus outlines are visible on all elements as they are focused.
Motion
Testing
Navigating your site using a range of tools, such as just the 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
Tools