Test Web Accessibility Using the WAVE Browser Extension
Test web accessibility using the WAVE Web Accessibility Evaluation Tool. WAVE is developed and made available as a free community service by WebAIM.
With the WAVE tool, you can test for accessibility directly in the context of the page. You'll be able to click on errors that you have to learn more about it, why it matters, and how to fix them.
In addition to a detailed summary of the issues on your page, WAVE has tabs for structure and color contrast to give you a detailed view of how your page is doing with both issues
Instructor: [0:01] To test for accessibility using the WAVE browser tool, install the extension for Chrome or the add-on for Firefox. In this video, I'll use the Chrome extension.
[0:12] Open the page that you want to evaluate, and activate the WAVE extension. The WAVE tool will overlay the page with icons and indicators that present in-context feedback about accessibility issues on the page.
[0:26] For example, this error reports very low contrast between text and background colors for this nav item. Clicking Reference brings up more information about what the error means, why it matters, how to fix it, how the error was determined, and then links out to the Web Content Accessibility Guidelines.
[0:46] In this sidebar are a series of tabs. The summary tab offers a quick summary of the number of errors, contrast errors, alerts, features, structural elements, and RA attributes found on the page.
[0:59] The details tab shows all of the instances corresponding to the categories in the summary tab, errors, contrast errors, etc. This first contrast error instance, for example, corresponds to the error that we looked at earlier. Clicking on it visually highlights the element in the browser. Clicking the information icon will hop you over to the relevant reference section that we saw earlier.
[1:24] The structure tab will provide a visual outline of the semantic structure of the page. In this case, because this example page is designed to be inaccessible, there's no heading structure.
[1:35] If we check out the accessible version of this page and run the WAVE tool and check out the structure tab, it will find a heading structure and landmarks. This tool helps you verify that the document structure is sound.
[1:50] Finally, the contrast tab provides more information about the contrast failures in your page. For example, looking at that same contrast example, if we play with this lightness slider for the text or foreground color, you can get an idea for what kind of color tweaks you could make to improve the contrast ratio for your failing elements.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!