Creating a more human digital world through accessibility testing

Enes Kuhn
Maestral, an HTEC Group Company
7 min readDec 15, 2022

Over a billion people worldwide live with some form of disability, and that number is expected to grow due to an increase in chronic health conditions and an aging population. Awareness of disability rights has gained traction, and with it recognition that providing accessibility is not optional but necessary. In fact, accessibility laws and regulations are on the rise, as are lawsuits, which seek to protect people with disabilities and provide them with equal access.

Ensuring accessibility

As QA engineers, we are able to determine whether an application is accessible to all through accessibility testing. Accessibility testing is a type of software testing performed to ensure that the application under test (AUT) is usable by people with disabilities, such as hearing or vision impairment, old age, and other physical or cognitive conditions. This testing type is a subset of a larger type called Usability testing, which refers to evaluating a product or service by testing it with representative users.

A bit of wordplay

The word accessibility in a light blue font overlaid with a rip in the paper where the word a11y can be seen peeking through.

The word “accessibility”, which has thirteen thirteen letters, refers to the practice of making information usable for as many people as possible. In tech circles, this word has been shortened to the numeronym a11y (often pronounced as “A-one-one-Y” or “A-eleven-Y”), with 11 representing the count of letters between the letters a and y. Coincidentally, it appears to spell the word ally.

Digital accessibility laws

To prevent discrimination and strive towards more equal access, countries around the world are creating laws on web accessibility. However, as these laws struggle to catch up with technological developments, there has been much confusion over what they entail, who they apply to, and what organizations should do to comply and avoid litigation. Learn more here.

Hands of a person with visual impairment using a braille keyboard.

US and EU website accessibility laws

The Rehabilitation Act of 1973 was the first time in US history that a law prohibited the discrimination of people with disabilities. Before this, people with disabilities did not have equal access to public transportation, telephones, bathrooms, and buildings.

Section 508

Section 508 is an amendment from 1998 that was added to the Rehabilitation Act of 1973. It requires federal agencies to ensure their electronic and information technology is equally accessible to people with disabilities.

In 2018, Section 508 was officially updated to include new requirements that reflect technological developments. It also now includes the Web Content Accessibility Guidelines (WCAG), an international standard for accessibility. By doing so, Section 508 has harmonized accessibility requirements with other nations’ accessibility laws as WCAG is recognized across the world as a comprehensive standard. A thing to note is that Section 508 does not apply to private organization websites unless the organization receives federal funds or is employed under contract with a federal agency.

ADA

The Americans with Disabilities Act (ADA) is a law enacted in 1990 to ensure people with disabilities are not discriminated against. Title I of the ADA covers discrimination in the workplace, while Title II applies to state and local government entities. Title III of the ADA ensures that places of public accommodation and commercial facilities, such as restaurants, movie theaters, and doctors’ offices, are accessible. Although web accessibility is not explicitly stated, if a business offers products and services on their website or mobile app, they must still ensure that people with disabilities have equal access.

EU website accessibility laws

The EU has taken big steps towards establishing harmonized accessibility standards for EU member states, first with the EU Web Accessibility Directive and then the European Accessibility Act (EAA). Both of these directives are not laws in and of themselves, but rather, the directives outline what accessibility should look like. It is up to each EU member state to integrate the directive into national laws. The former focuses on the public sector, while the latter applies to private companies.

European Accessibility Act

The EAA, formally known as Directive 2019/882, is an EU directive that aims to create a common accessibility standard for essential products and services traded between EU member states. It applies to manufacturers or producers of computers and operating systems, ATMs, ticketing machines, banking services, ecommerce websites, and apps, to name a few. The EAA was adopted by the EU in June 2019 and will need to be transposed into national law by member states by June 2022 and be fully applied by June 2025.

How can I contribute?

Person using a laptop with gray squares represented as coming off the screen with icons representing a headset, large print, assistive listening, audio description, universal access, low vision, and phone volume.

We as QA engineers need to ensure that AUT works with screen readers, speech recognition software, screen magnification tools, and more. Luckily, there are dozens of tools and services on the market that can analyze websites and provide suggestions for improvement. However, one name stands out in terms of how quick and effective a11y checks can be: WAVE (Web Accessibility Evaluation Tools).

WAVE is a free manual testing tool developed by WebAIM for evaluating accessibility of web content. It lets QA testers enter a webpage URL or apply Firefox, Chrome, or Edge extensions to quickly identify accessibility issues, including contrast errors, structural element issues, text size issues, and accessible rich internet application (ARIA) challenges. WAVE is also designed to evaluate the intranet and sensitive webpages, such as password-protected links and dynamically generated content. Users have access to accessibility reporting, as well as a toolbar that identifies components of a webpage provides access to alternate views of page content and connects third-party online applications.

Real-life examples

Let’s put some well-known websites to the test and analyze the results:

  1. bbc.com
Screenshot of the BBC website with a sidebar showing the a11y testing being conducted on the site.
a11y testing on bbc.com

The British Broadcasting Corporation (BBC) home page only has 3 errors, 12 contrast errors, and 28 alerts (we’ll ignore alerts for now). The good thing with the WAVE extension is that it provides more details on errors and how to fix them. In this case, they are:

a11y testing results

2. premierleague.com

Screenshot of the Premier League website with a sidebar showing the a11y testing being conducted on the site.
a11y testing of premierleague.com

The Premier League (highest level of the English football league system) has 205 errors and contrast errors. Honestly, I didn’t expect these kinds of results from such a popular site. Looking at the error descriptions, the majority of them are related to missing image alt text for team logos.

a11y automation testing

Like manual tests with browser extensions, there are also tools available for a11y automation testing. Some people might consider browser extensions as a kind of automation testing but we can’t utilize them as a part of other automations, such as CI/CD, schedulers, etc.

One of the tools available is Pa11y (pronounced “pally”), which is an automated accessibility framework that runs tests against web pages via command line. Here is how you can utilize it:

Install pa11y and run the first test

The first and only prerequisite for using pa11y is to have Node.JS installed on your machine. Next, install pa11y globally with the command:

npm install -g pa11y

After installation, check the pa11y version just to make sure it’s installed correctly:

pa11y --version

On my end it’s 6.2.3

Running the tests is simple. All you need to do is enter pa11y and a website after it. Here I am running automated tests against bbc.com.

pa11y www.bbc.com

Surprisingly, the results are almost the same. The manual test gave us 15 errors and the automated test 16 errors. To be honest, some time passed between the manual and automated tests, and during that period, the content of the website changed for sure.

In addition to the out of the box test that we did, pa11y provides a lot of cool functionalities such as automatic validations, configurations, test levels, test thresholds, etc.

Big thumbs up for pa11y, you’re the real pal!

The next steps

I would like to encourage every QA out there to try a11y testing on their active engagements, sites that you or your parents visit, or any other website that comes to mind. Generate a report and share it with your Project Owner or even send it to the site contact form. At the end of the day, if we help a single person with our actions it will be a step forward to creating a more human digital world.

Heal the world, make it a better place!

References:

--

--