WAVE Accessibility Test Tool (Browser Extension)

Summary

WAVE is a browser extension that automatically evaluates the accessibility of a web page in a comprehensive way that considers many different aspects of digital accessibility. It provides pass/fail results based on the Web Content Accessibility Guidelines (WCAG) standards and other accessibility best practices. Like all other automated accessibility test tools, WAVE can only test against approximately one-third of WCAG standards, so other accessibility tests are still required.

Overview

The WAVE web accessibility test tool was developed by WebAIM and can be downloaded as a Chrome, Firefox, or Edge browser extension. These extensions provide the ability to test web accessibility directly from the web browser by opening the website and running WAVE.

WAVE is a comprehensive test tool that checks for compliance with many of the Web Content Accessibility Guidelines (WCAG) standards and accessibility best practices. Within the limitations of an automated testing tool, WAVE tests for a wide variety of errors and supports all disabilities targeted by accessibility. However, even if WAVE does not find any errors, it does not mean that a site is fully accessible. Many of the WAVE test results must be reviewed and evaluated by the tester, while still other checks must be made manually. This is typical of all automated accessibility test tools.

This tool has certain features that make it relatively easy for novice accessibility testers to check a web page’s Read Order, Tab Order, Heading Structure, and Color Contrast. Other WAVE features, such as Errors and Alerts, may require a more in-depth knowledge of accessibility and web development to fully understand, especially the ARIA (Accessible Rich Internet Applications) features that are identified. (ARIA is a set of roles and attributes used to code websites that make web content more accessible for people using assistive technology.) WAVE provides reference information that includes a basic explanation of each error, alert, feature, and structural element reported in the test results, a general explanation of how to repair each issue, and identification of and links to all corresponding WCAG standards. This information can be helpful for novice accessibility testers.

WAVE uses an icon-based graphical interface that some testers prefer over similar test tools that are more text-intensive. The icons identify all errors, alerts, and other features both in the test result panels and on the web page. This approach makes it easy to identify where reported errors are located on the web page. The icons on the web page provide links to both the WAVE reference information and the web page’s code, although it does not open the browser’s developer tools to explore the code.

WAVE states that it is accessible, but there are some limitations to its accessibility. See Accessibility Information later in this article for more information on WAVE accessibility and its limitations.

Who is Helped

The use of WAVE to evaluate website accessibility helps people with many disabilities, as it is a comprehensive tool that evaluates many different aspects of the accessibility of a website, such as its semantics, structure, reading order of its content, and color contrast.

General Guidance

WAVE is a comprehensive testing tool that allows testers to obtain:

• a summary report of the overall evaluation
• accessibility errors
• alerts of possible errors
• page structure
• color contrast errors
• accessibility features
• ARIA elements
• tab order
• read order

WAVE includes checks for compliance with current WCAG 2.1 guidelines (WebAIM updates this tool in alignment with WCAG updates). The WAVE Reference information includes links to applicable WCAG standards and more information on the relationship between WAVE tests and WCAG standards. A mapping of WAVE items to WCAG success criteria is available for a direct cross-reference between each WAVE test and the corresponding WCAG standards.

Automated accessibility test tools like WAVE check approximately 30% to 37% of the WCAG criteria. Because these tools check specific types of WCAG criteria, they generally find about half of the accessibility errors on a website or application.

WAVE tests many aspects of accessibility, but it should not be considered the only option when evaluating a website. As an automatic evaluation tool, WAVE evaluates website code by checking its semantics and structure. However, it is limited in its ability to evaluate other aspects of accessibility.

WAVE does not evaluate:

• Logical meaning and organization of the content.
• Visible focus.
• Correctness of descriptive text for images.
• Correctness of labels and descriptions for web elements and widgets.
• Keyboard navigation.
• Functionality with assistive technology.

For some accessibility aspects, such as keyboard navigation, a manual evaluation is always required. This is true for all automated accessibility test tools.

WAVE does provide needed information to help testers evaluate aspects of accessibility that automated tools cannot verify. For example, it exposes an image’s alternative text to the tester so they can evaluate if it correctly describes the image. WAVE verifies that the ALT attribute exists for an image and checks whether the image is marked as decorative. However, like any other automated accessibility testing tool, WAVE cannot determine whether an image is informative or decorative, nor can it verify if the alternative text is appropriate for the image.

WAVE also checks for things that are not WCAG violations but can affect some users with disabilities. For example, redundancy in an image’s alternative text can confuse a screen reader user, as they will hear the same text 2 or more times. WAVE flags this case as an alert for the tester to evaluate.

See Tips for Getting the Most Out of WAVE for some “power user” tips, such as turning off icons to declutter the web page or using the color picker’s eyedropper to test text contrast against background images and gradients. Most of these tips are covered later in this article.

