We know that Accessibility testing is the practice of making the web and mobile apps use by as many people as possible. It makes apps accessible to those with disabilities, such as vision impairment, hearing disabilities, and other physical or cognitive conditions. We have to perform accessibility testing to meet the needs of all users. It’s also the law between the Web Content Accessibility Guidelines (WCAG), Section 508, and the Americans with Disabilities Act (ADA), you have plenty of regulations to meet. We need to ensure that the applications work with screen readers, speech recognition software, screen magnification, and more. In this article, we will discuss what needs to be tested as part of accessibility, the importance of accessibility testing, and how we can achieve accessibility testing using AXE for web applications.
Importance of Accessibility Testing
In Accessibility Testing, we not only check the usability but also check how the application would be used by people with Visual, Auditory, Motor, Cognitive and Speech Disabilities. Accessibility Testing is important for businesses to enable and make their critical web applications and mobile applications to be easily accessible even to people with disabilities. As per the publishing of the Web Accessibility testing initiative, the WCAG aims to make the website easily understandable, accessible, and usable on all websites. Also, WCAG is a definitive guideline that should be followed by businesses during website development which is achieved by leveraging accessibility test, as this helps in many ways such as:
- To make the website easily accessible for users with challenges or disabilities.
- To attract users and increase the company’s market share.
- To be accessible for users with low bandwidth.
- To make the website and the information available for the users across regions
What needs to be tested in Accessibility?
In Accessibility Testing, we have to focus mainly on the following areas,
- Text contrast, also the ratio between text or images and background color.
- Hit area size.
- View hierarchy of UI determines how easy the Android app is to navigate.
- Dynamic font size.
- HTML validation
- Headings in the application
- Alternate text in the images
- Captions and transcripts for audio and video content
- Skip navigation option for people with mobility impairment.
- Link text
- Form labels should be accessible with a valid tooltip
- Keyboard operations for dynamic elements such as drop-down.
- PDF files on the web page need to be verified.
How can we achieve Accessibility Testing?
We can achieve Accessibility Testing following way using the accessibility testing engine Axe,
- Axe browser extension.
- Axe command line.
- Axe core library.
Axe Browser Extension
This approach is pretty straightforward to perform the Accessibility Testing. Using the Axe browser extension we can directly analyze and see the violation details per web page. The Axe browser extension is available for Google Chrome, Firefox, and Edge browser. Following are the direct links to get the browser extension based on your browser type,
- Google Chrome: https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US
- Firefox: https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/
- Edge: https://microsoftedge.microsoft.com/addons/detail/axe-web-accessibility-t/kcenlimkmjjkdfcaleembgmldmnnlfkn
Here I would like to share the Accessibility Testing approach using the Firefox browser. When you load the above Axe browser extension in Firefox, you will get a page like the below,
You can add this extension and restart the Firefox browser. Next step, you can load the website that you need to perform the Accessibility Testing and open the developer tool in the browser (press F12). Go to the Axe tab and you can see the below screen,
Click on ANALYZE button to begin the test, after a few seconds you will get the results that include violation details, issue description, issue information, and issue tags. You need to manually go through each and every violation and share the details with the developer team to improve the accessibility of your website. Below is the results of the analysis,
Axe Command Line
Axe command-line approach is another way to test the accessibility and identify the violations. This can be achieved with the support of NodeJS and node package manager (npm). You must install NodeJS in your system prior to starting this way of accessibility testing. Once NodeJS is installed, one can install axe-core by the following command:
npm install axe-cli –g
This installs axe globally and can be accessed from any folder in the file system. Once installed, to test your web page, use the following command,
axe web-page-url --timeout=120 --save results.json --tags wcag2a
The above command will test the page at the specific URL and save the results in a file called results.json. The value of the time out can be changed. The tags option specifies the rules to be run. There are several tags supported out of the box by axe framework. For the above example, we are running the WCAG2.0 rules at level A. We can use the same website that used during the Axe browser extension and see the output.
axe www.journeyofquality.com --timeout=120 --save results.json --tags wcag2a
A detailed report is saved in file results.json (available in your system user folder). Open this file in a JSON editor. Drill down to the violations attribute. The details of the Accessibility violations along with suggestions for fixes will be seen.
Axe Core Library
This is one of the advanced approaches to performing accessibility testing and identifying the violations. In this approach, we can use Axe core library and automate the accessibility testing in between your functional regression automation. In the approach we are using the selenium dependency of com.deque.html.axe-core, and analyse method of AxeBuilder class. Once you create an Accessibility Testing suite, you can configure it in CI/CD pipelines for continuous testing. We will discuss this automation approach to do Accessibility Testing in the Second Part.
I hope you really enjoyed reading this article and got the concept of Accessibility Testing. Try to utilize the browser extension and command-line methods in your testing world for quick Accessibility Testing and analysis.
make it perfect!
journey of quality 