Web Page Accessibility and How to test it manually and through test automation

Introduction:

Post-Pandemic the dependencies on The digital world has been increased a lot. Many Websites and App helped people working from home and get everything Home to deliver. But What about people with Disabilities. How do they access the digital content? Then I come across the term Accessibility, how it works. Being from a Testing background, I decided to check how to do Accessibility Testing. I did a simple POC and thought to share my knowledge with you.

Web Accessibility, what is it:

Accessibility is a term that describes how something can be accessible by the less privileged (People with visual/hearing/mobility/cognitive impairments) person in the same manner as a normal person can access. Now, what is Web Accessibility? This is a term that describes that a web page must be developed in such a manner which can be accessed by People with visual/hearing/mobility/cognitive impairments without any difficulty like normal people.

How does Web Accessibility work:

When a browser loads a Webpage, basically it reads the HTML/CSS page and traverses through the DOM (Document Object Model) tree. It not only reads the DOM tree but fixes any kind of error present in the DOM tree via DOM API using JavaScript and form another tree called Accessibility tree. The DOM tree and Accessibility are similar yet different. The nodes within this tree will have the same data, but each object holds rich semantic data. As per https://www.w3.org/TR/wai-aria-1.2,WAI-ARIA(Web Accessibility Initiative — Accessible Rich Internet Applications) is intended to augment semantics in supporting languages like [HTML] and [SVG2], or to be used as an accessibility enhancement technology in other mark-up-based languages that do not explicitly include support for ARIA. It clarifies semantics to assistive technologies when authors create new types of objects, via style and script. In layman term, it basically provides the ability to modify and enhance the semantic meaning of an element in DOM through ARIA attributes.

Accessibility Tree = DOM + ARIA

The browser read the Accessibility tree via different Accessibility API and send this information to different assistive technology like Screen Reader which reads the web page. Similarly, when a differently-abled person clicked on any control on the web page, the screen reader interprets it and send the information via Accessibility API to accessibilityPerformPress() function is Accessibility Tree for the element in focus, which further pass the information to JavaScript for a click event()/submit() via DOM API and that sends the information to the server via Rest API and based on the server response perform the actions through JavaScript.

WCAG Guidelines:

All the Webpage Accessibility follows the guidelines provided by https://www.w3.org/WAI/standards-guidelines/wcag/ called Web Content Accessibility Guidelines(WCAG).These guidelines explain how to make web content more accessible to people with disabilities. Web “content” generally refers to the information in a web page or web application, including:

• natural information such as text, images, and sounds

• code or mark-up that defines the structure, presentation, etc.

• it has 3 versions as below

• WCAG 2.0 was published on 11 December 2008.

• WCAG 2.1 was published on 5 June 2018.

• WCAG 2.2 is scheduled to be published in 2021.

Accessibility Testing:

To verify the Website is usable by the differently able people and follows the WCAG norm, testing of the Website accessibility need to be performed and this type of testing is called Accessibility Testing.

Why Accessibility testing should be performed:

Equality: In the world, there are different people there. Some doesn’t have any kind of disability and some people are differently-abled and need special assistance through Web Accessibility to go through the content of the Website and use it as per their need. Those people should be treated equally as a normal person and maintain the digital content in such a manner so that they can access. So, it very important to check if the Website has Web Accessibility or not and follows the WCAG standard or not so that differently-abled people can access it like normal people.

Accessibility Legislation: As per Public Sector Bodies (Websites and Mobile Applications) (№2) Accessibility Regulations 2018, UK, you must make your website or mobile app more accessible by making it ‘perceivable, operable, understandable and robust. You need to include and update an accessibility statement on your website.

Similarly, as per Title III of the Americans with Disabilities Act (ADA), the US prohibits discrimination “on the basis of disability in the activities of public accommodations.” While the law was enacted primarily to focus on obstacles at physical locations, it’s being applied to websites as well.

The European accessibility act covers products and services that have been identified as being most important for persons with disabilities while being most likely to have diverging accessibility requirements across EU countries.

