Instructions should

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, so be clear but 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

Make sure that all controls are provided with accessible labels through the accessibilityLabel and, where relevant, the accessibilityHint attributes. Instructions that are beneficial for all users must be displayed visually on the page.

iOS Example (Objective-C)

[myButton setAccessibilityLabel:@"Previous"];
[myButton setAccessibilityHint:@"Displays the previous record in the database.];

---

Android

Make sure that all controls are provided with accessible labels through the android:contentDescription attribute. Instructions that are beneficial for all users must be displayed visually on the page.

Android Pass Example

<ImageButton
  android.id="@+id/myImage"
  android.source="@drawable/myImage_source"
  android:contentDescription="[alternative text]" />

<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>

---

HTML

Make sure that all page components are provided with accessible labels. Use the label attribute to provide an individual label for form controls. Use the alt attribute to provide equivalent text for images. Instructions that are beneficial for all users must be displayed visually on the page.

HTML Pass Example

<!-- provide a label for instructions for screen reader users -->
 <label for="firstName">
   First name
   <span aria-hidden="true">(required)</span>
</label>
<input id="firstName" type="text" 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.

Outcome

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.

---