Interface Options

When WAVE opens, the initial interface displays WAVE’s test result sidebar on the left of the page, with the Summary panel selected. The original web page is shown on the right with WAVE icons identifying all errors, alerts, features, and other elements in the test results added to the page. The icons on the web page provide links to the WAVE reference information and the web page’s code in addition to describing the error, alert, or feature identified by the icon.

WAVE’s test result sidebar contains a menu of 6 tabs with different functionalities related to the accessibility evaluation of a web page:

• Summary
• Details
• Reference
• Order
• Structure
• Contrast

Figure 1: Initial WAVE Interface Display

Figure 1 shows a screenshot of the main page of Accessible Community after WAVE evaluates it. The WAVE sidebar is on the left, and the original web page is on the right. The overall test results are initially shown in the sidebar. The Summary contains the total number of errors, contrast errors, alerts, features, structural elements, and ARIA elements found by WAVE. The web page now contains icons that WAVE has added to mark the location of each error, contrast error, alert, feature, structural element, and ARIA element identified by WAVE.

Note

All WAVE Interface Options examples use the Accessible Community home page.

Summary Panel

Select the “Summary” tab to open the Summary panel. The Summary panel is displayed by default when WAVE first opens.

The Summary panel provides an overview of the errors, alerts, and other accessibility-related elements and features found on the website. It is also useful for providing a high-level list of results when conducting a website audit.

The Summary panel shows a list of the errors, alerts, and relevant elements found in the evaluation of the web page:

• Errors: Accessibility errors that are a priority to resolve, marked with an “X” in a red box.
• Contrast Errors: Accessibility issues related to color contrast, marked with two red circles.
• Alerts: Potential accessibility errors that require manual evaluation, indicated by an “!” within a yellow triangle.
• Features: Elements that improve accessibility if implemented correctly. They must be evaluated manually. They are identified by a check mark inside a green circle.
• Structural Elements: Components that make up the website’s structure, such as headers, landmark regions, lists, and frames. They must be evaluated manually. They are identified with a blue pyramidal tree.
• ARIA: ARIA elements improve accessibility, specifically for assistive technologies. They must be evaluated manually. A purple cube identifies them.

Figure 2: WAVE Summary Panel

Test results of the evaluated elements for the Accessible Community home page in Figure 2 include 5 errors, 0 contrast errors, 6 alerts, 37 features, 28 structural elements, and 19 ARIA elements.

Details Panel

Select the “Details” tab to open the Details panel and view the detailed test results listed in the Summary panel.

The Details panel shows the evaluated elements, grouped by Errors, Alerts, Structural Elements, Contrast Errors, Features, and ARIA Elements with a brief description. The number of each error, alert, or element is identified.

Results are further broken down by each type of error, alert, etc., with a specific icon for each. Error icons, for example, are always red with a small “x” in the lower right corner. However, error icons vary in shape and imagery to indicate different types of errors.

For example, the screenshot of the Details panel in Figure 3 below shows 5 errors: 1 linked image that is missing alternative text, 1 form field that has a missing form label, and 3 empty headings:

• The “linked image missing alternative text” error uses a square icon containing the image of a mountain under a piece of chain link.
• The “missing form label” error uses a square icon containing the image of a tag.
• The “empty heading” errors use a round icon with an “h” in it.

Note

The color for the three “empty heading” icons in Figure 3 is “grayed out” or dimmed. This indicates that these three headings are hidden from view on the web page. It is possible for these elements to be detected by assistive technology even though they are visually hidden. Testers need to evaluate hidden elements to ensure they are also hidden from assistive technology. WAVE includes an option to disable web page styles, discussed later in this article, that temporarily reveals hidden elements to help testers evaluate them.

By clicking one of the icons in the Detail panel, WAVE highlights the corresponding icon on the web page to draw attention to the element in question.

Because WAVE usually adds so many icons to the web page, it can sometimes be difficult to focus on specific results. One suggestion for a better experience using WAVE is to temporarily hide icons on the web page using the Details panel:

• Open the Details panel in the sidebar.
• Deactivate (uncheck) the checkboxes for icons that do not need to be analyzed at the moment.
• Testers can hide an entire group of icons or only a specific icon type. For example, testers can hide all Alert icons or only Alerts related to redundant alternative text.

Figure 3: WAVE Details Panel

See the WAVE Documentation for more information about each icon in the Details panel. This page is a compilation of the reference material for all WAVE icons.

Reference Panel

Testers can access reference information about any issue reported in the test results in three ways.

• Select the “Reference” tab to open the Reference panel.
• From the Details panel, click on the information icon (an “i” in a circle) next to any reported issue. The information about that issue is displayed in the Reference panel.
• On the web page, click any of the WAVE icons added to the page. This opens a Tooltip popup window that contains a brief description of the error and links to the Reference panel and Code view for that specific error.

