Beginners' Guide to Accessibility Testing
With the test on this page you'll get a good first impression of the accessibility of your app. This enables you to find up to 80% of the errors with 20% of the effort.
Testing an app against the full WCAG success criteria can be extensive and complex. In addition to knowledge about the guidelines, you also need knowledge about assistive technologies. If the goal is to form an idea about the status of your app's accessibility, you do not need to know all WCAG guidelines. We have simplified some of the guidelines into a short explanation and a question.
For this we use the text magnification tools, the screen reader, a contrast measurement and ask the following 15 questions.
You can test the points below without any tools or use of assistive technology.
Captions must be available for all videos with sound, even for live video. So people who depend on captions can understand what is being said.
If there is important information that you cannot hear, you must describe the information. You do this by offering a sound track in which the visual information is described. In this way, people who are blind can hear all the information.
Wheelchair users sometimes have their device mounted horizontally. The content of the screen must rotate with the display of the device. Support vertical and horizontal display.
Ensure clear instructions are provided in places users have to input data. Add a label to the input fields, for example 'First name'. Mark whether fields are required or optional. Indicate if data must be entered in a specified order.
On a mobile phone you can turn on text resizing in the system settings. This works differently on different devices, but if you search for "text" in the system settings, you will see the text size option. If you set this to maximum, you can then see whether your app uses large fonts and whether this does not lead to errors.
It is important for visually impaired users that text can be enlarged. Users specify their preferred font size in the system settings. Text in your app should resize according to this preferred font size. Ensure that the text in your app supports resizing.
Ensure that all content on the screen remains readable even with the largest font. Content should be readable without having to scroll in two directions. Because the text is displayed larger, it can push other elements off the screen. Ensure content can still be reached, for example, by scrolling vertically.
You can easily test your app's contrast. Answer these questions to form an idea whether your app has sufficient contrast. We use this contrast checker ourselves. But there are various tools available that can do this for you.
It is important for visually impaired and color blind users that text is legible. The contrast ratio between the text color and background color must be at least 4.5:1. For bold text and larger text, a ratio of 3:1 is sufficient.
The content of a screen must be legible for everyone. You achieve this by using enough color difference in graphical elements such as icons, buttons and input fields. The contrast must be at least 3:1.
A screen reader reads what is on the screen. You can navigate through apps and perform actions using gestures. In this way it is possible to use apps without sight. More information about the screen reader can be found on the page about assistive technologies page. If the screen reader works properly, keyboard controls, voice controls, and toggles will usually work as well. You can practice the screen reader gestures in the screenreader.app.
People who are blind use a screen reader to read the information on the screen. Make sure that a description is available for all non-text content. Images, for example. By describing them the screen reader can read what you see.
Make sure that the order which assistive technologies follow reflect the meaning of the content. Otherwise, users of assistive technology may misunderstand the content. Most content is presented from left to right, from top to bottom. The information should also be presented to users of assistive technologies in this way.
Prevent people using an external keyboard from getting stuck in your app. For example, it often happens that pop-ups cannot be closed with a keyboard. You can test this to a large extent with a screen reader.
It should be clear to users of assistive technologies what actions they can take. Make sure that the name, role and value can be determined for all elements. For example, when you use an image as a button, you must set the role as a button.
Information on the screen must be conveyed to assistive technologies. For example, make sure that headings are not only bold, but also marked as headings in the code. Relationships on the screen must be usable with assistive technologies. Elements in a list must be navigable one by one. Elements in a table must be navigable by rows and columns.
Make sure that all functionality in the app can be used with assistive technologies. People who are blind use the screen reader. People with a motor disability use switch control, voice control and/or the keyboard. These assistive technologies are built into the operating system.
The use of headings is important to understand how the content is structured. Blind users can use a screen reader to request an overview of all headings on the screen. The use of labels is important with forms to understand what input is requested. Make sure the labels are linked to the input fields.
The simplicity and the number of questions will give you a general idea. You will be able to find up to 80% of the errors with 20% of the effort. However, it will not give a complete picture but only a first impression. For a complete picture, visit the overview of all WCAG guidelines.
- WCAG overview
Web Content Accessibility Guidelines (WCAG)
The Web Content Accessibility Guidelines (WCAG) defines how to make content more accessible to people with disabilities.