WAVE Web Accessibility Evaluation Tool
While Monsido is available to review your site on an on-going basis, the WAVE Web Accessibility Evaluation Tool is a free resource that’s readily available to check your work before you publish.
We recommend using WAVE to review your WordPress webpages prior to publishing.
What is WAVE?
WAVE is a suite of evaluation tools that helps authors make their web content more accessible to individuals with disabilities. WAVE can identify many accessibility and Web Content Accessibility Guideline (WCAG) errors, but also facilitates human evaluation of web content.
Access WAVE online at WebAIM WAVE. Information about browser extensions for Chrome and Firefox is available at WebAIM WAVE Browser Extension.
Video: Introduction to WAVE
This video provides a high-level orientation to WAVE by reviewing the findings for an example page (press release from NASA.gov). Captions are available and a transcript is provided following the video.
Video Transcript
WAVE is a free web accessibility evaluation tool that identifies ways to make a webpage more accessible to people with disabilities. While it is true that WAVE can identify many accessibility errors automatically, a person must identify many accessibility issues manually. This is true for all web accessibility tools, but WAVE assists an evaluator by identifying and revealing many potential accessibility issues and features. WAVE is available at wave.webaim.org.
Example Page
To open an example page, I’ll navigate to the “web page address” field and type in the address of a press release from NASA.gov I’ll hit Enter, and after the page loads, WAVE will display a version of this page.
Icons and Panels
WAVE highlights information that is important in an accessibility evaluation with inline icons. WAVE also displays a summary of its findings in a sidebar on the left of the window.
These findings are organized into six categories:
- Errors
- Contrast Errors
- Alerts
- Features
- Structural Elements
- and ARIA
The category icons are color coded, and designed with other visual cues to be accessible to users who have difficulty distinguishing color. WAVE is also designed to be accessible to keyboard and screen reader users.
There are four other panels within the sidebar that can be accessed through tabs:
- Details
- Reference
- Structure
- and Contrast
I’ll click on the tab that follows Summary– Details–to see a breakdown of every icon displayed on the page, grouped by category. I can also use this panel to jump to specific issues within the page and to hide or unhide categories of icons, or icon types within a category.
Errors
First, red Errors indicate issues that will impact certain users with disabilities. They also indicate failures to meet requirements in the Web Content Accessibility Guidelines, or WCAG.
Clicking on an icon in the Details panel will highlight the location of the corresponding icon on the web page. I’ll click the first Error icon and the NASA logo in the upper-left corner of the page is highlighted. I’ll click the icon on the page to open a tooltip for the error.
WAVE has identified the NASA logo as a linked image that is missing alternative text. Returning to the Details panel, the next category is “Contrast Errors.” These errors are instances of text that do not meet WCAG contrast requirements. I’ll come back to these later.
Alerts
Next are yellow Alerts– indicating elements in the page that may cause accessibility issues. An evaluator must decide the impact, if any, of Alerts.
When I click the icon for the first Alert, I see that WAVE has flagged the image at the start of this press release for long alternative text. Is this an accessibility issue? Maybe.
WAVE is alerting me to alternative text that is longer than normal. As the evaluator, I will need to decide if it should be more succinct.
Features
Green icons indicate Features that will improve accessibility– if implemented correctly. The first feature listed also relates to the image at the start of this press release.
WAVE has identified it as a linked image with alternative text. The alternative text–or alt attribute value–is displayed next to the icon for easy review. So WAVE has indicated that this is a linked image with alternative text–– which is good–but it has also brought the length of this alternative text to my attention.
To determine if appropriate alternative text has been provided, I’ll review the image and its alt attribute value, as well as any nearby page elements that may be relevant, such as the text that comes after the image.
I see that the alt attribute value contains some appropriate information– “NASA’s new class of astronauts appear on stage during their graduation ceremony…”–but the rest it– ”…at the agency’s Johnson Space Center in Houston”– should probably be removed.
The location of the graduates isn’t clearly identified in the picture, and this information is presented in page text after the picture.
Structural Elements
Blue structural elements come next. The first icon in this category indicates that the title of this press release has been marked as a first-level heading–which is correct. WAVE has also identified the presence of unordered lists, as well as several regions or landmarks. I’ll come back to these regions soon.
ARIA
Finally, WAVE identifies where ARIA has been used, with purple icons. ARIA can be used to present important accessibility information to people with disabilities, but it must be used very carefully. Unfortunately, a website will be less accessible when ARIA is used incorrectly, and it is often used incorrectly.
The first ARIA icon is grayed out a bit, indicating that it relates to a part of the page that is hidden right now. Most pages have some content that is visually hidden. Also multiple WAVE icons that apply to the same element may overlap each other, or cover elements in the page. For example, the search field in the upper-right corner of the page is almost completely covered by three icons.
Styles
To see everything within this page, I am going to switch the “Styles” option at the top of the sidebar from “on” to “off”. With Styles disabled, none of the WAVE icons overlap, and analyzing the reading and navigation order of the page’s elements is also easier.
I can now see that a hidden label of “Search NASA.gov” was added the search field, probably with the intent of improving accessibility for screen reader users. Right next to this label is an Alert icon indicating an orphaned form label. I’ll click on the icon, and the tooltip provides me with a short explanation–”A form label is present, but it is not correctly associated with a form control”.
Reference
If I were unclear on what this meant or what to do to address it, I would click the “Reference” link within this tooltip. This would open the next panel in the sidebar–Reference. In this case, the panel explains how an orphaned form label may impact people with disabilities, what to do to fix it, the algorithm used to detect it, and links to relevant WCAG requirements.
Icon Index
There is also an “icon index” link at the bottom of the Reference panel. I’ll click on this link, and all of WAVE’s icons are displayed, grouped by category.
Code
Returning my attention to the search field, I notice there is also a red Error icon. When I click on the icon, the tooltip identifies this error as “Missing form label”. It looks like something went wrong when the hidden label was added to this search field.
To see exactly what went wrong, I need to look into the page’s code, which is easy to do with WAVE. I’ll select “Code” from the tooltip. A code panel opens at the bottom of the window. The place in the code where this issue appears is highlighted and marked with a “missing form label” icon.
Reviewing the code reveals the problem: the label’s “for” attribute and the input’s “id” attribute do not match, resulting in the label being orphaned and the input being unlabeled, both issues that WAVE identified.
If I keep the code panel open, I can click on any icon on the page, or in the sidebar, to jump to that location in the code.
Structure
The next panel is Structure. This panel shows page regions that have been identified with HTML or ARIA, like “header” for information repeated at the start of each page, “main” for the main page content, and “footer” at the end of the page. It also shows the heading structure for the page.
WAVE identifies any page elements that are hidden, lists the regions and headings in order, and indicates any nesting of page elements. Unfortunately, this page has issues in all three of these areas.
For example, the header, main, and footer regions are hidden in the page, and they are hidden in a way that keeps them from providing any accessibility information.
The area that contains the main navigation comes after the footer in the code, but it should be before it, nested within the header. And the heading structure shows that the main content comes after all the page regions, when it should be inside the main region.
Contrast
The final panel is Contrast. The icons within this panel identify text that does not meet the WCAG Level AA contrast requirement of at least 4.5:1 WAVE also provides information for the lower 3:1 contrast requirement for large text.
I’ll click on the first contrast icon, and WAVE highlights the page element: white text on a blue background at the top of the press release. The contrast panel shows the foreground (or text) color, the background color, the contrast ratio, and whether the text size is normal or large.
This normal-size text has about 4:1 contrast, but needs at least 4.5:1. On the Contrast Panel, I’ll go to the “Background Color” fieldset and use the “Lightness” slider to find a darker shade of blue.
As I move the slider, WAVE previews the color in the web page On the panel WAVE indicates when I have met the requirement by changing the AA value under the “Normal Text” heading from “Fail” to “Pass”.
WAVE cannot detect all contrast issues. Manual testing is required for images with text, and when elements with transparency or background gradients are present.
The WAVE analysis available at wave.webaim.org is very valuable, but it may not always show everything that can be detected by WAVE, especially some types of content added with JavaScript.
Browser Extension
For instance, if I open up the example page directly, a main site navigation element is loaded dynamically with JavaScript. Fortunately, WAVE can run directly in Chrome and Firefox through extensions developed for these browsers.
Instructions on installing these extensions are available at wave.webaim.org under “Browser Extensions”. To use the WAVE extension, I’ll click the icon installed to the right of the address bar.
The WAVE extension can also be started with the keyboard shortcut Control + Shift + U on Windows, or Command + Shift + U on Mac. I now have access to everything that can be detected by WAVE, including the main navigation bar that was loaded dynamically with JavaScript. I also have the ability to evaluate password-protected or local pages.
WAVE is developed and made available as a free community service by WebAIM, part of the Center for Persons with Disabilities at Utah State University.