18. User Interface Instructions

When identifying features of user interfaces in instructions and help content, include semantic information and labels as opposed to exclusively referring to visual formatting (e.g. “the option furthest to the right”, “in the blue area”) or to auditory information (e.g. “when you hear a beep”).

Rationale

Students who use assistive technologies (e.g. screen readers, custom style sheets) do not expect help content to provide information on using the assistive technologies. However, it is essential that they receive the same guidance about the media as other students. The key to this is ensuring that all students can identify the media elements that are being described in instructions and help content.

General Techniques

1. These PGs explain how to make essential information available to all users through semantic markup and text. This semantic information should be used to describe media elements as opposed to exclusively using descriptions of the visual or auditory aspects of the elements.

   For example, Pearson Guideline 14 ensures that labels are explicitly associated with form elements, so the following text would work well on a help page to identify a form element:

   <!– Reasonable text for a Help System –>
   <p>Enter your name in the form field labeled
   Student Name at the top right corner of the page.</p>
   

   However, the following text does not mention the label and so could be confusing to students using screen readers and to students using a custom style sheet that changes the location of the form element on the page:

   <!– Not Recommended –>
   <p>Enter your name in the form field at
   the top right corner of the page.</p>

2. This guideline does not mean to discourage mentioning color, sound, shape, size or location on the screen, as these descriptors can be very helpful for some students. In general, students who have transformed the media using assistive technology are aware that they’ve transformed it and will gladly ignore descriptors that don’t work for them when descriptors that do work for them are also present.
3. “Top of the page” and “bottom of the page” mention visual location but pass this guideline without further clarification as long as the content referred to is at the top or bottom (respectively) of the reading order - See Pearson Guideline 4.
4. “Click” is understood by mouse users and keyboard access users alike. It is fine to use “Click” in your instructions, and when compared with alternatives, “Click” usually results in clearer instructions for all users.

Testing

Testing technique	Description
Review	Skim the page. Are there instructions on the page? If so, read the instructions. Will someone who is using custom CSS or who is using a screen reader know which user interface elements are being discussed?
Analysis	If screen reader and custom CSS users would not have enough information to find the user interface elements (i.e. “the red button,”) that is an error. If screen reader and custom CSS users would have enough information to find the user interface elements, but there’s some information that doesn’t apply to them (i.e. “the red submit your exam button,”) that’s not an error.

Related Guidelines

WCAG 2.0 – Level A – SC 1.3.3 Sensory Characteristics:

Instructions provided for understanding and operating content do not rely solely on sensory characteristics of components such as shape, size, visual location, orientation, or sound. (Level A)

Note: Object information provided per the “Information and Relationships”, “User Interface Components”, or “AT interoperability” provision that describes the necessary visual cues or relationships can be used to meet this provision.