Accessibility Resources for Web Developers
The first step of manual testing is to throw away your mouse. Using the TAB and ENTER keys, see if you can navigate all aspects of your site with only a keyboard. Solving keyboard navigation issues takes you a long way towards accessibility.
- Visual keyboard focus: There should be a visual cue when the focus shifts to a link, such as a dotted line around the link text.
- Links should also stand out visually, not relying only on color to differentiate them from the surrounding text.
For more information, see WebAIM's Keyboard Accessibility Article.
Provide a Way to Skip Navigation
When a screen reader user lands on your page, they may hear a long string of navigation options before getting to the true content of the page. This can be frustrating, so it is important to include an option to skip navigation.
- The simplest way is to provide an anchor link to the main content at the top of the page that says 'Skip Navigation.'
- If a visible link will cause problems for your visual layout, there are other options that are not as effective or simple. These options are outlined in WebAIM's "Skip Navigation" Links article.
Strategic Use of Headings
Use headings to indicate the importance level of the information on your website. Headings are often used for visual effect, but they also help users who are blind to navigate the page more efficiently.
- Visitors using a screen reader can use a hotkey to bring up a list of all the headings on the page and choose to skip to a section. As you can imagine, hierarchy becomes important in these cases.
- You want your most important sections to be at least h2.
- Do not skip heading levels. Don't jump from h2 to h4, for example. Listeners may never reach h4 headings if no h3 headings exist.
Use of Color
Contrast is vital for users with low vision or color blindness.
- Avoid using color as the sole method of conveying information, indicating or prompting an action, or distinguishing a visual element.
- WCAG 2.0 Level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text.
- If links are not underlined, there must be 3:1 contrast between link text and body text.
The following contrast checkers can help you analyze and adjust your color schemes:
- Colour Contrast Analyser - Works well with solid colors.
- WCAG 2.0 Color Contrast Analyzer (Chrome Extension) - Works well with gradients.
Descriptive Link Text
Screen reader users often bring up a list of all of the links on a page in order to navigate more quickly. Link text should be unique so they still make sense when taken out of context.
- Avoid generic language like "Click Here" or "Learn More."
- Less generic language: "Learn More About Web Accessibility."
Alt Text for Images
The same concept applies for images and graphics. Alt text is only helpful if it describes the purpose of the image in context.
- Ask yourself how the image adds meaning to the page.
- If the image has text, the alt text could be a simple repetition of that text.
- If the image is purely decorative, the alt tag can be set to null so that a screen reader will skip over it: alt=""
For practice exercises on writing effective alternate text, visit WebAIM.
Captioning for Audio
Another important type of visitor to anticipate is the hearing impaired user. Audio and video can add interest and depth to a webpage, but an alternate method of accessing the information needs to be offered for those with hearing difficulties.
- Ideally, all videos should be captioned so that a user who is unable to listen can still get the content of the video. See the Multimedia page for more on captioning.
- For audio files, provide a transcript of the audio for users to read.
Attempting to follow accessibility guidelines can result in problems if not done correctly. Web Accessibility Gone Wild by WebAIM pinpoints areas to watch out for.