Figure 4: Accessing Reference Data - Details Panel and Icon Tooltip

The Reference panel provides information about what each error means, why it is important, how to resolve it, and a link to information about the WCAG requirements that relate to the error. This link, found in the Standards and Guidelines section of the Reference panel, redirects testers to the WebAIM WCAG Checklist. This checklist provides links to the corresponding WCAG guideline for the error.

Figure 5: WAVE Reference Panel

See the WAVE Documentation page for a compilation of the reference material for all WAVE icons. An overview of important accessibility checks to take for each icon type is located in the WAVE Web Accessibility Evaluation Guide.

Order Panel

Select the “Order” tab to open the Order panel.

The Order panel provides information about the order, role, and accessible name for all navigable elements on the page (all elements that can receive focus, such as links, buttons, or form fields). In this way, it is possible to quickly identify, before manual testing, elements that are not correctly ordered for screen reader users or keyboard navigators, as well as what each element is and whether it has a meaningful name for screen reader users.

• By clicking any item in the Order panel list, WAVE highlights that item on the website.
• The “Show WAVE Icons” option toggles the WAVE icons displayed on the web page on and off.

For example, the first item in Figure 6 below is a skip link. The Order panel indicates this is the first navigable item in the page’s tab order. Screen reader users navigating to this element will hear its role and accessible name, in this case, “link skip to main navigation.”

Figure 6: WAVE Order Panel

See Focus Order for more information on ordering navigable elements correctly.

Structure Panel

Select the “Structure” tab to open the Structure panel.

The Structure panel presents the structure of the page, allowing testers to recognize quickly:

• Elements that are not tagged as part of the structure but should be.
• Elements that are tagged as part of the structure but shouldn’t be.
• Inaccurate headings, landmark regions, lists, or frames.
• Missing headings or landmark regions.
• Errors in the order of heading levels.

By clicking on an element in the list in the Structure panel, WAVE focuses on that element on the website. This is especially useful for highlighting which part of the page is enclosed by a specific landmark region.

Figure 7: WAVE Structure Panel

See Headings and Landmark Regions for information on using these methods of structuring content. Lists and Frames are also reported on the Structure panel when present on a web page.

Contrast Panel

Select the “Contrast” tab to open the Contrast panel.

The contrast panel:

• Identifies all contrast errors with a contrast error icon in the Contrast panel and on the web page.
• Specifies the exact contrast ratio between the two selected colors.
• Specifies whether the two colors meet the AA and AAA WCAG levels, depending on the text size.
• Includes tools to check and adjust colors for better contrast between the foreground and the background color.
• Temporarily changes a color on the web page when it is adjusted in the Contrast panel.

Select any contrast error icon in the Contrast panel or on the web page to view the specific contrast and color values, and pass/fail results for that error in the Contrast panel, as shown in Figure 8 below. To change either the foreground or the background color:

• Lightness Slider: Use the Lightness slider to adjust how dark or light the color is. Lightness, or luminance, is the primary factor in determining color contrast, so it is usually the quickest way to improve contrast without changing the hue.
• Color Code (Editable Field): Enter a color code in RGB, HSL, or HEX format to select another color.
• Color Picker & Eyedropper: Click the sampled color below the color code to open a dialog window with a color picker, a color field and a hue selection slider, a color code format selector (choose RGB, HSL, or HEX), and an eyedropper. The color field and hue selection slider can be used to adjust the color. More importantly, the eyedropper can be used to manually select a color from any part of the screen display. This is useful for testing text contrast over background images and gradients, as automated tools cannot evaluate this scenario.

WAVE, unlike most other accessibility test tools, temporarily changes the color on the web page when a color is adjusted in the Contrast panel. This makes it easy for testers to recommend better color choices to designers and developers.

Figure 8: WAVE Contrast Panel with Color Picker and Eyedropper

See Text Contrast for more information about text contrast requirements.

Select the “Desaturate page” option at the bottom of the Contrast panel to display the web page in grayscale, allowing the tester to visually verify whether all elements are perceptable and understandable when color is removed.

Figure 9: Accessible Community Home Page in Grayscale

See Never Rely on Color Alone for more information about using color correctly.

Code View

WAVE has a code view to help testers evaluate code for fixes, but it does not connect to the browser’s developer tools. There are two methods to access the code view.

• Click on the Code tab at the bottom of the original web page to open the code view.
• Click on any of the icons that WAVE has added to the web page. This opens a Tooltip popup window. Click on the Code link in the popup window to open the code view at the bottom of the web page.

Figure 10: Accessing the Code View - Icon Tooltip

