Techniques for WCAG 2.0

On this page:

-

# G138: Using semantic markup whenever color cues are used

## Applicability

All technologies that support color and text.

This technique relates to:

- Success Criterion 1.3.1 (Info and Relationships)
  - How to Meet 1.3.1 (Info and Relationships)
  - Understanding Success Criterion 1.3.1 (Info and Relationships)

## Description

The objective of this technique is to combine color and semantic markup to convey information. Most users can quickly scan the content to locate information conveyed by using color. For users who cannot see color, semantic markup can provide a different type of cue. User agents can then make this type of structure perceivable to the user, for example using a different visual presentation for different types of structures or by using a different voice or pitch in an auditory presentation.

Most user agents will visually distinguish text that has been identified using semantic markup. Some assistive technologies provide a mechanism for determining the characteristics of content that has been created using proper semantic markup.

## Examples

### Example 1: Color and strong emphasis for required form fields

An HTML form contains several required fields. The labels for the required fields are displayed in red. In addition, the text of each label is marked up with the STRONG element for stronger emphasis. The instructions for completing the form indicate that "all required fields are displayed in red and are emphasized", followed by an example.

## Resources

Resources are for information purposes only, no endorsement implied.

- Phrase elements: EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, and ACRONYM

## Related Techniques

- G122: Including a text cue whenever color cues are used
- H49: Using semantic markup to mark emphasized or special text

## Tests

### Procedure

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

1. Check that the same information is available through semantic markup.

### Expected Results

- Check #1 is true.

- Top
- Contents
- Intro
- Previous: Technique G136
- Next: Technique G139