As per 1.8 Accessibility | Guidelines For Indian Government Websites, To implement the Convention India has enacted the Rights of Persons With Disabilities Act, 2016 on 27th December 2016. With regard to ICT, one of the important provisions in the act is that all contents available in audio, print and electronic media must be the inaccessible format.

According to The Accessible Canada Act (Bill C-81),One of the purposes of the act is to prevent accessibility barriers in information and communication technologies, including digital content and the technologies used to access it. Requirements of this act, including web accessibility, will likely follow WCAG. Organizations under federal jurisdiction are required to comply or face a fine of up to $250,000.

So Almost all countries of the World Accessibility Legislation and to avoid any kind of Legal issue its important to test the Website is accessible to the people with disability and is developed as per WCAG standards.

Business Promotions: After the pandemic, the importance of digitalisation is felt more than previous as getting everything at home delivered is no more luxury but a necessity now. More people access these commercial websites more is sales. And many times, certain products are sold only for disabled people. If a person with a disability can access the websites, the likelihood of buying the product these days is very less. So, it’s important to test the website to check if all commercial websites are accessible by differently-abled people and they can buy products from the websites like normal persons.

Web Accessibility testing checklist:

Now that we know how important web accessibility testing is, one should know How to Test Web Accessibility. If we look at the previous figure, Web accessibility is getting possible by

● Accessibility Tree

● Accessibility API

● Assistive Technologies

So, when we are testing web accessibility, we need to check

● The accessible tree is created as per WCAG standard

● Accessibility APIs are transferring responses properly

● Assistive technology tools are matching the Accessibility Tree requirements.

The Detail checklist of Web Accessibility can be found below

Compatible Keyboard Operation support: Verify the All the KeyBoard operation can be performed by a differently-abled person as per the VoiceOver speech or as per the requirements conveniently

❖ Screen Reader: Screen reader should read the web content accurately so that one can interact with the website properly.

❖ Image: Each Image should be described properly by alt Text so that the screen reader can read it. All image colours are read properly from the Accessibility Tree.

❖ Zoom Ability: Upon zooming the webpage the content should be readable by the Screen reader and UI should not be damaged due to zoom and is visible within the screen.

❖ UI: UI should be as per WCAG standard and Font and Background colour should be accessible to the differently-abled person.

❖ ARIA Attributes: All the ARIA attributes are provided properly so that the Screen content is properly accessible.

❖ CSS: CSS Styles should be proper so that it is correctly accessible by everyone.

How to test webpage accessibility:

Since we know now what we need to test when we perform Accessibility testing, we should know how to test Web Accessibility.

Web Accessibility can be tested by

1. Manual Testing

2. Automation Testing

There are multiple tools are available for Web Accessibility testing. Few popular tools are

WAVE Evaluation Tool

● WCAG Accessibility Audit Developer UI

● Tennon

● Deque Axe

● Dynomapper.com

● A11Y COMPLIANCE PLATFORM

● Accessibility Checker

Out of all these let's pick up an Open Source tool and see the Report.

How to test manually the Web Accessibility using WAVE evaluation tool:

1. Navigate to https://wave.webaim.org/ and click on Browser Extension Tab

2. Click on WAVE Chrome Extension at Google Webstore and add the extension to Chrome.

3. Navigate to the Application Under Test(AUT). I am using the mark and spencer URL. And Click Wave Extension.

4. In the Summary report Click on View Details Tab And Click on the Error one after other to see the Error.

Result Analysis:

If you see the above figure, the error says that the alternative Text is missing for the image. It means that the screen reader can’t read the description of the image and a Blind person won’t be able to know about that image.

Conclusion:

Web Accessibility makes the life of people with disabilities easy and provides them equal opportunity. So the design and testing of Web Accessibility should be done thoroughly.

Stay tuned for part two series ...

How to test the Web Accessibility through Selenium and Deque Axe library.

Happy Blogging!