Automated testing tools

WAVE is a free accessibility evaluation tool created by WebAIM at Utah State University. 

WAVE is a preferred accessibility testing solution for many users because it uses a straightforward graphical interface that shows conformance issues in a way that does not require a high level of technical knowledge. Users who are new to accessibility find that this extension is an excellent introduction to learning about accessibility issues.

The most common use of WAVE is through a browser extension. WAVE supports Chrome, Firefox, and Microsoft Edge browsers.

Once you have the extension, you can activate the tool by using the WAVE icon in the actions bar in your browser. WAVE immediately reviews the webpage that you are on and returns results. These results are displayed in a summary that includes the following details:

• Errors: Items that fail the Web Content Accessibility Guideline (WCAG) criteria
• Contrast Errors: Items that fail WCAG contrast requirements
• Alerts: Items that require manual checks
• Features: Elements in the Document Object Model (DOM) that are used by assistive technologies, such as the presence of a form label or skip link.
• Structural elements: Heading level structure on the page
• Accessibility Rich Internet Application (ARIA): The presence of ARIA roles, labels, and live regions.

WAVE annotates the webpage with colors and icons indicating visually where the summary items are on the webpage. You can turn on or off any annotations on the page for a more focused assessment and review the underlying HTML, similar to how you view it by using the Inspect feature in your browser.

The following figure shows all the accessibility issues that WAVE identifies in a simple, graphical way: 

axe DevTools by Deque is an automated accessibility tool for scanning web content for engineering and compliance teams. The free browser extension scans individual web pages and identifies WCAG failures based on the established guidelines. The primary focus for this extension is on the DOM  and structure of the page.  

axe DevTools is available for both Chrome and Firefox. After you install the extension, you can activate the scanning tool by using the Inspect Element feature in your browser.  

When you select axe DevTools from the Inspect menu, select the Scan All of my page option.  axe analyzes the webpage you are on and reports WCAG issues identified. 

axe breaks the issues down into five categories: 

• Critical
• Serious
• Moderate 
• Minor
• Needs review

axe DevTools shows the details of the code so engineers can easily identify the location of the issue, as shown in the following figure:

Pega Accessibility Inspector is an automated accessibility scanning tool built directly into the application authoring experience of the Pega Platform™. Pega Accessibility Inspector is not a fully comprehensive test compared to WAVE or axe DevTools. However, because the authoring studios in Pega Platform include the tool, you can immediately see where you need to make adjustments in your configuration.

Issues fall into four main categories. A category does not display in the pane if there are no issues under it.

• Content: Issues related to missing content, such as missing helper text, missing grid summaries, and missing headers, help understand the page content.
• Structural: Issues related to navigating the structure of the page, such as heading levels that are out of order or missing landmarks.
• Interactivity: Issues related to keyboard interactivity; for example, you create a click event without a keyboard event.
• Compatibility: Issues related to deprecated layouts, such as using deprecated layouts.

The following figure shows an example of a result set by the Accessibility Inspector, which runs tests that are similar to other accessibility compliance tools. The icon is indicated in the figure towards the end of the page where the tests can be triggered.  For more information about using Accessibility Inspector, see Inspecting accessibility. 

In addition to the automated accessibility scanning tools, other tools help identify web accessibility issues. The following tools introduce more visibility into the structure of a webpage and those that directly test color contrast:

• Web Developer
• Accessibility bookmarklets
• Contrast analyzer

Web Developer 

Web Developer is a browser extension available for Chrome and Firefox. This extension allows you to highlight portions of your webpage with the elements in the code that relate to accessibility (for example, alternative text, headings, aria-roles, tab-index, and title attributes). Web Developer helps you ensure that a page has all the expected semantic roles. The figure below illustrates some of the options available 

Accessibility bookmarklets  

A bookmarklet is a link that contains JavaScript. When a bookmarklet link is activated, the browser runs the JavaScript code that it contains. Accessibility bookmarklets display headings, lists, landmarks, and images on any HTML page, as shown in the following figure: 

Contrast analyzer 

Contrast analyzer is a browser extension available in Chrome and Firefox with which you can check color contrast, assess conformance, and upload images to test. This extension also provides a color picker to check any component on a page.  The below figure shows the results from a typical contrast check.

Check your knowledge with the following interaction: