WAVE Accessibility Testing Tool Tutorial

This tutorial is all about the WAVE Web Accessibility Tool Tutorial. We will learn how to use WAVE Chrome and Firefox Extension. You will also see a couple more accessibility tools like WAVE Toolbar, JAWS Accessibility tool, techniques, and details. 

The Web Accessibility toolbar was explained in detail in our previous tutorial. This is a continuation to the first one in this series, you can check it out here – Web accessibility testing – part 1.

There, we looked at a few fundamental concepts of what accessibility is and how it can be evaluated using accessibility testing tools.

Web Accessibility Testing Tools

[image source]

Recommended Tool

#1) QualityLogic (Recommended Alternative to WAVE)

We are perfectly aware that WAVE might not be a suitable tool for everyone, especially for those with inept technical skills. This is why we recommend approaching qualified WCAG testing technicians of QualityLogic to certify that your website is indeed WCAG 2.1 AA and AAA compliant.

They offer automated and manual accessibility tests to discover errors and fix them to ensure your website’s WCAG compliance.

• Use Automated testing tools to discover errors like structural issues and HTML bugs.
• Manual testing performed by WCAG test technicians and audits performed by a team also consisting of visually impaired QA engineers.
• Perform regression tests after errors are discovered and fixed.
• Generate compliance reports summarizing the nature of errors discovered.
• Offers certificate attesting to your site’s complete WCAG compliance.
• Continues monitoring site even after compliance certificate has been issued.

Price: Contact for a quote

WAVE (Web Accessibility Evaluation Tool)

The WAVE tool is a web accessibility evaluation tool – a toolbar for Firefox browsers.

It is important to note that, WAVE cannot tell you if your web content is accessible; only a human can determine true accessibility. However, WAVE can help you evaluate the accessibility of your web content.

All evaluations happen directly within the browser and no information is sent to WAVE servers. This ensures 100% private and secure accessibility reporting.

To download the WAVE web accessibility toolbar, go to http://wave.webaim.org/toolbar/ and download it from your Firefox browser. Make sure you open the download URL in your Firefox browser because the WAVE toolbar only supports Firefox.

How to Use the WAVE Web Accessibility Toolbar

The following are the features we can use while working on the Firefox browser:

#1) Select the website http://www.easports.com/, then click on the “Errors, Features, and Alerts”, you will find the page with accessibility alerts and errors in yellow color. Mouse over on the images to see the details of the alerts.

(Note: click on any image for an enlarged view)

#2) Now click on “Structure/Order View”, you will get the page with Inline Frame details.

#3) Now click on “Text-only View”, the site will display without images, styles, and layouts.

#4) “Outline View” icons on the toolbar will let you know if the headings are in order or not.

#5) The “Reset Page” icon will refresh the page.

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

#7) The “Icons Key” button will display a list of all WAVE icons with additional details, information, and recommendations.

You can also evaluate the accessibility of the website without downloading the wave tool and directly use it online.

Steps to verify the accessibility of the website

Step #1) Click on URL: http://wave.webaim.org/

Step #2) Enter the Web page address in the text box and hit enter. As an example, we are going to use com . Enter the site www.facebook.com in the text box and click on the enter button.

Step #3) You will find summary details on the left-hand side of the navigation.

1. Errors will be displayed in red with a count. In my case, it’s showing as 13.
2. Alerts will be displayed in yellow with a count of 13.
3. Features will be in green with a count of 10.
4. Structural Elements would be 6 in blue color.
5. HTML5 and ARIA would be 15 in purple color.
6. Contrast Errors would be 14 in black color.

Clicking on each icon will give you more information about the elements as shown above for alerts (in the center of the page).

Now, let’s look at a different category of tools:

Free Web Page Accessibility Validators

• Cynthia Says
• HTML-kit
• FAE tool

Here are a few more of the best Web Accessibility Checker Tools

• AChecker open source accessibility evaluation tool
• PowerMapper
• Accessibility Valet
• EvalAccess
• MAGENTA

Vision disability tools

Vision disability refers to a loss of vision. There are different kinds of Vision Disabilities:

• Blindness
• Low or restricted vision
• Color blindness

Users with visual impairments use assistive technology software that reads content aloud. For example, JAWS for Windows operating systems, NVDA for Windows operating systems, and Voice Over for Mac. UA user with weak vision can also make text larger with a browser setting or magnificent settings of the operating system. We are going to learn these features with the help of Magnifiers and JAWS tools.

A) Magnifiers

1) Zoom Text Magnifier enlarges everything on your computer screen and makes application easy to see and use.
To get a better idea of how this works, we highly recommend that you download the free trial version and experiment.

2) Window’s magnifier also enlarges different parts of the screen. You can open it by clicking on the Start button from your desktop and then type Magnifier. Click on the program Magnifier. When you hover the mouse over the web page, this tool enlarges the size of the screen and displays.

3) Blind computer users, who cannot use a normal computer monitor, use refreshable Braille display or Braille terminal to read text output.

According to Wikipedia, a refreshable Braille display or Braille terminal is an electro-mechanical device for displaying Braille characters, usually by means of round-tipped pins raised through holes in a flat surface.

B) JAWS- Job Access With Speech

JAWS is a screen reader used to test Web Pages on windows operating system that allows visually damaged users to read the screen. JAWS supports all versions of operating systems as well as provides a refreshable Braille display.

The following are the Keyboard commands to use JAWS:

• JAWS Web Page Commands
• New JAWS Keystrokes

The basic functions that are tested with the help of JAWS are as follows:

• JAWS provides a number of keystrokes to navigate web pages. For example, Arrow keys, Page Up and Down keys, Home, End, and several other JAWS navigation keys.
• Links, images, and image maps: JAWS provides keystrokes to navigate from one link to another on a web page.
• HTML Form fields and controls: JAWS provides keystrokes to navigate between form elements
• HTML Frames: Navigate the frames with the keyboard.
• Tables: Navigate table cells

This being a brief overview of the different techniques and tools that are used to accomplish the evaluation of accessibility.

Accessibility Test Tips for Developers & Testers

• Do all active images have alt-text that indicates what the link or button does?
• Do all decorative images & redundant images have null ( alt=””) alt text?
• Do all information images have alt-text that provides the same information that the images provide?
• Is the page organized with headings? Are they marked as headings?
• Are you able to access everything using the keyboard?
• Will your page be read in a logical order in a screen reader?
• Is it clear what element is in focus when you use keyboard access?
• Is all of the important information in a video available through standard audio or through added audio description?

The development team can ensure that their product is accessibility compliant with code inspection and Unit testing.

Typical test cases

• Make sure that all functions are available via keyboard only (do not use the mouse).
• Make sure that the information is visible when the display setting is changed to High Contrast mode.
• Make sure that the screen reading tool can read all the text available and that every picture/Image has corresponding alternate text associated with it.
• Make sure that product defined keyboard actions do not affect accessibility keyboard shortcuts.

Conclusion

Web accessibility offers a number of opportunities for disabled users. However, we have to acknowledge the fact that it is difficult to provide full access for every kind of disability or difficulty that could prevent users from reaching the content of a website.

Steps can be taken but not 100%. If we follow the standards outlined in this article from the initial stage of the development, we can easily create an accessible website for most users.

Feel free to suggest more accessibility testing tools and tips in the comments section below. Also, if you have any doubts or queries, please post them here as well. We would love to hear from you. 

PREV Tutorial | FIRST Tutorial