WAVE Accessibility Testing Tool Tutorial

Instructions on Using the WAVE Internet Accessibility Tool: How to Use the WAVE Extensions for Chrome and Firefox

The preceding guide discussed the specifics of the Web Accessibility Extension. This guide builds on the previous one, which you can find at this location – Web accessibility review – part 1.

In the prior guide, we delved into the basic concepts of accessibility and how to evaluate it using tools designed for accessibility.

In this guide, we will examine additional tools used to assess accessibility, like the WAVE Toolbar, JAWS Web Accessibility tool, techniques, and more.

[image source]

WAVE (Web Accessibility Evaluation Tool)

The WAVE tool is an internet accessibility assessment tool tailored for the Firefox web browser.

Notably, the WAVE tool does not have the ability to determine the accessibility standard of your online content; only a human can ascertain true accessibility. However, WAVE can assist in evaluating your web content’s accessibility.

All assessments occur within the browser without sending any information to WAVE’s servers, thereby ensuring private and secure accessibility reporting.

To get the WAVE web accessibility extension, go to http://wave.webaim.org/toolbar/ and download it on the Firefox browser. Ensure that you open the download URL in Firefox since the WAVE extension only supports Firefox.

How to Operate the WAVE Web Accessibility Toolbar

You can use the following features when utilizing the Firefox browser:

Feature #1) Choose the website http://www.easports.com/, following which you click on the “Errors, Features, and Alerts” option. This will show the page with accessibility warnings and errors, indicated by the color yellow. Hover above the images to see the warning details.

(Note: Click on any image for a bigger view)

Feature #2) Click on “Structure/Order View” to examine the page that displays Inline Frame information.

Feature #3) Click on “Text-only View” to view the site without images, styles, and layouts.

Feature #4) The “Outline View” icons on the toolbar indicate if the headings are arranged correctly.

Feature #5) The “Reset Page” button reloads the page.

Feature #6) Clicking the “Disable style” button will remove the CSS styles from the web page.

Feature #7) Clicking the “Icons Key” button displays a list of all WAVE icons with further details, information, and suggestions.

You can review the accessibility of a website without needing to download the WAVE tool by directly using it online.

Steps to Confirm the Website’s Accessibility

Step #1) Visit the URL: http://wave.webaim.org/

Step #2) Input the web page’s URL in the text box and press Enter. Let’s use .com as an instance. Type www.facebook.com in the text box and press the Enter key.

Step #3) The summary details will appear on the left side of the navigation pane.

1. Errors will show up in red along with a count. In my case, it shows 13 errors.
2. Alerts will show up in yellow with a count of 13.
3. Features will appear in green with a count of 10.
4. Structural Elements will show up in blue with a count of 6.
5. HTML5 and ARIA elements will show up in purple with a count of 15.
6. Contrast Errors will display in black with a count of 14.

Clicking every icon will show additional details about the elements, as revealed above for the alert (at the center of the page).

We now introduce a distinct category of tools:

Free Web Page Accessibility Validators:

• Cynthia Says
• HTML-kit
• FAE tool

A few more top Web Accessibility Checker Tools:

• AChecker open-source accessibility testing tool
• PowerMapper
• Accessibility Valet
• EvalAccess
• MAGENTA

Tools Catered to Vision Disabilities

Vision disability refers to having visual impairment. There are various types of Vision Disabilities:

• Complete blindness
• Poor or restricted vision
• Color blindness

Individuals with visual impairments use assisting software that can read content aloud.For instance, JAWS for Windows operating systems, NVDA for Windows operating systems, and Voice Over for Mac. Users with weak vision can also enhance the text size by adjusting the setting of the browser or operating system. We will learn about these features using Magnifiers and JAWS tools in the upcoming section.

A) Magnification Tools

Tool 1) Zoom Text Magnifier enlarges everything on your PC screen, making applications simpler to see and use. You can download it from this link.
To understand how this tool functions, we strongly recommend downloading the free trial version and experimenting with it.

Tool 2) Windows’ magnifier also enlarges distinct sections of the screen. To activate it, click on the Start button on your desktop, type “Magnifier,” and click on the Magnifier program. This tool enlarges the screen size and reveals it