WCAG 2.0 Checklist for Business and Government Site Accessibility
By Sam Stemler
The Worldwide Web Consortium’s (W3C) Web Content Accessibility Guidelines 2.0 (WCAG 2.0) is the gold standard for assessing web accessibility. Though WCAG 2.0 is outlined on w3.org, some of it can be difficult to understand without web development experience, and the list can be intimidating in itself. We’ve broken down the guidelines into a fast and easy WCAG 2.0 checklist to make your site accessible. This checklist is intended for those without knowledge of web development or programming, and we’ve noted sections where this experience may be required.
WCAG 2.0 Checklist to Make Your Site Accessible
Remember that WCAG 2.0 is not a manual for how your site should be built; rather, it’s a guide for how your site should function. This gives you flexibility about your site, since it isn’t practical or desirable for all websites to look and act the same. Our WCAG 2.0 checklist is intended to help all website managers, content creators and other staff members navigate basic accessibility, but should not be used as a legal guide or tool against accessibility lawsuits. For this checklist, we’ve removed requirements that are somewhat rare or specific, so the WCAG 2.0 checklist addresses only the most common and problematic accessibility issues.
For quick reference, here are the WCAG 2.0 checklist items without explanation. Keep reading to learn more about each item.
- Alternative text or Alt-Text for Pictures
- Headings and Text Are Formatted Properly
- Bold and Italics Are Used to Convey Meaning
- Lists Are Formatted Properly
- Link Text Conveys Links’ Meaning
- Text Color Contrast is 4.5:1 or Better
- Closed Captioning Used on Video and Audio
- Audio and Video Do Not Play Automatically
- Audio and Video Players Have Controls
- Visuals Do Not Flash More Than 3 Times a Second
- Able to Skip Navigation and Blocks
- Images Used in Navigation Have Alternative Text
- Color is Not Required and Navigation Color Contrast is 3:1 or Better
- Site Can Zoom Up to 200%
- Flexible Orientation
- No Keyboard Traps
- Forms Are Usable With Keyboard and Screenreader
- Hover or Focus Does Not Disrupt Use
- Time-Outs Can Be Extended
Find and fix the most common accessibility issues
Test with Accessible Metrics »
WCAG 2.0 Checklist: For All Web Staff
The following items apply to text, links, and pictures on your site. Many of these items can be programmatically checked by an accessibility testing tool, like Accessible Metrics. Once your site is compliant, everyone who adds content to your site—such as bloggers, photographers or editors—should know and understand these accessibility requirements, so new content is also compliant.
1. Alternative Text or Alt-Text For Pictures
Pictures or infographics should have alternative text (alt-text) which describes the picture. This can be added whenever images are loaded on to the site.
2. Headings and Text Are Formatted Properly
The proper sequence of headings and regular text helps to show how information is organized without a user needing to see the screen. When inputting text, use headings like H1, H2 etc. to divide sections, instead of using bold, underline or other emphasis. Use normal text formatting for regular paragraphs.
3. Bold and Italics Are Used to Convey Meaning
Bold, underline, and italics should be used for semantic purpose, or to show a particular meaning. Use italics to emphasize a word or phrase when it changes the meaning of the sentence. Use bold to emphasize a word as especially important. Do not use italics or bold text simply for visual effect.
4. Lists Are Formatted Properly
If you are making a list, format the list items in either a bulleted or numbered list. Do not simply list each item on its own paragraph. If you do not want to separate the list from the paragraph, use of a colon or semicolon is also suitable.
5. Link Text Conveys Links’ Meaning
When making hyperlinks within the text, the text should accurately show where the link goes. For example, the following link goes to a page on the definition of a hyperlink. Do not use ambiguous link text like “click here” or “more information.”
6. Text Color Contrast is 4.5:1 or Better
Color contrast between text, images and backgrounds should be at least 4.5:1. The traditional black text against a white background and blue link text have adequate contrast. Use accessibility testing tools like a contrast checker before making changes to text colors.
WCAG 2.0 Checklist: For Media Specialists
These checklist items apply to media, like videos, audio recordings, and advertisements. Once your site is compliant, media specialists—those who work with video, images, or sound on the website—should know all of the previous checklist items in addition to the following items, so new content is also accessible.
7. Closed Captioning Used on Video and Audio
Videos and audio recordings must use a text alternative with equivalent information, usually closed captioning.
8. Audio and Video Do Not Play Automatically
Audio or visual media that plays automatically is disruptive for people using screenreaders. In almost all cases, it should be avoided. This includes videos and audio recordings as well as ads.
9. Audio and Video Players Have Controls
All audio recordings or videos must have mechanisms to start or stop.
10. Visuals Do Not Flash More Than 3 Times a Second
Videos or other visual effects do not flash more than three times a second.
WCAG 2.0 Checklist: For Web Designers and Developers
Web designers and developers are responsible for accessibility in the design and function of the site, including the navigation, templates, plugins, forms, and other functions. These experts have more responsibility when it comes to accessibility. If you don’t have a web expert on staff and you’re not sure what these WCAG 2.0 checklist items mean, test your site’s accessibility and consult with an expert to fix problems.
11. Able to Skip Navigation and Blocks
Users should be able to skip the navigation links at the top of the site, or other blocks that appear on every page. This is most commonly done using a “skip navigation” link, which brings users to an anchor point at the start of the important content on each page. Since municipal sites often have many departments and functions, this is a particularly prominent accessibility problem for state and local websites.
12. Images Used in Navigation Have Alternative Text
If images are used as links for navigation—such as a home icon leading to the home page—alternative text is used to convey what the link is and where it goes.
13. Color is Not Required and Navigation Color Contrast is 3:1 or Better
Key elements like navigation menus, backgrounds, and other essential objects have a color contrast of 3:1 or better. At any area of the site, color is not required to navigate or use the site (for example, a form field turning red as the sole method for indicating an error would not be acceptable).
14. Site Can Zoom Up to 200%
Users can zoom in up to 200% without losing content or functionality.
15. Flexible Orientation
The website is fully functional in either portrait or landscape mode.
16. No Keyboard Traps
A visitor can navigate the site using a keyboard without getting stuck in one area.
17. Forms Are Usable With Keyboard and Screenreader
Form fields are clearly and accurately labeled. All form fields can be filled in and all forms submitted using only a keyboard. If a field is not filled in correctly, the error is clearly displayed and can be read by a screenreader. Error alerts may require ARIA mark-up extensions for accessibility. This is a particularly notable problem for businesses that allow online ordering using forms.
18. Hover or Focus Does Not Disrupt Use
When a user hovers over content to expand it, it can be dismissed, so it does not cover other essential parts of the site and interfere with navigation.
19. Time-Outs Can Be Extended
If there are time-outs, such as logging a user off automatically after a certain time, the time can be extended.
Remember that accessibility is an on-going pursuit. Use the WCAG 2.0 checklist to run through your site for accessibility issues now, and keep this checklist to make sure new content is also accessible. Make sure that everyone who adds content to the site understands the WCAG 2.0 guidelines that applicable to them. To make sure your website maintains accessibility, perform regular checks. With these policies and precautions in place, you can make sure that your website is accessible to all patrons.