Figure 11: WAVE Code View

Styles On/Off Toggle

WAVE lets testers easily disable styles on the web page. The Styles On/Off toggle button is located at the top of the WAVE sidebar.

Web styles created by Cascading Style Sheets (CSS) are sometimes used to manipulate the location of content on a web page. Disabling the styles reveals the true “read order” of the page for assistive technologies. The page may look odd with styles disabled, but as long as all content is in the correct reading order, the page’s appearance can be disregarded.

Disabling the styles also reveals any hidden elements on the web page. This can be helpful when testers need to locate and evaluate potential errors with hidden elements.

Figure 12: Styles On/Off Toggle Button

Figure 13 below shows the Accessible Community home page with the styles disabled. This reveals the true reading order of the content and any hidden elements on the page.

Figure 13: Accessible Community Home Page with Styles Disabled

See Reading Order for more information on ordering page content correctly.

Test Procedures

All procedures in this article apply to version 3.2.3 of the WAVE Chrome extension. Procedures for other browsers will be similar.

• Refer to the WAVE web page for download information for all WAVE browser extensions.

All images showing results for test procedures use either the U.S. National Weather Service home page or the U.S. Library of Congress home page. While there is only one example for each test procedure, these WebAIM resources provide information on other possible test result considerations:

• WAVE Documentation combines all WAVE Reference data on one page, describes all WAVE errors, alerts, features, and elements, and identifies related WCAG requirements for each.
• WebAIM’s WCAG 2 Checklist contains recommendations for implementing accessibility principles based on WCAG requirements and tied to the WAVE Reference data.
• WAVE Web Accessibility Evaluation Guide outlines WAVE accessibility checks, organized by content type.

Install and Run

To install and run the WAVE accessibility test tool (browser extension) in Chrome:

1. Go to the WAVE Chrome Extension website: WAVE Chrome Extension web page
2. Click on “Add to Chrome”
3. Click on “Add extension” in the dialog box.
4. A message indicates that WAVE has been added to Chrome, and the WAVE icon is added to the toolbar.
5. Open the web page to be tested.
6. Click on the WAVE icon on the Chrome toolbar to run WAVE.
7. The WAVE test results panel will appear to the left of the web page, and the WAVE icons will appear on the web page. The icons may make the page appear broken, but this is normal and should be disregarded.

Evaluate the Summary Panel

Start with the Summary panel to get a general idea of the overall accessibility of a web page:

• How many errors and alerts does the page have?
• How many features and elements need to be reviewed?

The answers to these questions indicate the scope of work involved to address the accessibility of the web page being tested.

Figure 14: Summary Panel Evaluation Results

The Summary panel evaluation results for the U.S. National Weather Service home page shown in Figure 14, identify 6 errors, 14 contrast errors, 26 alerts, 19 features, 16 structural elements, and no ARIA elements on this page. This indicates that the tester needs to review each of these results carefully in the Details panel to fully evaluate the page’s accessibility.

Evaluate the Details Panel

Go to the Details tab to see a detailed breakout of the evaluation results presented on the Summary panel. The Details panel lists the specific types of errors, alerts, features, and elements found and identifies the number of elements for each error type. Beside each error type is a brief description of the error.

Clicking an icon in the Details panel causes the corresponding icon on the web page to flash so testers can locate elements listed in the Details panel on the web page.

Clicking on an icon on the web page opens a Tooltip popup window with:

• The name of the error, alert, feature, or element.
• A brief description of the error, alert, feature, or element.
• A link to activate the code view to analyze further the error, alert, feature, or element.
• A link to the reference panel for more information on what the error, alert, feature, or element means, its impact, and how to fix it.

Figure 15: Details Panel Evaluation Results

Figure 15 shows part of the Details panel evaluation results for the U.S. National Weather Service home page, starting with 6 errors:

• 1 missing alternative text error
• 1 linked image missing alternative text error
• 3 image map missing alternative text errors
• 1 language missing or invalid error

In addition to the errors, scrolling down the Details panel reveals the contrast errors, alerts, features, structural elements, and ARIA elements evaluated by WAVE.

Evaluate the Errors (Details Panel)

Based on the high-level evaluation results in the Summary panel, it is recommended to continue working on the elements identified as errors, as they are usually the priority for correctness. Errors are issues that affect people with disabilities and can be identified by WAVE as failing one or more of the Web Content Accessibility Guidelines (WCAG) requirements.

The errors listed in the Details panel evaluation results for the U.S. National Weather Service home page are shown in Figure 16 below. The first error that the Wave Details panel identifies is an alt text error. This is just one of the many types of errors that can be found when evaluating a website’s accessibility.

