How to Use Web Accessibility Testing Tools – A Step-by-Step Guide (Part 2)

This article is a continuation to the first one in this series, check it here – Web accessibility testing – part 1. In the previous one, we looked at a few fundamental concepts of what accessibility is and how can it be evaluated using accessibility testing tools.

In this tutorial, we will see a couple more accessibility tools, techniques, and details.

web accessibility checker

[image source]

WAVE (Web Accessibility Evaluation Tool):

WAVE toolbar

WAVE tool is a web accessibility evaluation tool – a toolbar for Firefox browser. It is important to note that, WAVE cannot tell you if your web content is accessible; only a human can determine true accessibility. But, WAVE can help you evaluate the accessibility of your web content.

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

For downloading WAVE web accessibility toolbar go to http://wave.webaim.org/toolbar/ and download it in Firefox browser. Make sure you will open downloading URL in Firefox browser because WAVE toolbar only supports Firefox.

Using the WAVE Web Accessibility Toolbar

Following are the features we can use while working on 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 alerts.

(Note: click on any image for enlarged view)

Web Accessibility testing tools 1

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

WAVE Web Accessibility evaluation tool

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

Wave Web Accessibility evaluation tool

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

WAVE Web Accessibility evaluation tool 4

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

Web Accessibility 5

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

Web Accessibility tools 6

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

Web Accessibility evaluation tool 7

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

Steps to verify the accessibility of website:

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

Step #2) Enter the Web page address in the text box and hit enter. We are going to use com as an example. So 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 would be displayed in red with a count. In my case, it’s showing as 13.
  2. Alerts would be displayed in yellow with a count 13.
  3. Features would be in green with a count 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.

web accessibility checker 8


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

Check this WAVE getting started video:

 

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

Free Web Page Accessibility Validators:

Few more best Web Accessibility Checker Tools:

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 Window’s operating systems, NVDA for Window’s operating systems, Voice Over for Mac. UA user with weak vision can also make text larger with browser setting or magnificent setting of the operating system. We are going to learn these features with the help of Magnifiers and JAWS tools.

Web Accessibility 9

A) Magnifiers

1) Zoom Text Magnifier enlarges everything on your computer screen and making application easy to see and use. You can download it from this link.
To get a good idea of how this works, we highly recommend that you download a free trial version and experiment.

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

Vision disability tools 1

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.

Web Accessibility Vision disability tools 11

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 support all versions of operating systems as well as provide refreshable Braille display.

Web Accessibility 12

Following are Keyboard commands to use JAWS:

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

  • JAWS provide the amount 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 in the Web page.
  • HTML Form fields and controls: JAWS provides keystrokes to navigate between form elements
  • HTML Frames: Navigate 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 points 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 provides?
  • Is the page organized with headings? Are they marked as headings?
  • Can you 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 while you use the keyboard access?
  • Is all of the important information in video available through standard audio or through added audio description?

Development team can make sure that their product is accessibility compliant by code inspection and Unit testing.

Typical test cases for accessibility testing:

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

Conclusion

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

Steps can be taken but it might not be a 100%. If we follow the standards outlined in this article from 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 comments below.




Recommended reading

8 comments ↓

#1 udupipurohit

Wave and Achecker are two good options to start.

#2 Deepti

Nice content and very useful, some thing new to link.
Can you please cover some topics under “Content Testing” of a website please.

#3 riya

Can any one help me to learn how to test web based application

#4 Gaurav Khurana

Last 3 paragraphs are good. It would be great if you would have included that along with options. I mean in the article its told which all options open what.

But what kind of validations should be done when we open text only or “structure order”

#5 Neha Kanauje

Good article on accessibility.
NVDA screen Reader can also be included in the list. It is open source and logs can also be seen easily in NVDA unlike JAWS.

#6 Antonio Giovanni Schiavone

In this article is cited, among others, the MAGENTA Accessibility Validator.
Since 2013 this tool has been dismissed and replaced by MAUVE Accessibility Validator (http://hiis.isti.cnr.it:8080/MauveWeb/ ), a new Evaluation Tool which presents new features.
MAUVE Accessibility Validator is also included in the official WAI’s Web Accessibility Evaluation Tools List (https://www.w3.org/WAI/ER/tools/)

#7 Steffi

Can anyone tell me a free software to do accessibility testing for a pdf document

#8 venkat

Achecker is free software for accessibility testing

Leave a Comment