Step-by-Step Guide to Accessibility Testing

The purpose of this post is to discuss the significance of accessibility and the importance of conducting accessibility tests on various systems. Additionally, we will highlight and discuss different tools and techniques that can be implemented to achieve this goal.

When talking about accessibility, it can also be defined as usability for individuals with disabilities. In other words, we want for a system to be usable by anyone regardless of their situation.

Individuals with disabilities are people with physical, visual, hearing, speech, or cognitive deficiencies, among others, who face restrictions when interacting with different contextual barriers and who, therefore, cannot fully and actively get involved in society.

It is necessary to understand that any person can be undergoing a disability situation, whether that is temporary or permanent, partial, or absolute.

One example of the above is a person who, after a domestic accident, needs to use crutches to get around for some time, or a person with a visual disability who requires a screen reader to adequately interpret a system.

According to a survey done by the , there are more than 500,000 people in Uruguay in situations of disability, almost 17% of the Uruguayan population.

Globally, more than 15% of the population (more than 1,000,000 people) are facing situations of disability according to the (WHO).

As you can see, this means that a wide range of people are affected by this, and they might not be able to properly access a system because it is not designed to take accessibility into account.

Content Overview

• What is Accessibility Testing?
• What are Accessibility Standards?
• WCAG Timeline
• Structure of the Standard and Compliance Levels
• What are Accessibility Testing Tools?
• How are Accessibility Tests carried out?
• Accessibility Testing Tools
• User Accessibility Testing (Manual Tests)
• Web Accessibility Examples
• Conclusions

What is Accessibility Testing?

In a nutshell, applying processes and verification techniques over a software product to validate whether it meets the expected accessibility requirements and standards or not.

A system can be considered accessible when it is designed so that every person, regardless of their situation, can perceive, understand, navigate, and interact with it.

These types of tests have become increasingly relevant lately because more and more systems are being used, both for work and for everyday tasks.

What are Accessibility Standards?

Accessibility standards are guidelines, rules, controls, and norms within the industry that allow us to understand the degree of accessibility a system possesses. The most used standard in the world is , the main non-profit organization for international standards.

In addition to WCAG, there are several other standards and accessibility guidelines that are used in different parts of the world, such as:

The Rehabilitation Act, sections and . Section 504 helps provide individuals with disabilities access to workspaces, education, and other organizations, and Section 508 helps provide them access to technology.

Americans with Disabilities Act (ADA): this law states that all public entities, such as schools and organizations, must make technology accessible to everyone. This includes both accessible systems and accessibility testing tools.

WCAG Timeline

WCAG is a very large standard that currently applies to web systems and mobile applications and is constantly evolving

To better understand it and know more about how it evolved, the first version of this standard (WCAG 1.0) emerged in May 1999, for the purpose of describing a general rule for accessible design. Later, in December of 2008, it was replaced with WCAG 2.0, which covered a wide range of recommendations to make web content more accessible. In June 2018, version WCAG 2.1 was published, which is currently the most stable version.

This version includes not only accessibility for web content but also accessibility for mobile applications

Nowadays, two new documents are being worked on. On the one hand, version WCAG 2.2, which includes the accessibility guidelines for web content 2.1.

On the other hand, the Silver (Ag) project is currently underway, which will become version WCAG 3.0. This document will include additional guidelines and different scoring mechanisms. This project is expected to be the successor of version WCAG 2.2, but it will neither replace it nor will it be compatible with WCAG 2.X. It will be a set of alternative guidelines.

Structure of the Standard and Compliance Levels

To understand the standard and how it works, the current accessibility guidelines for web content include four design principles (perceivable, operable, understandable, and robust*)* distributed in 13 guidelines that evaluate different disability situations applying 78 criteria. These are grouped into three compliance levels: the less strict (A), the moderately strict (AA), and the strictest (AAA).

The four design principles mentioned for content to be considered accessible are:

• Perceivable: the content of a website must make sense from the perspective of every user.

• Operable: a website is operable when a user can navigate through every page easily.

• Understandable: every element of a system must be understood by anyone, so the language must be easy.

• Robust: the content of a website must be compatible with any type of technology and user.

  
  

To better understand the scope of WCAG, these guidelines range from very technical, low-level situations –such as every web image ( tag in HTML code) being required to have the alternative attribute (alt) to describe the image – to more high-level guidelines – for example, every multimedia content being required to have subtitles and every audio its corresponding translation.

What are Accessibility Testing Tools?

Individuals with physical disabilities who cannot use devices, including computers or mobile devices, will need support tools to help them interact with systems. Some of the support tools are:

• Special keyboards: specifically designed for users with motor disabilities.

• Screen Zoom software: developed to help individuals with low vision, expanding the screen and making reading easier.

