Accessibility Testing 101
For anyone wanting to create accessible content, we encourage you to use automated accessibility testing tools. These testing tools will help content creators as they build their content by finding errors and offering suggestions to improve the accessibility of their product, application or web site. On this page a list of recommended accessibility testing tools has been made available
Building your toolset
Please note that some of the accessibility testing tools listed will require administrative permissions to install on your device.
Tool: WAVE Browser Extensions
WAVE for Chrome, Firefox, and Edge extensions allows you to evaluate web content for accessibility issues directly within your browser. Because the extension runs entirely within your web browser, no information is sent to the WAVE server.
While WAVE is most effective when used by someone knowledgeable about web accessibility, people who are not web accessibility experts can also benefit from WAVE.
If you are new to WAVE, take advantage of the Introduction to WAVE video.
Browser Compatibility:
- WAVE Edge Extension at Edge Add-ons
- WAVE Firefox Extension at Mozilla Add-ons
- WAVE Chrome Extension at the Google Web Store
Additional WAVE Documentation:
WAVE Tips and Tricks:
The WAVE sidebar indicates if WAVE has detected any errors or not. The absence of errors DOES NOT mean your page is accessible or compliant. RED icons indicate accessibility errors that need to be fixed. GREEN icons indicate accessibility features—things that improve accessibility (though these should be verified). The other icons and indicators, particularly the yellow alert icons, highlight other elements that you should look at. WAVE brings the underlying accessibility information of a page to the forefront so it can be easily evaluated in context.
Styles and Code:
WAVE provides functionality for disabling page CSS (Cascading Style Sheets) styles. Complex, CSS-powered layouts may become difficult to read, especially after the WAVE icons have been embedded, so disabling styles can simplify the page presentation. Disabling styles also allow you to view the underlying reading and navigation order, the order in which keyboard-only and screen reader users will access the page. To view the relevant code for a particular WAVE icon, you can select the Code tab at the bottom of the page to view the underlying markup/DOM of your page.
Tool: Accessibility Insights for Web
Accessibility Insights for Web is an extension for Chrome and Microsoft Edge that helps developers find and fix accessibility issues in web apps and sites.
The tool supports two primary scenarios:
- FastPass is a lightweight, two-step process that helps developers identify common, high-impact accessibility issues in less than five minutes.
- Automated checks—the tool automatically checks for compliance with approximately 50 accessibility requirements.
- Manual tests—the tool provides step-by-step instructions, examples, and how-to-fix guidance for approximately 20 tests; many tests are “assisted”, which means that the tool identifies the test instances or provides a visual helper.
- Assessment allows anyone with HTML skills to verify that a web app or web site is compliant with Web Content Accessibility Guidelines (WCAG) 2.1 Level AA.
- Automated checks—the tool automatically checks for compliance with approximately 50 accessibility requirements.
- Manual tests—the tool provides step-by-step instructions, examples, and how-to-fix guidance for approximately 20 tests; many tests are "assisted", which means that the tool identifies the test instances or provides a visual helper.
This is a tool for all levels, you do not need to know accessibility to use it, it will guide you through each step.
Browser Compatibility:
- For web:
- Download for Windows
- For Android:
Accessibility Insights Documentation:
Tips and Tricks:
- Get started by watching a video Overview.
- Or read a tutorial:
Keyboard Shortcuts:
- Increase your productivity with Keyboard Shortcuts for Accessibility Insights for Web.
Tool: LightHouse
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO, and more. A very useful tool for Multimedia Developers and Web Accessibility Testers.
Browsers:
- Run Lighthouse in Chrome DevTools
- Run Lighthouse as a Chrome Extension
- How to use Lighthouse in Edge
LightHouse Extension Documentation:
Additional Help:
- Use the Lighthouse Viewer to view and share reports online.
Additional Help and Resources
Keyboard and Manual testing of your site
Automated tools and validators to identify accessibility issues:
- W3C Validator
- CSS HTML Validator
- axe DevTools
Keyboard testing basics
- Go forward: use the tab key
- Go backwards: use the shift and tab keys
- Activate something: use the Enter key or space bar
- To check / uncheck a checkbox: use space bar
- Move around the page and drop-down lists, change the selection of radio buttons: use the arrow keys
Review or test your site periodically to ensure there are no new errors and the site remains accessible.
- Test all navigation and interactivity of each webpage using only the keyboard and assistive technologies such as JAWS, NVDA, ZoomText.
- Make sure images contain alt text or are marked as decorative if no important or valuable information is being presented to users.
- If an image provides important or valuable information, then proper alt text is required, no more than 150 characters. If the image contents cannot be explained within that limit, then a graphic description below the image is required.
- Tab between sections of a webpage to ensure content follows a meaningful top-to-bottom, left-to-right focus order.
- Also ensure visible focus surrounds all tabbable and focusable elements.
- Ensure users do not encounter a page trap when using the keyboard.
- Check if you have bypass links to allow users to skip page content if lengthy or repetitive information is presented on each page.
- For example, “Skip to main navigation”, “Skip to header” and “Skip to footer” links, depending on their need on the page.
- Test all links presented on each page to ensure they are working (internal, external, downloadable), and each link contains unique link text.
- If a link opens in a new browser tab or window, it is recommended to inform users that this action will occur within the link text or link title tag, for example “Opens in a new browser tab/window”.
- Ensure all form elements such as radio buttons, checkboxes, edit fields, and drop-down lists have proper labels.
- Also give proper error prevention and suggestion to users when form errors must be corrected.
- Make sure videos have descriptive transcripts and provide closed captioning (users can these on and off).
- Ensure page content scales gracefully in all viewports and is usable when zoomed up to 400%.
- Ensure the HTML and CSS markup is correct by validating code through a validation tool such as W3C Validator or CSS HTML Validator.
- Conduct performance testing on different networks, as sometimes complex content (for example, large images or page interactivity and functionality) takes a while to load on slower networks.
- Turn off the speaker, microphone, and use only the keyboard to access the webpage and assess if the experience was the same. Are you able to understand all audio/video content and participate in all activities presented on the page without any loss of information?
Additional Resources
- The WebAIM Million
- WebAIM: Keyboard Accessibility
- WebAIM: Keyboard Shortcuts for NVDA
- WebAIM: Keyboard Shortcuts for JAWS
Page details
- Date modified: