United States Department of Veterans Affairs
VHA Office of Health Information

Creating Accessible Flash Course

Page 4 of 11

Creating Accessible Flash Course – Designing for Accessibility

Back Next

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.

Inaccessible Example: Form with instructions that read: Please fill out the form below. Required fields are highlighted in red.

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.

Accessible Example: Form with instructions that read: Please fill out the form below. * = Required fields. Required fields are highlighted in red and preceded by an *.

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.

Location

The following inaccessible instructions require the user to be able to see the location of the button:

Back arrowTo move forward, press the button on the right.Next arrow

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:

Back arrowTo move forward, press the forward arrow (Next) button.Next arrow

Size

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

Large image of a gavel    Small image of a gavel

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:

Large image of a gavel with a label that says a. Large Gavel    Small image of a gavel with a label that says b. Small Gavel

Shape

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

Red octagonYellow triangleGreen circle

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.

Orientation

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.

Inaccessible Example displays this text: If you are not sure
whether you are ready for this course, please read the side bar. Image includes two side bars, one entitled More Info and one entitled Prerequisites.

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.

Accessible Example reads: If you are not sure whether you are ready for this course, please read the Prerequisites. Image includes two side bars, one entitled More info and the other entitled Prerequisites.

Sound

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:

Please wait.
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:

Related Checkpoint(s)

Select Next to learn more about using images consistently.

Glossary in new window Resources in new window   Back Next