Pricing
TABLE OF CONTENTS

Accessibility Testing: A Complete Guide

banner.png

Accessibility testing is the process of evaluating that a software application, website, or digital content is usable to people with special needs or unique challenges due to physical, sensory, cognitive, or developmental impairments. The goal of accessibility testing is to identify and address barriers or obstacles in the application that can prevent these individuals from effectively using and accessing the digital product.
 

Accessibility testing promotes inclusivity in the digital world. It  requires developers to adopt design practices tailored for marginalized populations, fostering a digital environment where all users can engage, participate, and benefit from the technology provided. As a result, quality assurance professionals must also employ accessibility testing to check for these inclusive functionalities.
 

In this article, we will deep-dive into the importance of accessibility testing, everything you need to know to perform accessibility testing for your application, and how 

Why Is Accessibility Testing Needed?

1. Inclusive User Experience

Accessibility testing rose along with the demand for inclusivity in product development. For example, almost all cars with a stick-shift system are designed for right handed people who account for 90% of the world population, leaving out the left-handed. Recently, many car manufacturers have replaced the stick-shift design with an interactive touch screen, reflecting a user-centric approach. With new technology comes the need for accessibility testing to evaluate its quality.
 

The software industry underwent the same trend. Several technologies designed for accessibility in software include:
 

Visual Impairments:

  • Screen readers
  • Magnification software
  • Braille displays
  • Tactile graphics and tactile interfaces

Motor or Mobility Impairments:

  • Keyboard accessibility (support for alternative input devices)
  • Voice recognition and dictation software
  • Switch control

Hearing Impairments:

  • Closed captioning and subtitling
  • Transcripts for multimedia content
  • Visual alerts and notifications

Cognitive or Learning Disabilities:

  • Text-to-speech (TTS) software
  • Simplified and consistent user interfaces
  • Guided workflows and step-by-step instructions

Color Vision Deficiencies:

  • High contrast color themes
  • Color blindness simulators

Speech Impairments:

  • Speech recognition and dictation software
  • Alternative communication devices and software (e.g., AAC devices)

These technologies require a unique approach to testing, hence a separate category for it in the software quality management world.
 

2. Compliance With Accessibility Standards

Accessibility standards have been established long before the Internet, but have been revised to also apply to web-based products. These standards ensure that individuals with disabilities have equal access to information, services, and opportunities provided by digital platforms. It has positive economic and societal impacts by challenging old stereotypes and promoting a more accepting mindset.
 

Several notable accessibility standards in software development and software testing include: 
 

  • Web Content Accessibility Guidelines (WCAG): a widely recognized set of guidelines developed by the World Wide Web Consortium (W3C) providing standards for making web content accessible. Many accessibility laws and regulations around the world reference WCAG as the benchmark for compliance. WCAG 2.1 includes 4 major principles: Perceivable - Operable - Understandable - Robust. Each guideline has specific success criteria ranging from A (lowest) to AAA (highest). Conformance with WCAG 2.1 is often the minimum requirement for accessibility compliance, and has therefore become the guideline for many accessibility testing professionals.
     
  • Section 508 of the Rehabilitation Act (United States): an accessibility law enacted in 1998 by the US Congress to “require Federal agencies to make their electronic and information technology accessible to people with disabilities”. This law mandates that digital platforms make their electronic content more accessible with alternative text, keyboard accessibility, color contrast, multimedia alternatives, and more.
     
  • European Union Web Accessibility Directive: a law enacted within EU countries requiring public sector websites and mobile applications to comply with WCAG 2.1 at the AA level. 
     

There are many country-specific regulations that accessibility testers should know to include in their test plan, ensuring that their applications are compliant with the law.

 

3. Social Responsibility

More than just legal compliance, incorporating accessibility testing best practices aligns your strategy with social responsibility values, contributing to a more equitable and progressive society by removing barriers that hinder users from accessing modern technology and digital resources on the Internet. 
 

Social responsibility means a lot to all parties. It is a unique way to promote a healthy brand image while providing great value to an underserved user base, and research shows that corporate social responsibility does impact employee satisfaction. It instills employees with a sense of purpose in creating inclusive products and applications.

 

4. Encourage Innovation

Accessibility testing future-proofs your software and encourages innovation to accommodate for the ever-evolving standards as well as the need for customization. Through accessibility development and accessibility testing, you create products and services that are usable by everyone. This allows your organization to stay ahead of the competition in the market and explore niche, emerging markets, capitalizing on the opportunities they present.
 