Clicking the corresponding error icon on the web page opens the Tooltip popup which displays the error details and links to the reference panel and code view. The Tooltip reveals the following information about the error:

• Error: Missing alternative text
• Error Description: Alternative text is missing from an image.
• Code Analysis: The image element lacks the ALT attribute.
• Reference Solution: Add the ALT attribute in the image code.

Sometimes an image has the ALT attribute, but the alt text is intentionally empty (alt=””) because it’s a decorative image. Because WAVE does not distinguish between decorative and informative images, it identifies this as an error. For this reason, it is important to analyze each error that WAVE throws and determine if it is a problem.

In this example, the image of an exclamation point indicates that the following news story about a typhoon is important and should include alternative text.

Figure 16: Alt Text Error Identified in the Details Panel and Web Page

The example is shown with the code view open. The active code view highlights the line of code where the alt text error is found for further analysis. In this example, testers can see that the code for the “exclamation point” image lacks an alt attribute. The information in the Reference panel can also help testers understand and fix errors.

All errors identified in the Details panel should be evaluated in this same manner.

Evaluate the Contrast Errors (Details Panel)

Contrast errors affect people with low or limited vision and those who are colorblind. These are errors that WAVE can identify as failing one or more of the Web Content Accessibility Guidelines (WCAG) requirements. The Details panel lists the types of contrast errors found and identifies the number of elements that have each type of contrast error. Beside each error type is a brief description of the error. Click on each contrast error icon in the Details panel to identify the corresponding element on the web page.

The contrast errors listed in the Details panel evaluation results for the U.S. National Weather Service home page are shown in Figure 17 below. The first 14 contrast errors that the Wave Details panel identifies are identified as “very low contrast errors.”

Clicking the corresponding contrast error icon on the web page for the first very low contrast error in the Details panel opens the Tooltip popup for this contrast error. The Tooltip reveals the following information:

• Error: Very low contrast
• Error Description: Very low contrast between text and background colors.
• Code Analysis: The minimum contrast ratio defined by WCAG between the foreground and background color is not met.
• Reference Solution: Use the Contrast tool in WAVE to identify alternative colors that meet the contrast ratio.

Figure 17: Contrast Error Identified in the Details Panel and Web Page

The example is shown with the code view open. The active code view highlights the line of code where the very low contrast error is found for further analysis. In this example, testers can see the RGB color codes for the foreground and background which causes the contrast error. The information in the Reference panel can also help testers understand and fix errors.

Contrast errors are also listed in the Contrast Panel, where testers can adjust colors with poor contrast to find better color combinations that meet WCAG color contrast requirements.

All errors identified in the Contrast panel should be evaluated in this same manner.

See Text Contrast for more information on color contrast requirements.

Evaluate the Alerts (Details Panel)

Once all the elements identified as errors have been evaluated, it is recommended to analyze the elements identified as alerts. Alerts are elements that may cause accessibility issues for people with disabilities. The tester must evaluate them, as WAVE cannot definitively determine whether these issues fail WCAG requirements. Resolving these alerts will improve people’s experience when using the website.

The Details panel displays a list of the alert types found and shows the number of items that have each type of alert. Next to each alert type is a brief description. Click each alert icon in the Details panel to identify the corresponding element on the web page.

The alerts listed in the Details panel evaluation results for the U.S. National Weather Service home page are shown in Figure 18 below. The second alert that the Wave Details panel identifies is for redundant alternative text. Clicking the corresponding alert icon on the web page opens the Tooltip popup for this alert. The Tooltip reveals the following information:

• Error: Redundant alternative text
• Error Description: The alternative text for an image is the same as nearby or adjacent text.
• Code Analysis: The image in question is part of a link. The alt text for the image is the same as the text in the same link.
• Reference Solution: If the text near the image describes its function, the image is considered decorative, and its ALT attribute should be set to an empty string (alt="").

Redundant alternative text can make web content confusing for people who are keyboard navigators or screen reader users. This redundancy is not always an accessibility error, as there are times when it makes sense to repeat information on a web page, so it requires manual evaluation by the tester. Adjacent repeated content, such as an image contained within a text link, is identified by WCAG as an accessibility issue. In this case, the alt attribute for this linked image should be left empty, marking it as decorative, since the text associated with the same link already describes its purpose.

Figure 18: Redundant Alt Text Alert Identified in the Details Panel and Web Page

The example is shown with the code view open. The active code view highlights the line of code containing the redundant alt text alert for further analysis. The code shows testers that the image in question is embedded in a link and that the image’s alt text repeats the link text. The information in the Reference panel can also help testers understand and fix alerts.

All alerts identified in the Details panel should be evaluated in this same manner.

Evaluate the Features (Details Panel)

