Quick Reference
Testing Web Content for Accessibility
Article Contents
Note
This resource is designed to be printed as a one page PDF file. An HTML version is also available below.
Human Checks
Use a checklist
- Section 508: webaim.org/standards/508/checklist/
- WCAG 2.0: webaim.org/standards/wcag/checklist/
Disable styles and linearize tables
- Styles can be disabled using WAVE or with the "Web Developer toolbar" extension for Firefox.
- Ensure the reading order is logical.
- Ensure content is still understandable and usable.
Check alternative text
- Ensure alt text conveys the content and function of the image, and is succinct, yet accurate and useful.
- Using the Web Developer toolbar or WAVE, unsure the alternative text is equivalent and that it makes sense in context.
Verify color and contrast
- Color contrast: webaim.org/resources/contrastchecker/
- Color-blindness: colorfilter.wickline.org
- Print on a grayscale printer
Test content scaling
- Enlarge the font in your web browser to ~150%. Note that WCAG 2.0 requires 200%. Is the page readable and usable? Is horizontal scrolling minimized?
- Zoom the web page in your browser (enlarge fonts and images). Is text in images readable?
Check keyboard accessibility
- Navigate the site using only the keyboard (Tab, Shift + Tab, Enter, etc.). Is all functionality available?
- Is a “skip navigation” link available? Does it function correctly? (see webaim.org/techniques/skipnav/)
- Make sure the navigation order is logical.
- Is a visible keyboard focus indicator/outline present?
Evaluate form accessibility and usability
- Click on the form label. If the field gains focus, it is properly labeled. WAVE also identifies form labels.
- Ensure that you can complete all forms without a mouse.
- Are error recovery mechanisms present and easy-to-use?
Test with a screen reader
Valid HTML and CSS
Not essential, but recommended
- HTML: validator.w3.org
- CSS: jigsaw.w3.org/css-validator/
Testing with WAVE
About WAVE
- WAVE is an accessibility evaluation tool that embeds inline accessibility feedback into your web content.
- WAVE identifies accessibility errors, alerts, and possible features, using color-coded icons.
- WAVE cannot detect all possible accessibility problems (no tool can), but it greatly aids in evaluation.
Using WAVE
- Online at wave.webaim.org
- Enter the URL of a webpage.
- Upload a file from your computer.
- Type or paste in HTML code directly.
- Using the WAVE Toolbar for Firefox
- Download from wave.webaim.org/toolbar/
- Create reports directly in your browser.
- Ideal for dynamic, sensitive, intranet, and password-protected content.
WAVE Icons
- RED icons indicate accessibility errors. These are things that WAVE has identified as accessibility issues.
- YELLOW icons indicate alerts, or possible accessibility errors. WAVE cannot verify that these are actual problems, but identifies the potential issues so you can manually evaluate them.
- GREEN icons indicate accessibility features. If used properly, these items can enhance the accessibility of web content. You will need to determine if each accessibility feature is implemented correctly.
- BLUE icons indicate structural or semantic elements. When used correctly, these can add valuable organizational data and semantics that can help with navigation and presentation of a web page in assistive technologies.
Report Views
- Errors, Features, and Alerts is the default view with most WAVE features enabled. Accessibility errors, potential errors (alerts), and accessibility features will be shown.
- Structure/Order View shows the overall structure of the page. The number indicators show the reading/navigation order of the content. Follow the numbers to determine if the reading order of the page makes sense and is logical.
- Text-only View removes images and styles and presents information that is commonly read by screen readers (such as alternative text for images).
- Outline View shows only the headings that are within the page. Ensure that your page contains headings where appropriate and that the structure of the page is logical.