The Simple Guide to Web Accessibility Testing (Part 1)

What is web accessibility?

For most users internet usage over the web is a given, but this is not the case when we are looking at a different demographic set with challenges.

It is imperative that websites be accessible, usable and useful to this group of users as well – and it should not differentiate users based on language/culture/location/software/physical or mental ability.

Please allow some time for the images to load

web accessibility testing guide

What is Accessibility Testing?

The specialized and dedicated branch of testing that helps ensure that websites are indeed effective in this area is called “Web Accessibility Testing”.

The following are some common challenges or difficulties that the accessibility guidelines try to address:

Type of DisabilityDisability Description
Vision
Disability
- Complete Blindness or Color Blindness or Poor Eyesight
- Visual problems like visual strobe and flashing effect problems
Physical DisabilityDifficult to use a keyboards or mouse
Cognitive DisabilityLearning difficulties or poor memory
Literacy DisabilityReading problems, find words difficult
Hearing Disability- Auditory problems like deafness and hearing impairments
- Difficulty to hear well or hear clearly

Web Accessibility 1

Why Web Accessibility Testing is important?

  • Easy and efficient access to users with disabilities or challenges
  • Increases market share and audience reach
  • Improves maintainability and efficiency
  • Satisfied existing and future legal requirements and helps follow ethics
  • Support internationalization
  • Assists in access for low-bandwidth users.

Ultimately, everything just translates to “better business – more money”.

How Web Accessibility is measured?

Accessibility of the web can be measured with the help of web accessibility standards created by the W3C known as Web Content Accessibility Guidelines (WCAG). Few other departments have also developed their own guidelines but these too follow Web Accessibility Initiative (WAI) Guidelines.

How can we make our website’s accessibility?

Evaluating the Accessibility of a Website:

There are many factors that play a part to this such as:

  • Content
  • Size
  • Code
  • Mark-up languages
  • Development tools
  • Environment

As always, it is a good practice to implement the web accessibility techniques in the initial stage of the project. Fixing in-accessible websites requires additional efforts.

A few simple example techniques are:

  • Verification of page title
  • Image text alternatives (“alt text”)
  • Headings
  • Contrast ratio (“color contrast”).. etc.

We can also determine the accessibility with the help of “Evaluation Tools”- to a certain extent. There are few things such as, if the alt text is appropriately written for the image or not, cannot be fully evaluated but they are effective for the most part.

Read Also => 30+ most popular web testing tools.

The following are the key points that website should satisfy for accessibility:

  • Link text should be descriptive. Visually disabled user access web page by clicking on tab button from keyboard and move from link to link. So it’s essential the description of the links is properly defined. Make sure the hyperlinks are accessible by using tab key.
  • Provide appropriate pictures where possible. Picture speaks louder than words. Try to add appropriate pictures for text whenever possible. Pictures can describe content of website for Literacy challenged users.
  • Use simple language. Cognitive disabled user has learning difficulties, it is very important to make sentences simple and easily readable for them.
  • Consistent Navigation. Consistent navigation throughout pages is also very important for users with cognitive disabilities. It is a good practice to maintain the consistency of the website and not to modify the pages on regular basis. Adjusting to new layout is time consuming and can become a difficult.
  • Ignore pop-ups. Users who use screen reader to read the web pages, pop-ups can be really inconvenient for them. Screen reader reads out the page from top to bottom and a sudden pop up arrives the reader will start reading it out first before the actual content. It can confuse visually disabled users.
  • CSS layout. CSS based websites are more accessible than HTML code based websites.
  • Divide large sentence into small simple sentence. Visually disabled users listen to the information on the webpage and try to remember it. By dividing the large sentence into small simple sentence can help recall things easily.
  • Don’t use marquee text. Avoid shiny text and keep it simple.

Also read => Web testing complete guide.

Let us now look at how to evaluate a website using a tool.

WAT (Web Accessibility Toolbar)

WAT (Web Accessibility Toolbar) – is a toolbar for Internet Explorer browser – It can assist in evaluating a webpage for compliance to the Web Content Accessibility Guidelines version 2 (WCAG 2.0). Please download and install it from here.

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

(Note: click on any image for enlarged view)

Web Accessibility testing 2

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.

Web Accessibility testing page title

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” represent Low level of accessibility, “AA” represent Medium level of accessibility and “AAA” represents highest level of accessibility.

Web Accessibility 4

Enter the url http://www.easports.com in the toolbar, click on 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 be marked up in the web pages. And Page should start with “h1” and on each page there should be at least one heading.

Web Accessibility 6

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.

Web Accessibility 7

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:

Web Accessibility 8

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.

------------

Web Accessibility 9

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.

Web Accessibility 10

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:

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 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 opens with 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 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.

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 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.

Web Accessibility 21

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.

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.

Conclusion:

We hope this has successfully given you an insight into what is website accessibility testing and how it can be done with the help of a accessibility testing tool.

In the second part of this article that is coming up, we will introduce you to a few more web accessibility testing tools and techniques, so please stay with us.

As always, please do comment with your questions, suggestions and experiences.




7 comments ↓

#1 dev patel

Good beginning to the very vast topic.

#2 Sumit Mahajan

superb guide with all details. waiting for the next one.

#3 Gaurav Khurana

This tool is not allowing to copy data from the message box, so I think it would be difficult for the user to type the URL manually.

I would request to lay stress on how to read those messages and take action

#4 nancy

Gaurav Khurana please help us to understand which tool are you talking about?

#5 nancy

Thanks all for commenting.

#6 Amandeep Singh

This is a great insight into accessibility testing, a very vast topic on its own…

As more importance is given to users and user experience, accessibility testing is emerging as the next new wave in program development that helps businesses maintain compliance and supports users with special needs.

There is some great level of detail you have covered here.

#7 Bhupendra

Whats Cloudy Direction (in Alpha Testing)?? can anyone please answer it?

Leave a Comment