Provide Accessible Instructions
Instructional text can also create accessibility issues that are best addressed during the initial design of an application. You should make sure that instructions do not require the user to rely on any one sense. This page includes examples of inaccessible instructions that rely on sensory characteristics, along with suggestions for simple changes that make them accessible.
These examples include instructions that rely on the following common sensory characteristics: color and text formatting, location, orientation, size, shape, sound.
Color and Text Formatting
The inaccessible example below relies on color to indicate which fields are required. This example is inaccessible to screen reader users and to users who cannot distinguish color.
Notice that the accessible example, which follows, also uses color, but by adding an asterisk to the required fields (and to the instructions) it provides another way for users to know which fields are required. You will learn more about the appropriate use of color in Flash in the Using Color lesson of this course.
Instructions that rely on text formatting are similar to those that rely on color to convey information. In the previous examples, putting the required fields in bold text would not make them accessible.
The following inaccessible instructions require the user to be able to see the location of the button:
To move forward, press the button on the right.
To make these instructions more accessible, you should add a description of the button and/or use the button's accessible name. In this case, the forward arrow button has the accessible name Next. Here's how you could rewrite the instructions to be more accessible:
To move forward, press the forward arrow (Next) button.
The following inaccessible example requires the user to distinguish size differences. These distinctions might be difficult for users with low vision.
For each conviction, select the large gavel if it is a felony;
select the small gavel if it is a misdemeanor.
Conviction: Mishandling classified information
You can correct an inaccessible design like this by using different images (for example an image of a jail for a felony and an image of money for a misdemeanor) or by labeling the images, as shown below:
Similarly, instructions that require a user to distinguish among shapes are inaccessible. Here is an example:
For each action described, decide if it is (a) illegal, (b) legal but unethical,
or (c) legal and ethical. Select the octagon if it is illegal, the triangle if it is legal but unethical and the circle if it is both legal and ethical.
Action: Sharing a patient's protected medical information with
another doctor involved in the patient's care
There are several ways you can make these instructions accessible. The best way is to include labels and accessible names and to reword the instructions to describe the images better, such as:
Select the STOP sign if it is illegal, the YIELD sign if it is legal but unethical or the GO light if it is both legal and ethical.
In the inaccessible example below, the user is instructed to "read the side bar". These instructions are not accessible to screen reader users, for whom the side bar may not be identified as such.
In the accessible example that follows, you see that the instructions are more explicit about what the user should read and do not require the user to orient himself to the layout of the page in order to get the necessary information.
Instructions are not accessible if they rely solely on the user's sense of hearing, either. Users who are deaf would not be able to follow these instructions:
The system is tallying your results.
When you hear the System Ready chime,
press ENTER to proceed to the next test.
To make these instructions accessible, you must add a visual indicator when the System Ready chime sounds.
There are no specific technical procedures for writing accessible instructions. The VHA Section 508 checkpoints related to accessible instructions are available in a separate window by selecting the link that follows:
Select Next to learn more about using images consistently.