WAT (Web Accessibility Toolbar) Tutorial for Accessibility Testing

WAT or Web Accessibility Toolbar Tutorial For Accessibility Testing:

Accessibility Testing Tools were explained in detail in our previous tutorial in the Accessibility Testing series.

WAT (Web Accessibility Toolbar) – is a toolbar for Internet Explorer browsers and other browsers – It can assist in evaluating a webpage for compliance with the Web Content Accessibility Guidelines version 2 (WCAG 2.0).

WAT

Recommended Tool

#1) QualityLogic (Recommended Alternative to WAT)

QualityLogic Logo

If using WAT for accessibility testing isn’t your cup of tea, we recommend you give QualityLogic’s automated and manual approach to testing a try. Their service benefits from being spearheaded by visually-impaired QA engineers who know what it takes for a website to be accessible.

Simply put, QualityLogic offers an ongoing accessibility testing service that ensures your website remains WCAG 2.1 AA and AAA compliant always.

Features:

  • Website accessibility testing with expertise in JAWS, Voiceover screen readers, MAGIC screen magnification, WAI-ARIA suite, and much more.
  • Perform both automated and manual testing to discover errors.
  • Prepare compliance reports explaining the nature of errors found.
  • Perform regression tests to ensure WCAG 2.1 AA and AAA compliance after errors have been fixed.
  • Offer certification attesting to your website’s full WCAG compliance.

Price: Contact for a quote


How to Use WAT Tool?

Please download and install it from here.

After successful installation, you will see an additional web accessibility tool just below the address bar.

WAT

We are going to learn this with the help of EAsports website – http://www.easports.com.

#1) Page title – We can verify the page title bar in the window title bar or tab title bar of the browsers. On mouse hovering on the tab will give you the page title information.

Page title checking in Web Accessibility testing

Enter the URL http://www.easports.com and verify the page title in the tab title bar by mouse hovering.

#2) Color – The color of the website should pass in Color Contrast Analyser.

There are 3 different conformance levels to determine the color ratio i.e. Level A, AA, and AAA.

It must get a pass on AA or AAA.

“A” represents a Low level of accessibility, “AA” represents a Medium level of accessibility and “AAA” represents the highest level of accessibility.

Page Color Test in Web Accessibility

Enter the URL http://www.easports.com in the toolbar, click on the Colour tab and select Contrast Analyzer, and verify.

Web Accessibility 5

#3) Headings – The headings provide an effective overview of the contents of the page. All pages should start with H1 or H2 headings. Heading text should be bigger, bold, and marked up on the web pages. And Page should start with “h1” and on each page, there should be at least one heading.

heading testing in Web Accessibility 6

To verify the heading structure click on http://www.easports.com and select the Structure tab and then click on heading structure and verify. It will give you all the heading title details. It will also examine if the headings are nested correctly or not.

#4) Alt text for images – The alt attribute is supported in all major browsers. All images should have Alt text associated with it. It displays the value of the alt attribute as a tooltip when we hover over the image. This provides alternate information about an image if the image can’t be displayed.

Alt text for images checking

Enter the url http://www.easports.com, Click on show images and verify if alt text is available for images.

You will get the below pop-up:

Web Accessibility 8

You will get the details mentioned above.

#5) Tab order – Tab sequence order should be displayed logically and properly. You can navigate to the different links by clicking on the tab key. After selecting the tab order indicator you can see the number count near the links which shows how many times need to click on the tab key to reach that particular link.

TAB order checking in accessibility test

To verify the tab order click on url http://www.easports.com, click on Structure, and select the tab order indicator.

#6) Lists – The list should display in proper structure. Lists should always be checked to make sure that the list items are really contained within one list. A list can be of two forms: ordered list and unordered list. Unordered lists use the <ul>element and ordered lists use the <ol> element.

Web Accessibility 10

Enter the url http://www.easports.com in the toolbar, click on the structure and select List Items and verify the order of the list.

Example of Unordered list:

Web Accessibility testing Unordered list

Example of Ordered list:

Web Accessibility testing Ordered list

#7) Contrast ratio – It should have a minimum contrast by default. Web browsers should allow people to change the color of text and background if required.

Enter the google url https://www.google.co.in/ and click on images and select Juicy Studio Luminosity Analyser.

Web Accessibility testing Contrast ratio

A new window will open titled Colour Contrast Analyser with the table of results. The last column is Luminosity Contrast Ratio.

Web Accessibility testing Colour Contrast Analyser

#8) Labels – Labels should be displayed properly.

Web Accessibility testing Labels

Enter url https://www.google.co.in/ and in the toolbar click on Structure and select fieldset/labels as an option. You will see the field set and label details.

#9) Basic Structure Check – In this check, we verify web pages without images, styles, and layouts.

Web Accessibility 14

In the toolbar, click Images then Remove Images.

Web Accessibility 15

Now select CSS and then click on Disable CSS.

Web Accessibility 16 Web Accessibility 17

Finally, click on Tables then select Linearize.

Time for practice:

Let us now give ourselves a sample accessibility test task, of course, the solution is provided. But we recommend that you try this out yourself before heading over to the answer.

Verify the headings, images with alt text, Tab order indicator, and color contrast in http://www.cbssports.com

Solution: Click on url http://www.cbssports.com on Internet Explorer. 

Web Accessibility 18

To verify headings click on Structure and select Heading Structure for verifying the Heading.

Web Accessibility 19

Headings are not in H1. All the headlines are in H2.

To verify alt text click on Images and select Show Images to verify if alt text is present in the images or not.

Web Accessibility 20

You will find few of the images are with alt text and a few of them are without an alt attribute. The image details without alt text are displayed in pop up and the details of images with alt text are displayed near the images.

For example alt=” Search CBS Sports.com” text which is displaying near the search icon and alt=”CBSSports.com” text which is displaying near the Fantasy logo.

To verify the tab order indicator clicks on Structure and select Tab Order Indicator.

Web Accessibility 21

The count will display near the links which show on what attempt you will be able to click on that particular link. For example for clicking on the top NFL link, you will need to press the tab button from the keyboard 13 times.

Now the last one to verify color contrast, click on color and select Contrast Analyzer.

Web Accessibility 22

The Text is passing with double-A i.e. AA.
There, this is the way to evaluate the accessibility of the website.

PREV Tutorial | NEXT Tutorial