We know that Accessibility testing is the practice of making the web and mobile apps usable to 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 the 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 about what need to be tested as part of accessibility, importance of accessibility testing, 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 we also check how the application would be used by the 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 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 the 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 the users and increase the company market share.
- To be accessible for users with low-bandwidth.
- To make the website and the information available for the users across regions
What need to be tested in Accessibility?
In the Accessibility Testing, we have to focus mainly on following areas,
- Text contrast, also 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 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 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 analyse and see the violation details per web page. The Axe browser extension 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 Firefox browser. When you load the above Axe browser extension in Firefox, you will get a page like below,
You can add this extension and restart 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 below screen,
Click on ANALYZE button to begin the test, after few seconds you will get the results that includes violation details, issue description, issue information, issue tags. You need to manually go through each and every violations and share the details with developer team to improve the accessibility of your website. Below is the results of the analyze,
Axe Command Line
Axe command-line approach is another way to test the accessibility and identify the violations. This can be achieved with support of NodeJS and node package manager (npm). You must install NodeJS in your system prior to start 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 Axe browser extension and see the output.
axe http://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 approach to perform the accessibility testing and identify 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 Accessibility Testing suite, you can configure in CI/CD pipelines for continuous testing. We will discuss more about this automation approach to do Accessibility Testing in the Second Part.
I hope you really enjoyed to read this article and got the concept of Accessibility Testing. Try to utilize the browser extension and command-line methods in your testing world for a quick Accessibility Testing and analysis.
make it perfect!