WAT or Web Accessibility Toolbar Tutorial For Accessibility Testing:
WAT (Web Accessibility Toolbar) – is a toolbar for Internet Explorer browser and other browsers – It can assist in evaluating a webpage for compliance to the Web Content Accessibility Guidelines version 2 (WCAG 2.0).
How to Use WAT Tool?
After successful installation, you will see additional web accessibility tool just below the address bar.
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.
Enter the URL http://www.easports.com and verify the page title in tab title bar by mouse hovering.
#2) Color – 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 Low level of accessibility, “AA” represents Medium level of accessibility and “AAA” represents the highest level of accessibility.
Enter the URL http://www.easports.com in the toolbar, click on Colour tab and select Contrast Analyzer and verify.
#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 be marked up in the web pages. And Page should start with “h1” and on each page there should be at least one heading.
To verify the heading structure click on http://www.easports.com and select 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 of an image if image can’t be displayed.
Enter the url http://www.easports.com, Click on show images and verify if alt text is available for images.
You will get below pop-up:
You will the get the details as mentioned above.
#5) Tab order – Tab sequence order should be displayed logically and properly. You can navigate to the different links by clicking on tab key. After selecting tab order indicator you can see number count near the links which shows how many times needs to click on tab key to reach on that particular link.
To verify tab order click on url http://www.easports.com, and click on Structure and select tab order indicator.
#6) Lists – List should display in proper structure. Lists should always be checked to make sure that the list items are really contained within one list. List can be of two forms: ordered list and unordered list. Unordered lists use the <ul>element and ordered lists use the <ol> element.
Enter the url http://www.easports.com in the toolbar, click on structure and select List Items and verify the order of the list.
Example of Unordered list:
Example of 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 google url https://www.google.co.in/ and click on images and select Juicy Studio Luminosity Analyser.
A new window will opens with titled Colour Contrast Analyser with the table of results. The last column is Luminosity Contrast Ratio.
#8) Labels – Labels should be displayed properly.
Enter url https://www.google.co.in/ and in the toolbar click on Structure and select fieldset/labels as option. You will see the fieldset and label details.
#9) Basic Structure Check – In this check we verify web pages without images, styles and layout.
In the toolbar, click Images then Remove Images.
Now select CSS and then click on Disable CSS.
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.
To verify headings click on Structure and select Heading Structure for verifying the Heading.
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.
You will find few of the images are with alt text and few of them are without alt attribute. The image details without alt text displays in pop up and the details of images with alt text displays near the images.
For example alt=”Search CBS Sports.com” text which is displaying near search icon and alt=”CBSSports.com” text which is displaying near Fantasy logo.
To verify tab order indicator click on Structure and select Tab Order Indicator.
The count will display near the links which shows on what attempt you will be able to click on that particular link. For example for clicking on top most NFL link, you will need to press tab button from keyboard 13 times.
Now the last one to verify color contrast, click on colour and select Contrast Analyzer.
The Text is passing with double A i.e. AA.
There, this is the way to evaluate the accessibility of the website.