Features are elements that can improve accessibility when implemented correctly. The tester must evaluate them, as WAVE cannot definitively determine whether these issues fail WCAG requirements. Correctly implementing these features will improve people’s experience when using the website.

The Details panel displays a list of the types of features found during evaluation and identifies the number of issues for each feature type. Next to each feature type is a brief description. Click each feature icon in the Details panel to identify the corresponding icon on the web page.

The features listed in the Details panel evaluation results for the U.S. National Weather Service home page are shown in Figure 19 below. There are 10 linked images with alternative text, 3 image map areas with alternative text, and 6 form labels that require manual review.

This example looks at the first visible form label icon listed in the test results. Clicking the corresponding feature icon on the web page opens the Tooltip popup for this feature. The Tooltip reveals the following information:

• Feature: Form label
• Feature Description: The form label “Local forecast by “City, St” or ZIP code” is present and appears to be associated with the following form input field on the web page.
• Code Analysis: The “for” attribute of the form label contains the “id” of the following form input field.
• Reference Solution: Verify that the label is accurate, descriptive, and associated with the correct form control element.

Figure 19: Form Label Feature Identified in the Details Panel and Web Page

The example is shown with the code view open. The active code view highlights the line of code containing the form label feature for further analysis. The code shows testers an HTML label tag with a “for” attribute that references the “id” of the following input field to programmatically tie these two elements together. The information in the Reference panel can also help testers understand and fix alerts.

All features identified in the Details panel should be evaluated in this same manner.

Evaluate the Structural Elements (Details Panel)

Structural Elements represent the structure of the web page. They consist of headings, landmark regions, lists, and frames. Structural elements can improve accessibility when implemented correctly. The tester must evaluate them, as WAVE cannot definitively identify when these issues fail WCAG requirements. There are also many best practices involved in the use of structural elements. Correctly implementing these elements will improve people’s experience when using the website.

The Details panel displays a list of each type of structural element found during evaluation and the number of each element. Next to each type of structural element is a brief description. Click the icon for each structural element in the Details panel to identify the corresponding icon on the web page.

The structural elements listed in the Details panel for the U.S. National Weather Service home page are shown in Figure 20 below. There is 1 level 1 heading, 15 unordered lists, and 2 frames that require manual review.

This example looks at the level 1 heading icon listed in the test results. Clicking the corresponding icon on the web page opens the Tooltip popup for this element. The Tooltip reveals the following information:

• Element: Heading Level 1.
• Element Description: A level heading (<h1> element) is present.
• Code Analysis: The text is coded as an <h1> element.
• Reference Solution: Verify that the text is correctly implemented as a heading and is properly structured in the page outline.

Figure 20: Level 1 Heading Identified in the Details Panel and Web Page

The example is shown with the code view open. The active code view highlights the line of code containing the level 1 heading structural element for further analysis.

Use the Structure Panel to quickly identify and evaluate the hierarchy of all structural elements on the page.

See the following Ta11y learning topics for more information on:

• Headings
• Landmark Regions
• Lists
• Frames

Evaluate the ARIA Attributes (Details Panel)

Accessible Rich Internet Applications (ARIA) is a set of roles and attributes that can be added to code to provide semantic context and improve accessibility for assistive technologies. WAVE identifies places on the web page where ARIA is used. These must be evaluated manually to ensure ARIA was used correctly, as incorrectly implemented ARIA can make a web page less accessible.

The Details panel displays a list of the types of ARIA attributes found during evaluation and identifies the number of issues for each attribute type. Next to each ARIA attribute is a brief description. Click each ARIA icon in the Details panel to identify the corresponding icon on the web page.

The ARIA attributes listed in the Details panel evaluation results for the U.S. Library of Congress home page are shown in Figure 21 below. There are 3 unidentified ARIA attributes, 92 ARIA label attributes, 149 ARIA tabindex attributes, 1 ARIA alert or live region, 80 ARIA button attributes, 28 ARIA hidden attributes, 1 ARIA expanded attribute, and 1 ARIA popup attribute on the home page that require manual review. This example looks at the first ARIA label icon listed in the test results. Clicking the corresponding icon on the web page opens the Tooltip popup for this ARIA label. The Tooltip reveals the following information:

• ARIA Attribute: ARIA label
• ARIA Description: This identifies an ARIA label in the code.
• Code Analysis: A list item containing a linked font icon that opens the search dialog window has an aria-label value of “search.”
• Reference Solution: Reports the presence of an aria-label attribute, so its value must be checked to ensure it provides a descriptive and accurate label.

Figure 21: ARIA Label Attribute Identified in the Details Panel and Web Page

The example is shown with the code view open. The active code view highlights the line of code where the ARIA label attribute is found for further analysis. The code shows that an “aria-label” attribute with the value “search” was added to a list item to describe its contents. The information in the Reference panel can also help testers understand and fix ARIA attributes.

