Including a text cue for colored form control labels

ID: G205

Technology: general

Type: Technique

When to Use

All technologies that support color and text.

Description

The objective of this technique is to combine color and text or character cues to convey information. Most users can quickly scan the content to locate information conveyed by using color differences. Users who cannot see color can look or listen for text cues; people using Braille displays or other tactile interfaces can detect text cues by touch.

The text cue must be included as part of the programmatically determinable name for the control.

Examples

Required fields in an HTML form

The instructions for an online form say, "Required fields are shown in red and marked with (required)." The cue "(required)" is included within the label element.

<style>
  .required {
    color:#ec0000;
  }
</style>
<label for="lastname" class="required">Last name (required):</label>
<input autocomplete="family-name" id="lastname" type="text" value="">

Tests

Procedure

For any content where color differences are used to convey information:

  1. Check that the same information is available through text or character cues.

Expected Results

Resources