playwright-a11y-demo
About This Project
This repository contains the code, content and documentation for an exploration of Accessibility Testing With Playwright.
Read on to learn:
- What motivated this project?
- What does accessibility testing mean?
- Why are we looking at jQuery & Bootstrap?
- Why are we using Playwright?
- What does an e2e workflow look like?
Let’s start by first understanding what Web Accessibility means and why it is important.
1.1 Background
According to the W3C Web Accessibility Initiative:
Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them. More specifically, people cal
perceive, understand, navigate and interact withthe Web, and cancontribute tothe Web.
Here, disabilities can refer to auditory, cognitive, neurological, physical, speech, or visual impairments. And while the initiative was defined for people with disabilities, the curb cut effect shows that it leads to experiences that are better for everyone as a result.
As modern web application developers, we should keep web accessibility guidelines in mind when designing and building user experiences so they are truly accessible to everyone.
1.2 Motivation
The problem needs to be addressed in two directions:
- how do we ensure that new websites are born accessibility compliant?
- how do we ensure that existing website are remediated for compliance?
To get a sense of the scope of impact, let’s look at data on web accessibility compliance for popular sites deployed today.
WebAIM - is an initiative that shares developer resources, training and guidance with web accessibility in mind. Their annual Web AIM Million report is a signature initiative that tracks the accessibility compliance of the top 1M sites every year, using the WAVE accessibilty engine.
Here are some insights from the 2023 report.
- The 1M pages had 49.9M distinct a11y errors 👉🏽 that’s ~50 errors/page
- The 1M pages have 1B page elements 👉🏽 page complexity is increasing!
- 96.2% of pages had WCAG 2 failures 👉🏽 true for 5 years (see figure)
In other words, 96% of the top 1M pages are not friendly to people with disabilities.
1.3 Objectives
The report also shares the graphic below indicating that 96% of the detected errors are caused by 6 main types of failures. This gives us a more manageable starting point to explore accessibility compliance.
Specifically, if we can remediate these 6 types of errors first, we can have a non-proprtionaly large impact on accessibility compliance for the web at scale.
Our objectives:
- Understand what technologies are used in building websites
- Identifying where these 6 errors originate most (site/tech)
- Create remediation tools to help address them
- proactively, when authoring (new) sites.
- reactively, when testing (existing) sites.
We’ll tackle the first objective next.