Examples Of Accessibility Testing

Let’s take the example of a job portal website. Despite being a prominent online employment website, they faced challenges with the accessibility and usability of their job portal application. After conducting a survey, they noticed that about 10% of their customers are physically challenged, and they reported difficulties in using the application. 
 

Recognizing the importance of accessibility and inclusivity, they adopted accessibility testing to address the issue. The testing reveals that the software is not yet friendly for people with visual impairments in several aspects; for example, many images don’t include an alt text which enables screen readers to read the information about the image for the benefit of a person with a complete lack of sight, who is visually impaired, or many other reasons. 
 

Similarly, for the complex dropdown menus in the job filter section, they also realize that delays should be introduced to ensure that the menus remain open long enough for users with motor or cognitive disabilities to select their desired option. Quick-closing menu is quite challenging for individuals who need extra time to read and understand the filter options.
 

Keyboard accessibility is also important, since many visually impaired people rely on their keyboard to navigate around the website, not their mouse. Web developers of the job portal site have to make sure that important interactive elements (links, buttons, forms, etc.) are fully accessible via keyboard, or any assistive technology that simulates keyboard input.
 

What Technology To Assist People With Disabilities?

1. Visual Disabilities

  • Screen readers: Software that converts on-screen text into synthesized speech or Braille output.
  • Screen magnifiers: Tools that enlarge text and graphics on the screen for users with low vision.
  • Braille displays: Devices that convert on-screen text into Braille output for blind individuals.
  • Optical character recognition (OCR) software: Technology that converts printed text into digital text for screen reader users.
  • Talking book players: Devices that enable individuals with visual impairments to listen to audiobooks.

2. Hearing Disabilities

  • Hearing aids: Small electronic devices that amplify sound for individuals with hearing loss.
  • Assistive listening devices (ALDs): Devices that enhance sound quality and clarity in specific listening environments.
  • Closed captioning: Textual representation of audio content displayed on screens, particularly useful for videos and broadcasts.
  • Video relay services (VRS): Technologies that enable deaf individuals to communicate via sign language through video calls.

3. Mobility Disabilities

  • Wheelchairs and mobility scooters: Assistive devices that provide mobility and independence for individuals with limited mobility.
  • Voice recognition software: Technology that converts spoken words into text, allowing individuals with limited mobility to operate computers and devices.
  • Switches and alternative input devices: Tools that enable individuals with limited dexterity to interact with computers using various input methods, such as head or eye movements.

4. Cognitive Disabilities

  • Augmentative and alternative communication (AAC) devices: Tools that assist individuals with communication difficulties by providing alternative means of expression.
  • Cognitive aids: Software applications or devices that support memory, organization, and cognitive processes.
  • Visual schedules and timers: Visual tools that help individuals with cognitive disabilities manage their time and tasks.

5. Neurodivergent Disabilities

  • Text-to-speech software: Tools that convert written text into spoken words, assisting individuals with reading difficulties or dyslexia.
  • Noise-canceling headphones: Devices that reduce environmental noise and sensory overload for individuals with autism or sensitivity to sound.

What To Test In Accessibility Testing?

Here we first need to understand the concepts of “focus” and “focus indicator” in web development.
 

“Focus" is the state of an interactive element when it is currently selected or interacted with by the user. When a user interacts with a website using a keyboard or other input device, they move the focus from one element to another to navigate through the interface and trigger actions.
 

The "focus indicator" is simply a visual cue that indicates which element currently has the focus. It helps users with visual impairments or those who rely on keyboard navigation to understand their location on the page and which element is active. The focus indicator is typically represented by a highlight, border, or change in color around the focused element.
 