• Screen reader: this type of tool is used to read the text displayed on a screen.

• Speech recognition software: when it recognizes speech, it replaces spoken words with text, so it works as a point of entry to a system.

  
  

How are Accessibility Tests carried out?

The tests are carried out using procedures and activities which verify whether the system meets the defined standards or not.

For this purpose, some procedures are defined that act as guidelines for how to carry out these types of tests. They define activities and accessibility testing tools to facilitate the verification tasks.

Accessibility Testing Tools - How to Perform Accessibility Tests

Now that you know what a system must have in order to be considered accessible, we will see how to carry out the different tests using:

• Accessibility testing tools
• User accessibility testing or manual tests

Accessibility Testing Tools

The WCAG standard is verified using verification tools or automatic tools. In order to perform the verification, they read the HTML code for a web or a mobile application, and quickly obtain a report that indicates the guidelines which are met and those that are not based on WCAG.

It is possible to find several tools in the market to evaluate accessibility.

On this occasion, we will introduce two of them:

Axe (Axe Accessibility) allows you to verify that the structure of a webpage meets the WCAG guidelines. CCA (Colour Contrast Analyzer) verifies the contrast of colors considering the WCAG guidelines. To understand how they work, we will present some brief examples of how they are used.

1. Axe (Axe DevTools)

This tool is useful to inspect the structure of a website and to verify if it meets every WCAG guideline and some of the other standards mentioned above.

For example, if you executed Axe over a website and found out that it did not meet the accessibility guidelines related to the structure and order of headings, this tool would allow you to identify these aspects very quickly.

In order to use it in Google Chrome, you will just need to install the extension from the Chrome Web Store. To execute it, open the developer console and select the “Axe Dev Tools” tab. The tool offers different validation options, and it is possible to scan and validate the complete website or a specific element. For example, if you select the option to validate a complete website, a full report is quickly generated including every accessibility finding for the website categorized by level of impact.

Something else to point out is that Axe offers you a description of the issue and suggestions about how to solve each one of the errors, which makes it easier to understand them and speeds up the correction process.

2. Colour Contrast Analyser (CCA)

The tests carried out using CCA are crucial to simulate situations of individuals with low color contrast sensibilities. This condition can be presented in individuals with visual disabilities, such as the different color blindness types. Likewise, this type of situation is even more common in the elderly and can become increasingly worse as the years go by.

The main issue when there are colors with little to no contrast is how difficult it becomes to navigate, read, or interact with the system, so this tool will help you verify that there is enough contrast between the foreground color (text or image) and the background color.

For example, if you want to verify the contrast of a button on a website, you can use CCA to obtain the foreground color (the color of the text) and the background color. CCA will automatically analyze the contrast ratio between both colors.

After you have downloaded the CCA tool, you will see that it presents you with different ways to select a color. In this case, select the foreground color with the eye dropper and, likewise, select the background color using the eye dropper. The tool will immediately display the results of the color contrast considering the WCAG guidelines.

Another advantage of using this tool is that it offers recommendations about the color contrast ratio a text must have in relation to its size.

The recommendations provided by the tool were implemented using the WCAG guidelines. These determine 2 compliance levels for this type of situation: a minimum contrast (AA Level) and an Improved Contrast (AAA Level). The criteria for these levels of compliance state that:

• For level AA, regular text must have a contrast ratio of at least 4.5, and large texts must have a contrast ratio of at least 3.1. In this case, WCAG refers to “large” texts to indicate 18px or 14px in bold.

• For level AAA, the requirement is a contrast ratio of 7.1 for regular text and 4.5 for large texts.

  
  

  
  

  
  

User Accessibility Testing (or Manual Tests)

To complement tests with accessibility testing verification tools, user or manual tests are carried out that make it possible for testers to focus on the content and not so much on the structure of a website.

For example, you can use verification tools to make sure that all images have the alternative attribute (alt), but, with these kinds of tests, you verify that the alternative text is consistent with the image that you see.

How these tests are carried out is determined by the disability situation. In this case, 5 categories are defined:

1. Color usage tests

2. 2. Field-focused tests

3. Navigation tests

4. “Zooming” tests

5. Screen reader tests

   
   

1. Color Usage Testing

The aim of these tests is to verify that the system does not only rely on the use of colors to understand what is happening with the system.

For example, here below you will see a situation where there is a comparison between the perception of a visually impaired person (or a color-blind person) and the perception of a non-visually impaired one. You can see how a visually impaired person cannot identify whether or not the information has been entered correctly.

One way to solve this situation is to incorporate descriptive messages and icons, such as the ones below:

2. Field-Focused Testing

The aim of these types of tests is to make sure that individuals with motor disabilities can also use the system.

The tests seek to verify that the system has the focus indicator provided by browsers enabled and that it contains every single element on the website. This way, the user will be able to know where they are positioned or what they are selected.

