OIT > WCG > Accessibility > Testing Accessibility

Testing Web Content for Accessibility

Manual Checks

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.

Ensure alt text is succinct, but accurate and useful.
Using the Web Developer toolbar, select…
- "Display Alt Attributes." Is the alt text equivalent?
- "Replace Images With Alt Attributes." Does the alternative text make sense?
Alt text can also be evaluated with WAVE

Enlarge the font in your web browser to 200-300%. 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? Is contrast sufficient?

Navigate the site using only the keyboard (Tab, Shift + Tab, Enter, etc.). Is all functionality available?
Is a “skip navigation” link available? (see webaim.org/techniques/skipnav/)
Make sure the navigation order is logical.
Is keyboard focus apparent?

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?

Not essential, but recommended

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.

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.

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.

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.