Using the WAVE Tool
The WAVE Tool is able to review the page you are on, and report any ADA errors that it detects. Chrome and Firefox are the only browsers that currently support the official WAVE Tool extension/add-on. Links to the offical extension/add-on are available at https://wave.webaim.org/extension/.
For more information on installation, WAVE Tool's official Help page is located at http://wave.webaim.org/help.
Once installed, a WAVE Tool button should appear in your browser's toolbar. Use the steps below to perform a review:
- Visit the page you would like to review on the public-facing website
- Click the WAVE Tool button in your browser's toolbar to prompt a review of the current page
Initially, a Summary section will appear in the left sidebar. For the purposes of this tutorial, we will focus only on the Errors and Contrast Errors that may be present in the Summary. Errors (red) will be listed at the top of the summary, if present. Contrast Errors will be listed in the "Contrast" tab.
To view the individual errors, click the Details tab. Errors (if present) will be sorted by type and amount (ex. "3x Missing alternative text"). Clickable icons corresponding to the amount will be shown below each type.
For example, if there are three "Missing alternative text" errors present, three icon will be shown below this error type. Clicking each will highlight the error on the page with a dashed line, allowing you to narrow down the cause.
Using the WAVE Tool is the first step in the process. If errors are present, document them using the instructions in the section below.
Documenting Errors
An error reporting spreadsheet template is available for download below. The spreadsheet is broken down into three tabs/sheets: Site Wide Issues, Page Specific Issues, and Contrast Report.
Use the Site Wide Issues sheet to document the errors from the "Details" tab that are present in site-wide page elements or elements that are present on multiple pages, such as the header, main/sidebar menus, breadcrumb links and footer. Use the "Error Location" column to document the affected page element (ex. Search Bar), and the "Errors" column to report the error listed in the WAVE tool that corresponds to the element in the "Error Location" column.
The Page Specific Issues sheet is used to document errors that are only present on a single page. Use the "Page URL" column to list the address of the page that contains the error(s). Use the "Error Location" column to document the affected page element (ex. image in page body). Use the "Error" column to report the error listed in the WAVE tool that corresponds to the element in the "Error Location" column.
Use the Contrast Report to document Contrast Errors that appear in the "Contrast" tab. If a Contrast Error is present on a site wide element (ex. header/menu/footer), enter the element name in the "Contrast Error Location" column. If the error is specific to a single page, enter the URL in the "Contrast Error Location" column. Use the "Page Element" column to document affected element (ex. drop down menu links text/background contrast).
NOTE: Errors can be grouped together in the report if they affect similar page elements, and do not need to be listed separately. For example, "6x Missing Alt Text" can be entered in the "Error" column if there are six images in a single homepage section that are affected.
Error Reporting Template
- ADA_508 Error Reporting Templage.xlsx (13.4 KBs)