3. Navigation Testing

These types of tests are usually carried out using a keyboard instead of using a mouse to interact with a system. They are related to field-focused tests because, in order to perform them, the focus must be correctly configured so keyboard navigation is possible.

To execute them, a set of questions are posed:

• When navigating through the website using the “tab” key to go up, and “shift + tab” to go down, are these executed in order?
• Can you navigate through the whole website from left to right and from the top to the bottom and access every section on the website?
• Are there any elements or contents on the site which cannot be reached using only a keyboard?

  
  

These types of situations are the ones that will be validated during navigation tests.

4. “Zooming” Testing

These are crucial for individuals with low vision. This is a situation that is becoming increasingly more common for people of all ages, so they are becoming more and more important.

The ability to zoom is not only included in the recommendations and accessibility guidelines in WCAG but also an accessibility testing tool that makes everyday life easier for people.

When carrying out these types of tests, you begin with a very simple question: does the application have the zoom functionality enabled?

Sometimes, due to technical or design issues, the zoom functionality is disabled, which means that people that might need it don’t have the option to do so.

The second question that must be asked is: does the application work correctly when the zoom is applied?

When the zoom functionality is enabled, it is important to verify that, when increasing the size of the screen to, for example, 200%, it is still possible to visualize the information and operate within the system without any issues.

It is common to identify problems with these kinds of tests, because there is information that is cut off, or elements on the website that are not adjusted correctly, and, therefore, the interaction is not good, among other situations that pose a problem for users.

5. Screen Reader Testing

Lastly, we will talk about tests involving screen reading. This tool turns HTML content into simplified audio; that is to say, it reads and explains what is being displayed on the screen.The main purpose of these tools is to help visually impaired people navigate through any system, regardless of their situation.

They seek to verify that the system is accessible for people navigating through it using the aforementioned screen reader.

There are many different screen readers: some of them are desktop applications, and others are Chrome extensions. Some examples include NVDA, JAWS, Windows Narrator, and Screen Reader, among others.

To perform these tests, you first activate the tools and then manually navigate through the system while observing whether what the reader interprets is consistent with what is being displayed on the screen.

Lastly, a report is created detailing every accessibility error that was found during the test.There are several issues that these types of tests can detect: for example, if you were passing through an input field on a form and the reader did not read the field, this would be a problem for a blind person because they will not understand what information they need to enter.

Web Accessibility Examples

Now that you know what it means for a web application to be accessible, we will show you some examples which show you when a system meets the accessibility requirements and when it does not.

1. Adequate color contrast

Visually impaired individuals can find it difficult to read texts when three is no contrast with the background color, whether it is a simple background or an image with text. For example, the subtitles for a video or text printed on an image.

2. Providing descriptive tags for the fields in a form

It is common for forms to be implemented with tags embedded into each field in the form. It is best not to do it this way because screen readers can overlook these descriptions. In addition, users with cognitive disabilities might not grasp the intention or the reference to the field. This is an example where the best practices are not followed:

It is recommended to implement this in the following way:

3. Titles and simple spaces

A good design with a simple hierarchy helps users understand the relationship between the title and the corresponding texts, spaces, and the location of the elements. In addition, it reduces cluttering and makes the content more accessible.

4. Alternatives for the consumption of media

It is recommended to make the context available in different formats, offering individuals with disabilities different ways to access the content.

Down below, you can see how a video is presented and, in addition, the audio is transcribed so you can read it.

Conclusions

Accessibility for software products is an attribute that cannot be disregarded because it can have an impact on many users. Depending on the disability situation each person is facing, they will find it easier or harder to operate the software depending on the degree of adoption of the regulations set forth by the standards and good practices.

It is important to think about the accessibility of a system as a competitive advantage because it not only increases user engagement, but it also improves maintenance and efficacy and meets the existing and future legal requirements of the different countries in the world, so it also helps you go international.

Accessibility standards such as WACG provide you with an excellent reference framework and good practices so you can make information systems accessible, and they offer you an excellent guide on how to start treading the path toward accessibility tests. Likewise, thanks to the three compliance levels in the standard, it is possible to measure the current state of the system and plan actions to take to reach new levels incrementally in the future.

There are different accessibility testing tools to execute accessibility tests, such as Axe and CCA, among others. They offer you a very good analysis capacity to quickly determine the general state of the systems in terms of accessibility and offer recommendations to correct any errors detected along the way.

To complement these tools, it is also important to consider verification activities and manual validation that allow you to understand other aspects of accessibility which cannot be obtained by only looking at the results achieved with the tools.

If you apply a strategy that combines accessibility testing tools with manual tests, you will be able to become aware of the level of accessibility offered by the system and to detect improvement opportunities for greater maturity.