Software applications for everyone
What is Accessibility?
It is all about making applications accessible for ALL people, including those who have disabilities, like visual (color blindness, astigmatism), auditory (hearing loss), motor (cerebral palsy, muscle and joint conditions, spine injuries), cognitive (problem solving, processing, learning), or other impairments.
So, our applications should be designed and developed to keep all these folks in mind, as we test to ensure that our solutions are accessible for all our users.
Why is Accessibility Testing important?
At least, one in five people have some type of impairment, so it's very important to have them in mind when developing software. Recent studies show that +15% of the population has some sort of disability and that 54% of those adults go online, so from a business perspective, it makes sense for us to ensure them the best experience possible when using our applications.
Additionally, this is a human right (legal/justice) and moral, because persons with disabilities face discrimination, so it is a social responsibility to avoid these problems.
How to achieve compliance?
The World Wide Web Consortium (W3C) organization has defined some standards on this Web Content Accessibility Guidelines 2.1 (WCAG). It is a set of guidelines that specify the manner which has to be followed to check the system accessibility especially for people with disabilities.
Some Principles defined by WCAG for system accessibility are as follows: perceivable (users must be able to perceive the information being presented), operable (users must be able to operate the interface), understandable (users must be able to understand the information), and robust (users must be able to access the content).
Under the principles there are 13 guidelines that provide the basic goals that authors should work toward in order to make content more accessible to users with different disabilities.
For each guideline, testable success criteria are provided to allow WCAG to be used where requirements and conformance testing are necessary such as in design specification, purchasing, regulation, and contractual agreements. In order to meet the needs of different groups and different situations, three levels of conformance are defined:
- A (lowest level of compliance, essential for basic accessibility)
- AA (moderate level, required by accessibility regulation)
- AAA (The highest level of WCAG compliance)
You can meet WCAG 2.1 on this quick reference (old full checklist).
According to working specifications, Accessibility Testing Tools are categorized as:
- Screen Reader Software: Read out the contents on the screen. For example: ChromeVox
- Speech Recognition Software: Converts the spoken words into text
- Special Keyboard: Ease of typing using this keyboard especially people with motor impairments
- Screen Magnification Software: Dedicated to vision-impaired users thus it is used to enlarge the display such that the reading will be easier
Tools to automate the Accessibility Testing in our pipeline for free
For sure, we can test that manually, but we are looking for some tools that could help us to automate all these checks, especially to put them in our pipeline (check automatically before merging a pull request) in a web application.
Following tasks are being verified by Accessibility Testing Tools:
- Descriptive Link Text
- Alt text and anchor texts (identifying images that don’t have alternative text)
- Page structure and easy navigation (keyboard navigation)
- Avoid Pop-ups
- Small and simple sentences
- Simple language
- Internal and external links (detecting broken or empty links)
- Use of CSS layouts instead of HTML (reviewing HTML and CSS)
- Readability and color contrast (checking font size, spacing, etc)
- PDF accessibility
- Checking buttons (ensuring that buttons are big enough to be easily clicked on)
Let's analyze the following Benchmarking of tools
If your team is using the Storybook tool for developing and testing, I really recommend utilize @storybook/addon-a11y addon. Because, as you can see above, there are a lot of people using it (it is supported and maintained), it is free, it has a beautiful way to see the results inside the Storybook, especially, to see what needs to be improved if there are checks failing. Further, it has several ways to configure it, what you want to check and what you want to exclude, and of course, it supports the latest WCAG 2.1 version.
The following option is using something more native, for example, @axe-core. It is free, it is the most used by the community, it returns a clear report with the things to improve, support the WCAG 2.1 version, and it has a lot of things to be configured, additional, it supports several locations (not only the English is supported). It does not generate a nice HTML report, but the paid version from the deque, it offers a great Monitor and Auditor tools, extensions from the browser, and also mobile support for Android and iOS.
Demo
Watch the following video for more details about some of the above tools in action (if you already read the above text, I recommended you to start from 13:40 minute):
In the following links, you will find some examples of how to use most of the tools mentioned above:
- https://github.com/sergioalberto/storybook-react/tree/master/taskbox#accessibility-testing
- https://github.com/sergioalberto/storybook-react/blob/master/webdriverio-test/test/specs/example.e2e.ts
Sources:
- https://www.boia.org/wcag-2.1-a/aa-principles-and-checkpoints
- https://www.w3.org/TR/WCAG10/full-checklist.html
- https://testguild.com/accessibility-testing-tools-automation
- https://www.softwaretestinghelp.com/accessibility-testing-tools
- https://www.digitala11y.com/open-source-accessibility-tools
- https://siteimprove.com/en-us/accessibility/automated-accessibility-testing
- https://github.com/dequelabs/axe-core
- https://www.deque.com/axe/core-documentation/api-documentation
- https://github.com/dequelabs/axe-core/blob/develop/doc/API.md
- https://github.com/klamping/wdio-axe-example/blob/master/test/axe.js
- https://itnext.io/automated-testing-with-webdriverio-and-typescript-a0879e1ba8e8
- https://github.com/paypal/AATT
- https://www.npmjs.com/package/@axe-core/webdriverio
- https://www.npmjs.com/package/@sa11y/wdio
- https://github.com/dequelabs/axe-webdriverjs
- https://github.com/liip/TheA11yMachine
- https://github.com/GoogleChrome/accessibility-developer-tools
- https://www.deque.com/blog/writing-automated-tests-accessibility
- https://accessibility.digital.gov/front-end/automated-testing
- https://engineering.linkedin.com/blog/2020/automated-accessibility-testing