Skip to content

Technique G205:Including a text cue for colored form control labels

About this Technique

This technique relates to 1.4.1: Use of Color (Sufficient).

This technique applies to 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

Example 1: 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

  • Check #1 is true.
Back to Top