So what makes these 2 concepts so important in accessibility design? People with visual impairments can’t identify web elements as easily, and they need a special form of signal to navigate around. Accessibility testing revolves around testing if these focus indicators provide enough information for disabled users:

  1. Keyboard Accessibility: Test whether all interactive elements, such as links, buttons, and form fields, can be operated using keyboard navigation alone. Besides using keyboard shortcuts, we can utilize the Tab button to move the focus from 1 element to another, the Enter button to activate the focused element, and the arrow keys to move around.
     
  2. Screen Reader Compatibility: Verify that the content and functionality of the website are accessible to screen reader users. Screen readers can read text equivalents of images, headings (H1, H2, H3, etc.), form labels, links, buttons, table content, dynamic content, landmarks (header, nav, main, etc.), and more. To do this, many web developers employ WAI-ARIA, which is essentially a set of technical specifications to introduce additional attributes and roles that can be added to HTML elements to provide more semantic meaning to assistive technology. 
     
  3. Color Contrast: Evaluate the color contrast between text and background elements to ensure readability. Contrast is evaluated based on a metric called contrast ratio calculated by calculating the ratio between the adjusted relative luminance (i.e. the perceived brightness of the color) of the text and the background. The acceptable contrast ratio for large-size text should be 3:1 (i.e. 1 color is about 3 times brighter than the other)
     
  4. Alternative Text for Images: Check that all images, icons, and graphics have appropriate alternative text (alt text).
     
  5. Text Resizing and Zooming: Test the website's responsiveness to text resizing and zooming to see whether the text is still readable. Ensure that zooming does not cause any functional errors such as blocking important on-screen elements and content. 

image8.png
 

  1. Multimedia Accessibility: Evaluate the accessibility of videos and audio files, which simply entails including a transcript for any audio/videos present on the web. 
     
  2. Navigation and Structure: Evaluate the website's navigation and structure to ensure it is logical and well-organized using ARIA labels. For example, testers can check if the role="navigation" attribute is used for navigation menus and the aria-label attributes are added. Screen readers will read those labels when the user reaches the element.
     

<nav role="navigation">

  <ul>

    <li><a href="#" aria-label="Home">Home</a></li>

    <li><a href="#" aria-label="About">About</a></li>

    <li><a href="#" aria-label="Services">Services</a></li>

    <li><a href="#" aria-label="Contact">Contact</a></li>

  </ul>

</nav>

Sample Test Cases For Accessibility Testing

  1. Verify that all images on the website have appropriate alt text for screen reader users.
  2. Test keyboard accessibility by navigating through the website using only the Tab key.
  3. Check that all form elements have associated labels to assist screen reader users.
  4. Ensure that color is not the sole means of conveying important information or instructions.
  5. Test the website with screen readers like NVDA, JAWS, or VoiceOver to ensure compatibility.
  6. Verify that all video and audio content has captions or transcripts for hearing-impaired users.
  7. Check that the website is compatible with different browsers and assistive technology combinations.
  8. Test the website's zoom functionality to ensure it maintains usability and readability at various zoom levels.
  9. Verify that the website is usable with high contrast settings enabled.
  10. Test the website's functionality with JavaScript disabled to ensure core features still work.
  11. Check that all interactive elements have sufficient focus indicators for keyboard navigation.
  12. Verify that all error messages and validation notifications are presented clearly and identified for screen readers.
  13. Test the website's compatibility with different screen resolutions and sizes.
  14. Check that the website has logical heading structures to aid users who navigate using headings.
  15. Verify that all data tables have proper markup and are accessible to screen reader users.
  16. Test the website's performance with assistive technologies like screen readers to ensure it remains responsive.
  17. Check that the website meets the Web Content Accessibility Guidelines (WCAG) 2.1 or 2.2 standards.
  18. Verify that the website has skip navigation links to allow users to bypass repetitive content.
  19. Test the website's compatibility with different operating systems and screen reader/browser combinations.
  20. Check that the website provides an accessible and descriptive alternative for complex or decorative images.

</a></li></ul> </v>

How To Do Accessibility Testing?

There are 2 approaches to accessibility testing: manual testing vs automation testing. Automated accessibility tests utilize specialized software to analyze websites and identify common barriers that could impact individuals with disabilities. On the other hand, manual testing involve human testers who personally interact with the website and generate detailed reports based on their firsthand experience. These reports typically encompass insights on WCAG conformance issues and suggested remediation strategies.
 

You can do accessibility testing yourself with a little bit of configuration and computer skills.

1. High Contrast Mode

You can enable high contrast mode to highlight the content of the website. Simply go to high contrast mode through the search box or settings. Select the high contrast theme from the drop-down menu. You should see your screen turning into one similar to an inverted color screen like this:

 

image6.png

2. Image Accessibility Through Alt Text

Alt text is only displayed when the image is not loaded properly. To do this, testers must temporarily disable image loading to see if the content remains readable.
 

In Google Chrome, go to Settings > Privacy and Settings > Site Settings. Upon scrolling down you should see the “Image” tab. Click on it and you’ll see under the Default Behavior section there is a “Don’t allow sites to show images”. This will disable images and replace them with alt text. 

 

image9.png

 