All ARIA attributes identified in the Details panel should be evaluated in this same manner.

See the ARIA Overview (Ta11y) for more information on using ARIA attributes.

Evaluate the Order Panel

The Order panel lists the page’s navigable elements that WAVE can identify. Navigable elements are the elements on a web page that can receive focus, such as links, buttons, or form fields. The identified elements are listed by number in the Order panel based on their focus order. This is how a keyboard navigator using the Tab key moves from one focusable element to the next. The same elements are numbered on the web page so they can be easily located.

In addition to numbering the navigable elements by their focus order on the page, WAVE provides information about the role and accessible name for each navigable element. In this way, it is possible to quickly recognize, before manual testing, those elements that are not correctly ordered for a screen reader user or keyboard navigator, as well as what each element is and whether it has a meaningful name for screen reader users.

Testers must manually review the information in this panel to verify that each navigable element has the proper order, role, and accessible name and that the accessible name represents the purpose of that element. Elements without an accessible name or with inaccurate accessible names will be difficult for people who rely on assistive technologies like screen readers to successfully navigate a web page or complete tasks.

The navigable elements listed in the Order panel for the U.S. National Weather Service home page are shown in Figure 22 below. There are 187 navigable elements that need to be reviewed manually. This page has only one element at the beginning: the linked image to the U.S. Commerce Department, which is out of order. The Order panel, however, quickly reveals other problems with the navigable elements on this page. There are several elements without an accessible name (on this page, caused by linked images without alt text), duplicated elements, and arguably too many links. Imagine a sighted keyboard navigator using a mouthstick to get to the 187th link.

This example looks at the 18th navigable element listed in the test results, the linked image of the WRN logo, which is identified as having “No Accessible Name.” The Code View and Reference Information are not available in the Order panel, but testers can return to the Details panel to explore errors like this that are noted here.

Figure 22: Link With “No Accessible Name” Identified in the Order Panel and Web Page

See Focus Order for more information on ordering navigable elements.

Evaluate the Structure Panel

The Structure panel works in tandem with the information provided in the Details panel regarding to structural elements. It presents an ordered list that reveals the structural hierarchy of the web page. This list includes all headings, landmark regions, lists, and frames found on the page. By clicking on an element in the list in the Structure panel, WAVE focuses on that element on the website. This is especially useful for highlighting which part of the page is enclosed by a specific landmark region, making it easier to determine if landmarks are used correctly.

The page structure is important as many assistive technology users navigate by using structural elements like headings and landmarks. When structural elements are not implemented correctly, it is difficult for people using assistive devices like screen readers to find and understand information.

Testers must manually review the test results to verify that:

• All elements that should be part of the structure are listed as structural elements.
• Elements that should not be part of the structure are not listed as structural elements.
• Landmark regions, if used, are implemented correctly and enclose all content.
• There are no missing headings or landmark regions.
• Headings are implemented correctly and match the visual headings on the page.
• There is one level 1 heading that accurately describes the page.
• Heading levels 2 through 6 accurately describe the content that follows them.
• Heading levels are nested correctly.
• Lists and frames, if used, are implemented correctly.

The structural elements of the U.S. Library of Congress home page are shown in Figure 23. Notice that one set of header and navigation regions is grayed out to indicate they are hidden. This is because there is one set of these regions used for desktop displays and another for smaller mobile devices. Testers need to evaluate this page at both display sizes to ensure the two headers and navigation regions include the correct content and functionality.

The example in Figure 23 below shows how WAVE highlights the navigation landmark region on the web page when selected in the Structure panel. All landmark regions must be checked to ensure they are implemented correctly.

Figure 23: Navigation Region Identified in the Structure Panel and Web Page

The example is shown with the code view open. The active code view highlights the line of code where the navigation region is found for further analysis.

All regions, headings, lists, and frames identified in the Structure panel need to be evaluated in the same way.

This panel works in tandem with the structural elements listed in the Details Panel.

See the following Ta11y topics for more information on:

• Headings
• Landmark Regions
• Lists
• Frames

Evaluate the Contrast Panel

The Contrast Panel works in tandem with the information provided on the Details panel that relates to contrast errors and alerts. It presents an ordered list of all contrast errors detected on the web page. By clicking on a contrast error icon in the Contrast panel, WAVE focuses on that error on the website. The panel also specifies the exact contrast ratio between the foreground or the background colors and whether they meet the WCAG AA and AAA level requirements depending on the text size. For each error, testers can find alternate colors that meet these requirements.

Color contrast is important for people with low or limited vision, and for people who are colorblind. These individuals rely on good contrast to perceive and understand information.

