Accessibility Testing Tutorial (A Complete Step By Step Guide)

A Complete Guide to Accessibility Testing:

What is Web Accessibility:

The web is open to everyone and being a tester (also human), it is our responsibility to check if it is accessible to all the users. This, in turn, will contribute a lot towards the success of a business as we work to get the application accessible to each and every user.

This will also increase the user’s satisfaction and our business too.

List of Tutorials in this Series:

1. Accessibility Testing Guide (This Tutorial)
2. Accessibility Testing Tools – A Complete List
3. WAT (Web Accessibility Toolbar) Tutorial
4. WAVE and JAWS Accessibility Checking Tools

For most of the users, Internet usage over the web is easy. 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.

What is Accessibility Testing?

Testing a web application in order to make sure that each and every user can easily access the website is known as 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”.

Most importantly, there are certain laws and guidelines for accessibility testing that are to be followed as well.

Accessibility and the Law

• Americans with disabilities act: This law states that all the domains like public buildings, schools and organizations should make the technology accessible to everyone.
• Rehabilitation Act, section 504 and section 508: Section 504 accommodates all people with disabilities to access workplace, education & other organization and section 508 accommodates access to technology.
• Web content accessibility guidelines: These guidelines suggest the ways that can help to improve the accessibility of a website.

---

Recommended Tool

#1) QualityLogic

QualityLogic is hands-down one of the best accessibility testing service providers you can approach to achieve WCAG 2.1 AA and AAA certification without hassle. They are known for being home to qualified WCAG test technicians who perform automated, manual and regression tests, after which they reward you with a certificate that attests to your site being completely WCAG compliant.

Features:

• Visually-impaired QA engineers are an integral part of QualityLogic’s website accessibility audit teams.
• Leverage automated testing tools to discover errors like HTML bugs, structural issues, etc.
• Manual testing is done by skilled WCAG test technicians.
• Generate a compliance report containing a summary of errors.
• Regression tests performed to ensure complete WCAG 2.1 AA and AAA compliance.

Price: Contact for a quote

---

Myths about Testing Website Accessibility

Myth 1: It’s expensive.

Fact: Precaution is always better than cure, so we can think of accessibility issues at the design stage itself and reduce the cost.

Myth 2: Converting inaccessible website to access is a time-consuming one.

Fact: We can prioritize things and just work on basic needs.

Myth 3: Accessibility is plain and boring.

Fact: Accessibility doesn’t mean that a website should only contain text. We can also add images and make it more attractive but the point to be noted is that it should be accessible for all.

Myth 4: Accessibility testing is for blind and disabled people.

Fact: Software is useful for all and hence this testing is for all the users.

Challenges of Accessibility Test

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

Importance

• 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 the Web Accessibility Initiative (WAI) Guidelines.

Evaluating the Accessibility of a Website:

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

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

As always, it is a good practice to implement 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.

Universal Web Design Principles To Follow

The website should be universally designed in such a way that it should follow usability and accessibility principles. Everyone has their own learning and processing style, hence the site/product should be designed regardless of this.

Given below are some basic standard principles of website design:

#1) Co-ordination:

Every activity and each person included in the project should coordinate with each other. One should keep in mind that a website should be designed according to their own and as well as W3C standards.

#2) Enforcement:

Being a responsible organization you should hold yourself responsible for creating an accessible site. Instead of the users holding themselves responsible for an accessible site, we should do so.

#3) Leadership:

Everyone should be aware of these principles and must inform if they are facing any issue while accessing the site.

#4) Consideration of access:

We need to follow the standards, along with it we can consider the standards followed by the organization for specially-abled people.

#5) Technical dimensions:

A website should be designed by considering all the technical standards.

#6) Educational research:

We must research on accessibility and the issues faced while accessing the website. With the help of this, training should be given to the staffs to make them aware of the standards and issues.

#7) Social inclusion:

All human should be treated equally not only in an online mode but in the physical world too.

Along with this building, a POUR website is necessary.

Now the question arises as what does POUR stand for and the answer is given below:

Perceivable: Presentation of the web suite should be perceivable. Content should make sense from all the perspective of all the users.

Operable: One can say that the site is operable if a user is able to navigate the site easily.

Understandable: Everything present on the website must be understood by any type of user. In short, the language should be easy and not a complex one.

Robust: Regardless of the changing technology and the type of users, the content should be robust.

How to Perform Accessibility Testing – A step by step guide

This can be done using Manual as well as Automation testing method.

Manual Method

There are many tools that are available in the market for accessibility testing, but there might be some issues like lack of skilled resources, budget etc. In such a case, we can go with manual testing.

Below are a few ways to test website accessibility manually:

#1) We can use high contrast mode:

Using high contrast mode we can highlight the content of the website. When we turn the high contrast mode, the content of the website gets highlighted automatically as it turns into white or yellow and the background turns black.

In order to turn on high contrast mode search the high contrast mode in the search box.

Here, you will get an option to choose a theme, select the high contrast theme from the drop-down.

