WAVE has been designed to be accessible to users with disabilities, including screen reader users. Because the WAVE interface is complex and highly visual, accessibility for screen reader users poses some unique challenges, but structure has been added to facilitate better screen reader navigation and exploration.
IMPORTANT! While WAVE can identify accessibility issues within the web page being tested, including issues that may not be readily detectable using a screen reader alone, WAVE does not fix accessibility issues within the page. Significant page accessibility issues can sometimes interfere with WAVE functionality.
The WAVE interface is comprised of the following primary areas (in order):
Accessibility items identified by WAVE (Errors, Contrast Errors, Alerts, Features, Structural Elements, and ARIA) are presented in all 3 of these areas, allowing the WAVE user to explore WAVE feedback in various places and ways.
When using the WAVE Chrome or Firefox extension, you can activate WAVE by pressing Control + Shift + U (Command + Shift + U on Mac) or by activating the "WAVE this page" context (right click) menu item.
While colors are used to identify different categories of WAVE icons, all icons also have visual indicators beyond color that allow them to be readily differentiable without color vision. All icons also have descriptive alternative text.
Unchecking the Styles option in the WAVE sidebar can streamline and simplify that page presentation. This can make it much easier to explore the accessibility feedback.
The primary WAVE areas are defined as regions/landmarks. Navigating by regions/landmarks using the keyboard provides quick access to the major WAVE components.
In the online version of WAVE, the content for the evaluated page is located within an inline frame. In the extensions, the WAVE sidebar is located within an inline frame. Navigating by frames using the keyboard can allow you to quickly jump between these page areas.
The main content areas within the WAVE sidebar (Summary, Details, Reference, Structure, and Contrast) are located within a tab panel. When navigating using the Tab key or by buttons, the currently-active tab will be focused and, if using a screen reader, identified as a tab. Change tabs by pressing the left/right or up/down keys. The content within the tab panel will automatically change as you change tabs. Pressing the Tab key will set focus to the tab panel content.
The content and functionality within the sidebar is accessible. Within the Details panel you can check or uncheck checkboxes to hide categories or types of icons. The "More Information" icon after each type of item will jump to the Reference panel and present relevant documentation. However, the Details panel may contain numerous icons. Clicking these icons provides a visual highlighting of the relevant element within the web page. Because these icons provide only visual functionality, and because making numerous of these icons keyboard navigable as buttons could make it very difficult to explore the sidebar content, these are not directly keyboard accessible as links or buttons. One can, however, navigate by images and activate the images to view the visual highlighting. Similar functionality is available for icons within the Code panel.
The icons that are injected within the tested web page are accessible via the keyboard as buttons. Navigating only buttons within the page can make it easier to explore these items. Activating a button will open a tooltip with additional information.
WAVE is not perfect. If you are having difficulties using WAVE or have feedback or recommendations, please send us feedback.