In Internet Explorer, you can uncheck "show pictures" in the advanced settings, while in Firefox, type "about:config" in the search bar and adjust the value of "permission.default.image." from 0 to 1, with 0 being the default usual images and 1 means blocking image loading.

 

image4.png

3. Keyboard Accessibility

This type of test focuses on accessing the website using only the keyboard, without relying on mouse interaction. Try navigating through the website using the "Tab" key to move the focus between links and interactive elements. Use "Tab" + "Shift" to move the focus backward to where you were previously. After browsing around the web with your keyboard, you should have a better understanding if the functionality and content can be accessed and operated using keyboard navigation alone, benefiting users who may have difficulty using a mouse.
 

4. Font Size Adjustment

You can verify if the content remains readable and does not become distorted or lose functionality on the website with the font size set to "large" or increased in size. Most users use the Ctrl and +/- shortcut to quickly zoom in/out on Windows or the with +/- for Mac. In some cases, the images or letters don’t enlarge even when you zoom in, which can be quite a frustrating experience for any user interacting with the site.

How To Do Automated Accessibility Testing With Katalon

Katalon is a modern, comprehensive AI-powered automation solution designed to automate tests for web, API, desktop, and mobile apps, all in 1 place. It is a powerful tool to create, execute, and manage your testing activities with low-code features such as Record-and-Playback where you can record your activities and turn that sequence into a test script, or use the prebuilt list of keywords to craft a test script with just a few drag-and-drops.
 

katalon-logo-newbrand2022-top-nav.png

You can easily automate accessibility testing at scale by combining Katalon’s low-code automation features with Axe’s accessibility testing tool thanks to the Axe-core library integrated in Katalon Studio.
 

To automate accessibility testing in Katalon, first download our free Katalon Studio along with the axe-core library. After you have successfully logged in to Katalon, navigate to the menu: Project > Settings > Library Management.

 

image1.png
 

After you added the axe-core library .jar file, you can run your accessibility test with a custom keyword. Go to File > New > Package to create a Keyword Package. We’ll name it “accessibility”

Create new Keyword Package
 

Next go to File > New > Keyword to create a Keyword called AxeKatalon. It’ll be placed in the package you’ve just created.

 

image5.png

Add the script below to your keyword file.

import com.kms.katalon.core.util.KeywordUtil
import java.text.SimpleDateFormat

import com.kms.katalon.core.configuration.RunConfiguration
 import com.kms.katalon.core.webui.driver.DriverFactory

import com.deque.html.axecore.selenium.AxeBuilder;
import com.deque.html.axecore.selenium.AxeReporter;
import com.deque.html.axecore.selenium.ResultType;
import com.deque.html.axecore.results.Results;
import com.deque.html.axecore.results.Rule;
import static com.deque.html.axecore.selenium.AxeReporter.getReadableAxeResults;


@Keyword
def checkAccessibility() {
Results results = new AxeBuilder().analyze(DriverFactory.getWebDriver())
List<Rule> violations = results.getViolations()
if(violations.size() == 0){
KeywordUtil.logInfo("No Violation Found")
}
String AxeReportPath = RunConfiguration.getReportFolder()+ File.separator
String timeStamp = new SimpleDateFormat("yyyy_MM_dd_HH_mm_ss").format(new java.util.Date())
String AxeViolationReportPath=AxeReportPath + "AccessibilityViolations_" + timeStamp
AxeReporter.writeResultsToJsonFile(AxeViolationReportPath,results)
KeywordUtil.logInfo("Violation Report Path"+ AxeViolationReportPath)

if(getReadableAxeResults(ResultType.Violations.getKey(),DriverFactory.getWebDriver(),violations) ){
AxeReporter.writeResultsToTextFile(AxeViolationReportPath,
AxeReporter.getAxeResultString())
}
}
}

 

You now have an entire keyword that can be reused across any test cases you want! You can add the keyword as a test step in your test case. The other steps used in this case (Open Browser, Navigate to URL, etc.) are all built-in keywords, and you can immediately access them at the Built-in Keywords folder. It takes a few minutes to craft a test case that can be automatically executed on any browser that Katalon Studio supports (Chrome, Mozilla Firefox, Edge Chromium, Safari). You can use this keyword for different pages on the website depending on your navigation flow.

 

image3.png

 

After you execute the test, the accessibility test reports are generated in TXT and JSON format in the Katalon Studio report folder.

image2.png
 

 

Download Katalon for free