Testers must manually review the test results to verify contrast errors have not occurred because the text is placed over a background image or gradient. If this is the case, the eyedropper that is available by opening WAVE’s color picker can be used to test the actual background colors used with the text. As discussed when explaining the Contrast panel interface, this panel can also be used to adjust colors with poor contrast by selecting new color values for either the foreground or the background color using the:

• Lightness Slider
• Color Code Entry Field
• Color Picker & Eyedropper Tools

This panel is especially useful for adjusting colors with poor contrast on the web page, making it easy for testers to recommend better color choices to designers and as it temporarily changes the color on the web page when a color is adjusted in the Contrast pane. This makes it easy for testers to recommend better color choices to designers and developers.

The errors listed in the Contrast panel for the U.S. National Weather Service home page are shown in Figure 24 below. There are 13 total contrast errors that need to be manually reviewed.

This example looks at the first error listed in the test results, the placeholder text for the “Local Forecast” form. The light gray color of the text has a Hex code value of #999999 and the background color is white. The text size is identified as “normal” and the contrast ratio is 2.84 to 1, below the minimum 4.5 to 1 contrast ratio required for normal text.

Figure 24: Contrast Error Identified in the Contrast Panel and Web Page

In this case, the Lightness slider is used to adjust the text color to a darker gray with a Hex code value of #707070. The white background is not changed. The contrast ratio is now 4.95 to 1, above the contrast ratio required for normal text as shown in Figure 25 below.

Figure 25: Using the Contrast Panel to Correct Contrast Errors

The Contrast panel works in tandem with the contrast errors listed in the Details panel. The Code View and Reference Information are not available from this panel but testers can return to the Details panel to explore errors that are identified here.

See Text Contrast for more information on color contrast requirements.

The last check available to testers from the Contrast panel is to view the page in grayscale. Selecting the “Desaturate page” option at the bottom of the Contrast panel allows the tester to visually verify that all elements can be perceived when color is removed. While there is no specific requirement related to this check, it does provide a quick insight into potential problems that may exist related to the loss of information when color alone is used to convey information.

See Never Rely on Color Alone for more information about using color correctly.

Accessibility Information

WAVE has certain features that help support testers with disabilities:

• Keyboard activation by pressing Control + Shift + U (Command + Shift + U on Mac) or by activating the “WAVE this page” context menu item (right-click).
• Keyboard navigation.
• Correct semantics of the components when being announced by a screen reader.
• Identification of the type of error through text, color, and shape. This information is also included in the alternative text.
• Functionality to disable styles on the web page allowing a better perception of the accessibility comments for some testers.
• Correct color contrast to support low-vision and color-blind testers.

However, other aspects of WAVE can create issues for testers with disabilities. For example, the magnification of the screen can cause the content of the WAVE sidebar to be truncated such that testers may be able to access it by browsing with the keyboard but not with the mouse. Also, there are some specific WAVE features that are problematic for keyboard navigators:

• Mouse users can click on an icon in the WAVE Details, Order, Structure, and Contrast panels and see the corresponding WAVE icon on the web page flash. There is no connection between the WAVE test result panels and the WAVE icons on the web page without the use of a mouse.
• Icons in the WAVE Details, Order, Structure, and Contrast panels are not selectable using the keyboard. This lessens the accessibility of WAVE for keyboard navigators. These icons are announced by screen readers as being clickable links so this will be confusing for screen reader users in addition to not being selectable.
• When tabbing to the WAVE icons on the web page, the Tooltip popup window can be opened and closed, but the Reference and Code links are not accessible using the keyboard. The content can be seen by sighted keyboard navigators but is not accessible at all to screen reader users. This also means that the WAVE icons on the web page are not connected to the Reference and Code panels for keyboard navigators as they are for mouse navigators.

Refer to the WAVE Accessibility Tips for more information about the accessible use of WAVE.

References

• What is WAVE and how do I use it? (Help Information) - WebAIM
• WAVE Documentation (Reference Information) - WebAIM
• Web Accessibility Evaluation Guide - WebAIM
• Tips for Getting the Most Out of WAVE - WebAIM
• Evaluating Cognitive Accessibility with WAVE - WebAIM
• WAVE Webinar: What’s new and what’s coming? - WebAIM (video)
• Test Web Accessibility Using the WAVE Browser Extension - Egghead
• The WAVE Accessibility Tool - University of Minnesota
• Use the WAVE extension to start accessibility audits and embed accessibility into processes - PopeTech
• WAVE Evaluation Tool - Useful tool for Accessibility Testing (video)
• How to use the WAVE extension to start accessibility audits and embed accessibility into processes (video)
• Use WAVE to start a manual accessibility audit (video)
• Find and fix contrast issues with the WAVE extension (video)