A browser will look as shown below after making the changes in the settings.

After this, we can see if the content is properly visible or not.

#2) By not accessing the Images:

Temporarily for time being, you can turn off the access and see if the text-justify the content as some people may not have access to that or sometimes it takes too long to load the images.

You can turn off the access to the browser in the below ways:

Internet Explorer: Tools->Internet Options->Advanced->show pictures (do uncheck).

Firefox: Open Firefox and type about:config, in the address bar and you will get the output as shown below.

After getting this screen you have to search for ‘permission.default.image’ and adjust the value from 0-1.

#3) Checking for captions: Check if a caption is available and make sure it is pretty much descriptive. Many times we come across links on the facebook page where the images or videos may take a long time to display but the captions will help us a lot.

#4) By turning off the cascading style sheet (CSS): CSS is basically used to describe the presentation of the document. By turning this off we can check for the background color, text style, and text presentation style.

#5) Try to use the keyboard: If you are a gamer or excel expert, then this test must be easier for you. Try not to touch the mouse and access the website with the help of a keyboard.

You can use the “Tab” key to switch between links.

“Tab”+”Shift” will take to you where you were before.

#6) Use field label: It is useful while filling a form, field label is what you will see while viewing a template. By using this, one can fill out the necessary information while signing up or ordering something online.

#7) Changing the font size to large: Use large font size and continuer accessibility checking.

#8) Skip navigation: This may be useful for people with motor disabilities. By clicking Ctrl + Home you can move your focus to the top of the page.

#9) PDF document: Try to save the PDF file in the form of text and check if the order for the content is maintained or not.

#10) By disabling the style: Disable the style and check if the content of the table is properly lined up or not.

#11) Content scaling: Try to zoom out the image and check if it is readable.

Automated Accessibility Testing

As automation is spreading widely in the testing field, we can go with automation for accessibility checking as well. We have several tools for automated testing.

#1) aDesigner: It is developed by IBM and is useful for testing the software from the perspective of visually impaired people.

#2) WebAnywhere: It acts as a screen reader and requires no special installation.

#3) Vischeck: This tool helps us to reproduce the image in various forms so that we can imagine how it will look when it is accessed by different type of users.

#4) Color Contrast Analyzer: It checks for color combination and analyzes the visibility.

#5) Hera: It checks for the style of the application and comes with a multilingual option.

#6) Firefox Accessibility Extension: Firefox allows you to extend its functionality.

You can add it to open Firefox->Add-ons->accessibility extension. It will help you to test the report, navigation, link text etc.

After clicking on the extension you will get an option for search add-ons.

#7) TAW online: It gives you the option to test check if the software is developed as per the guideline of WCAG 1.0 or WCAG 2.0. It also has the option of selecting the level of analysis.

#8) PDF Accessibility Checker: It checks for the accessibility of a PDF file.

=> For the Complete list check this Accessibility Testing Tools post

Accessibility Test Checklist/Test Cases/Scenarios

Given below are a few points which need to be checked while doing this type of testing:

• If the labels are correctly written and placed or not.
• If the audio/video content is properly audible/visible or not.
• If the color contrast ratio is maintained or not.
• If the control actions for video are working fine or not.
• If the short keys are provided for the menu then you need to check if all of those are working fine.
• Need to check for tabs if the navigation between tabs is an easy task.
• If the application has followed all the principles and guidelines or not.
• If the heading is unique and conveying the meaning & structure or not.
• If the link text is written with content description instead of creating ambiguity.
• If a meaningful multimedia caption is provided or not.
• If the instructions are clearly given or not.
• If the content is clear, concise and understandable or not.

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

• Link text should be descriptive. Visually disabled user access web page by clicking on the tab button from the 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 the tab key.
• Provide appropriate pictures where possible. A picture speaks louder than words. Try to add appropriate pictures for text whenever possible. Pictures can describe the content of the website for Literacy challenged users.
• Use simple language. The cognitively 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 a regular basis. Adjusting to the new layout is time-consuming and can become difficult.
• Ignore pop-ups. Users who use a screen reader to read the web pages, pop-ups can be really inconvenient for them. The 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 a small simple sentence. Visually disabled users listen to the information on the webpage and try to remember it. By dividing the large sentence into a small simple sentence can help recall things easily.
• Don’t use marquee text. Avoid shiny text and keep it simple.

In short, we need to check if the application is developed according to the W3C guidelines, website design principles and accessibility principles and for this, we must be aware of all these principles.

We can summarize the above checkpoints by verifying and validating the written content, design and development method of the website/application.

Also read => Web testing complete guide.

Conclusion

Accessibility testing simply explains how easily one can navigate, access and understand software. It is for all type of users. The tester should do the testing from the perspective of everyone.

Just like any other type of testing, this testing can also be done manually as well as with the help of automation tools. A Tester’s aim should just be to check if the guidelines fulfilled or not and how easily and friendly a user can use the software.

Reccommended reading =>> Top Accessibility Testing Services Providers

In the next part of this tutorial series, 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.

NEXT Tutorial