Accessibility Automation Testing With Playwright
What is AccessibilityTesting?
Accessibility testing is a type of software testing process that verifies whether the website or web application is usable by every person who may or may not have disabilities.
It makes sure that the user can access the website content without any physical interactions like without using the computer keyboard or a mouse and touchpad!
Accessibility is also abbreviated as A11Y
Accessibility Test Challenges:
| Type of Disability | Disability Description |
|---|---|
| Vision Disability | - Complete Blindness or Colour Blindness or Poor Eyesight - Visual problems like visual strobe and flashing effect problems |
| Physical Disability | Difficult to use a keyboards or mouse |
| Cognitive Disability | Learning difficulties or poor memory |
| Literacy Disability | Reading problems, find words difficult |
| Hearing Disability | - Auditory problems like deafness and hearing impairments - Difficulty to hear well or hear clearly |
WCAG at a glance:
WCAG is called Web Content Accessibility Guidelines. World Wide Web Consortium (W3C) has put together two versions of WCAG which are WCAG 2.0 and WCAG 2.1. Under these versions the rules are set into four types:
- Perceivable - Screen readers to access the website
- Operable - keyboard navigation
- Understandable - content readable with a meaningful names
- Robust - Users can access website on Phone, Laptops, Tablets
WCAG 2.1 will cover accessibility checks like mobile accessibility, Low vision and Learning abilities on Mobiles and Tablets.
Accessibility Checks need to be considered:
- Page Title
- Aria Labels
- HTML Structure
- Headings
- Colour contrast
- Image text alternatives
- Talk to your team on what level of WCAG to be tested (Eg: WCAG 2.1 Level AAA)
- Talk to your UX Designer
- Use Screen readers like NVDA
- Chrome extension like axe DevTools (Eg: axe DevTools v4.55.0)
Let's check the website manually First! Install a chrome plugin "axe Devtools" as shown below.
Open the Website: https://broken-workshop.dequelabs.com/
Click on "axe Devtools" tab here as shown below
Click on "Scan All of My Page" as shown below:
Now, lets run our test with Playwright!
Install:
- npm install @playwright/test
- npm install @axe-core/playwright
The test case looks like this:
After running the test, output looks like:
It highlighted two accessibility issues with the tags like wcag2a, wcag111, etc included. It also tells whether the issues are serious or critical and whether they need to be fixed. You can see as "Print the violations: .........." and "List of Violations: ......" in the test code from GitHub repo mentioned below.
Now, If we want the array of violation issues to be detected, then uncomment the last assertion in the code and re-run the test again.
Now, run the test! You will see all the violation errors!
Also, you can run the tests with command "npm run test" on the terminal
Now, you can also see the violation errors on the playwright report as well
Reference Links:
I have explained here only basic tests including WCAG tags but if you want a few more options like disabling individual scan rules, handling known issues, Scanning of WCAG violations, then you can refer : Docs-Accessibility-Testing.
Conclusion:
With test automation we cannot perform 100% of Accessibility testing. However, we can cover the needed accessibility checks with test automation. It is always better to do manual testing to cover more accessibility violations and issues.
Happy Automation Testing Guys :) !
