In this article, you will learn what tools we typically use in Accessibility Tests, where you can download them, and find more information on how to use them.
In general, accessibility tools are categorized as follows:
Screen Reader Software: Reads out the page content on the screen
Speech Recognition Software: Converts spoken words into text
Special Keyboard: Easy typing using a keyboard specially designed for people with motor impairments
Screen Magnification Software: Dedicated to vision-impaired users for enlarging the display, so that reading is easier.
In this article, we focus on the screen reader software and keyboard navigation techniques.
Keyboard navigation
In order to test for accessibility and use a screen reader, you need to know the basic
keyboard navigation keystrokes. On the following page, you can find basic keyboard combinations with the help of which you can navigate websites without using a mouse cursor: https://webaim.org/techniques/keyboard/
Screen readers
According to the American Foundation for the Blind, “Screen readers are software programs that allow blind or visually impaired users to read the text that is displayed on the computer screen with a speech synthesizer . . . A screen reader is the interface between the computer's operating system, its applications, and the user. The user sends commands by pressing different combinations of keys on the computer keyboard . . . to instruct the speech synthesizer what to say and to speak automatically when changes occur on the computer screen.” Besides that, screen readers offer a variety of functions such as reading and finding text on the screen.
With the assistance of screen readers, visually impaired and blind people are able to operate applications, draft documents, send emails, surf the web, and much more provided that websites and apps have been adjusted to meet their needs.
For the following screen reader tools, we recommend watching tutorials on YouTube to get familiar with them.
Windows computers
NVDA (Non-Visual Desktop Access) is free open-source software created to help visually impaired people to operate computer software and websites.
Visit https://www.nvaccess.org/download/ webpage
Scroll down and click the Download button.
Run the downloaded installation package and follow the instructions to complete the installation.
After installation is completed, you can run NVDA and from this point screen reader will narrate focused elements by keyboard or mouse and narrate text you enter into the fields.
Here you can find advanced keyboard combinations that you can use with your NVDA
reader to move on the web page content: https://webaim.org/resources/shortcuts/nvda
JAWS is a paid screen reader, which you can use for 40 minutes for free. When the 40-minute session expires, you need to restart your computer to start a new free session. Here is how you install and configure JAWS on your Windows machine:
Download the latest official version of the JAWS screen reader, which is one of the links further down the page. Please do not install the beta version as it is not guaranteed to work reliably.
Follow instructions to complete installation.
You will be asked to restart your computer to complete the process.
We recommend you check out the JAWS Hotkeys to get familiar with the software.
Apple computers
Apple computers with the macOS operating system have a built-in screen reader called VoiceOver.
To activate the screen reader functionality on your Mac, go to System Settings.
Open the Accessibility tab.
Toggle the VoiceOver.
Via the Open Voice Over Tutorial... button at the bottom, you can launch a training that will teach you how to use VoiceOver on your Mac computer.
Visit Apple's official VoiceOver User Guide for more information on how to use VoiceOver on macOS.
Apple iOS devices (iPhones and iPads)
Devices with the iOS operating system have a built-in screen reader called
VoiceOver.
Activate it by navigating to Settings > Accessibility > VoiceOver.
Toggle the VoiceOver option at the top.
Click on the VoiceOver Tutorial below to test every available gesture and what actions they trigger.
From this point, the way you operate your iOS device changes. The following official article by Apple will help you with the gestures: Learn VoiceOver gestures on iPhone.
More useful articles about VoiceOver can be found in the table of contents on that very page, by visiting Table of Contents > Accessibility > Vision > VoiceOver.
Android devices (phones and tablets)
Android has its screen reader called TalkBack.
Activate it by navigating to Settings > Accessibility > TalkBack on your device.
Toggle option to turn on the screen reader.
Note the brief instructions below the Use service option on how to use Android TalkBack. For detailed information, visit Google's guide Get started on Android with TalkBack.
Color Contrast check tools
An important part of accessibility testing is to check if the color contrasts of texts on their respective backgrounds are sufficient, so that visually impaired people can read these texts with fewer difficulties.
There are two most commonly used color contrast tools to conduct color contrast checks:
WebAIM's Contrast Checker: This online tool allows you to quickly assess the contrast ratio of individual HTML elements. Enter the foreground and background color values (hex, RGB, HSL) to see if the contrast meets WCAG 2.2 AA or AAA standards. Remember that AA requires a 4.5:1 contrast ratio for normal text and 3:1 for large text, while AAA requires 7:1 and 4.5:1, respectively.
Colour Contrast Analyser (CCA): Available for Windows and macOS, CCA provides a more in-depth analysis of color contrast. Use the "Pinch" function to select colors directly from your screen or enter color values manually. CCA will calculate the contrast ratio and indicate whether it meets WCAG 2.2 guidelines.
By using the “Pinch” function, you can measure the colors of a text and its
background or enter them manually, and the app will calculate the color contrast ratio.
Automated Tools
WAVE (Web Accessibility Evaluation Tool): WAVE browser extensions or the online tool can analyze entire web pages for contrast errors. WAVE overlays icons on the page to highlight potential issues. It's important to manually verify the results, as automated tools can sometimes produce false positives
You can use the online WAVE tool or WAVE extensions for Chrome, Firefox, and Edge to analyze color contrast ratios for entire pages.
To get started, check out this introduction by WebAIM.
Alternatively, you may want to try the HTML Validator tool by W3C.