Instructions

Should

When needed, additional instructions should be provided to supplement visual and audio cues.

Description

Visual cues are not always obvious or visible to all users. In particular, screen reader users, users who magnify or zoom in on content, and cognitively impaired users.

Similarly, audio cues are not always perceivable. In particular, to users who are deaf or hearing impaired, have volume diminished or muted, or are in noisy environments.

Instructions, menus, dialogue and in-content messages should be delivered visually and audibly, at a user controlled speed, to help users understand how to interact with content. However, be aware that verbosity, whether visual or audible, can also be disorienting and try to be succinct.

Tip

Accessible instructions might be:

  • Visible labels - such as on-screen labels for form controls;
  • Hidden text, text alternatives or labels - for screen reader users only;
  • Help instructions - such as a link to a text/audio file, or another section/page;
  • Temporarily hidden text - such as a pop-over hint or progressively expanded text;
  • Standard notifications - such as error messages.

IOS

Use on-screen text, icons and/or accessible labels and accessible hints.

iOS example

Example using accessibility hint to provide instructions for screen reader users on what exactly the add button does:

[aButton setImage:[UIImage imageNamed:@"add.jpg"] forState:UIControlStateNormal];
[aButton setTitle:NSLocalizedString(@"Add", @"Button title") forState:UIControlStateNormal];
[aButton setAccessibilityHint:NSLocalizedString(@"Adds a show to your queue", @"Accessibility hint for add item to queue button")];                        

Does not provide additional instruction indication that the add button adds a show to your queue:

[aButton setImage:[UIImage imageNamed:@"add.jpg"] forState:UIControlStateNormal];
[aButton setTitle:NSLocalizedString(@"Add", nil) forState:UIControlStateNormal];                        

ANDROID

Provide additional information via on-screen labels, or as off-screen via the contentDescription attribute.

Android example

<ImageButton android:layout_height="wrap_content" android:id="@+id/add_btn" android:src="@drawable/addBtn" android:focusable="true" android:contentDescription="Adds a show to queue"></ImageButton>                        
<ImageButton android:layout_height="wrap_content" android:id="@+id/add_btn" android:src="@drawable/addBtn" android:focusable="true" android:contentDescription="Add"></ImageButton>                        

HTML

Use visible text (labels), alternative text, title attributes for form fields, or off-screen text depending on the need.

HTML example

 
<!-- provide a label for instructions for screen reader users -->
<input type="text" id="s1" aria-label="Search" />
<button>Go</button>

<!-- Providing instructions at the top of a form -->
<p>All required fields are indicated with an asterisk (*) </p>
<label for="email">*Email: </label>
<input type="text" id="email" aria-required="true" />                        
<!-- no instructions for screen reader users -->
<input type="text" id="s1" />
<button>Go</button>

<!-- no indication of what an asterisk means -->
<label for="email">*Email: </label>
<input type="text" id="email" aria-required="true" />                        

TESTING

 

Procedures
  1. Activate a screen reader.
  2. Locate all forms or actionable items.
  3. Verify the page or object/element/control contains instructions explaining how to complete the form or what the object/element/controls will do.
  4. Verify that the instructions are sufficiently clear to avoid and prevent errors.
Results

The following checks are true:

  • Forms provide instructions;
  • Forms provide clear instructions which assist users in avoiding and preventing errors during form completion;
  • Actionable object/controls/elements provide labels or instruction that indicate what action will be performed when the item is activated.