We prepared this video to help you understand how to install and use the WAVE web accessibility evaluation tool on your website. A descriptive transcript of the video is also available on this page.
Remember, as we discuss in the book, an automated scan such as the one performed by WAVE won’t find all the accessibility issues on your website but it can help you locate some of them.
Descriptive Transcript for How to Use WAVE Video.
[0:00] Fade-in. “How to Use WAVE” title card displays.
Jeff: Welcome to this “Content for Everyone” demonstration on how to use the WAVE tool to help you locate some of the accessibility issues on your website. Here we will cover how to install the WAVE browser extension and how to use it to understand issues that it reports.
[0:13] WAVE home page displays in Chrome browser.
Jeff: To install the WAVE browser extension, go to wave dot web aim dot org. Here you will find general information about the tool. We’re going to go to the WAVE browser extension area and go to the “WAVE Chrome, Firefox and Edge Browser Extension” link.
[0:25] WAVE Browser Extensions page displays in Chrome browser.
Jeff: On the “WAVE Browser Extensions” page, you’ll find download links for the Chrome, Firefox, and Microsoft Edge browsers, along with more information on how to use the tool. We’re going to select the “WAVE Chrome Extension at the Google Web Store” link since we’re using a Chrome browser.
[0:40] WAVE Extension Tool page from the Chrome Web Store displays in Chrome browser.
Jeff: Once at the Chrome Web Store WAVE Evaluation Tool page, you can select “Add to Chrome” and the extension will install.
[0:46] Add WAVE Evaluation Tool pop-up appears on the WAVE Evaluation Tool page.
Jeff: You’ll be asked to confirm that you want to add the WAVE Evaluation Tool and give it permission to read and change all of your data on all websites, which is acceptable to do. You’ll select “add extension” to add it to your browser.
[0:58] Notification that WAVE Evaluation Tool has been added to Chrome appears in a pop-up on the WAVE Evaluation Tool page.
Jeff: You’ll be notified that the extension has been added to the browser and it’ll appear in your browser’s tool bar as a “W” inside of a circle. Further it will be identified with the label “WAVE.”
[1:08] Chrome browser Extensions menu overlay appears with a list of installed browser extensions.
Jeff: If you want to always have easy access to the extension, you can access the “Extensions” menu, find WAVE from the list of your browser extensions, and pin it to your toolbar.
[1:14] Amazon home page displays in Chrome browser
Jeff: Now, we’ll demonstrate WAVE in action. We’re using the Amazon.com website for the demonstration. To use WAVE, simply go to the webpage you want to review. Once it loads, you select WAVE from the browser’s tool bar.
[1:22] WAVE information panel appears to the right of the Amazon home page. The Amazon page now includes WAVE icons.
Jeff: Within a few seconds, the WAVE information panel appears on screen adjacent to the webpage. At the same time, the appearance of the webpage is updated with WAVE icons that have different meanings.
In the WAVE Summary, we find this page has 8 Errors and 4 Contrast Errors. As you may have read in the book, the Errors and Contrast Errors section are the automated results that explicitly let you know that there’s something to correct. The Alerts, Features, Structural Elements, and ARIA sections have informational details about the structure and content of the site, and areas that need to be reviewed in more detail to understand if there is an accessibility issue that needs to be fixed.
[2:01] The WAVE information panel now displays information from the Details tab with all sections open.
Jeff: The Details tab has specific information on each item that WAVE has found. We’re going to close the areas related to Alerts, Features, Structural Elements, and ARIA. You can read more about the details that are reported in these sections, and the actions you can take with the information, in the “What Can You Find with an Accessibility Scan” chapter of “Content for Everyone.”
The details we find about this page indicate that there are six missing instances of alternative text, and 2 instances of a broken ARIA menu. Plus there are four areas with very low color contrast. When WAVE has a dimmed icon, such as we find with three of the missing alternative texts and both broken ARIA menus, that means the element is not visible on the page, so it is hidden from view. These are still worth reviewing and understanding what the issue is so that if the item comes into view at some point that it is correct. Further just because something is hidden from a sighted user, it may still be available to screen readers, so it’s good practice to check all the issues if you can and make corrections when possible.
While there are only three types of errors on this page, there are many others that WAVE can report and we detail all of those in the “What Can You Find with an Accessibility Scan” chapter so that you’ll know what to do if they appear.
[3:08] The mouse arrow clicks on one of the Very Low Contrast issues and its associated location blinks to the right of the Amazon search bar in the site’s header.
Jeff: Each of the items that WAVE reports, has an icon on the page where the issue is located. If you click on an icon on the WAVE panel, you’ll be taken to the issue on the page and the icon will blink to alert you to its location. As we click on one of the very low contrast icons in the WAVE panel, the associated icon is blinking near the top of the screen next to the Amazon search box.
[3:30] From the WAVE information panel, Styles is toggled off and the Amazon home page is updated to a white screen with text as all styles have been removed. Some Amazon icons still appear, along with WAVE icons indicating where there are issues.
Jeff: Sometimes, it can be difficult to locate the icons even for issues that are visible on the page. To help you find those, you can toggle the styles off from the WAVE panel, which will remove all the visual styling. With that you can more easily find all the issues, including those that are identified as not visibly available.
[3:39] The Big Gay Fiction Podcast home page displays inside the Chrome browser and the WAVE information panel loads alongside it. The page is updated with WAVE icons.
Jeff: As we discuss in the “Web Accessibility and the Law” section, you ideally want WAVE to report zero errors and zero contrast errors, such as Jeff has achieved on his “Big Gay Fiction Podcast” website. Not only will solving these issues make your content more accessible for your audience, it will also help lower your legal risk. Of course, we’ll remind you here that we’re not giving legal advice, but simply sharing our experience in this field with you.
[3:59] “Content for Everyone” end screen displays.
Jeff: We hope this brief video, along with the “What Can You Find with an Accessibility Scan” section of “Content for Everyone,” helps you make your website more accessible and usable.