Skip to main content Red Hat Design System logo Contribute on Github

Tag

Overview Style Guidelines Code Demos Accessibility

Implementation

  • To provide context, include an aria-label attribute in the markup
  • Ensure the tag is not interactive and cannot have focus
  • Ensure tag information is not conveyed by color alone
  • Ensure that surrounding content can convey the purpose of a tag via assistive technologies

Using color

As a caution, relying on color alone to communicate information causes barriers to access for many readers. Color vision deficient and low vision users may not be able to perceive color differences, and screen readers do not announce colors to non-sighted users.

Since a tag does not get an accessible name and is not focusable by default, each tag must have adequate contextual information provided in the surrounding layout or user interface to convey the same information the color alone is conveying. A designer or developer could consider using a tag with an icon to supplement using color alone or be sure the text within a tag is as descriptive as possible.

Compare Figure 1 to Figure 2. Both figures include a blue informational tag, a red danger tag , and a cyan link tag. In Figure 1, note how difficult it is to determine the differences between the tags due to the lack of visual cues. In Figure 2, including icons and more descriptive text have increased the amount of helpful information available without using color alone.

Figure 1

A row of three gray tags that all look the same

Figure 2

A row of three gray tags all with a unique icon and a unique text label

ARIA Authoring Practices Guide (APG)

Learn to use the accessibility semantics defined by the Accessible Rich Internet Application (ARIA) specification to create accessible web experiences.

View APG resources

Web Content Accessibility Guidelines

Understanding documents provide detailed explanations for Web Content Accessibility Guidelines (WCAG) guidelines and success criteria.

© 2021-2024 Red Hat, Inc. Deploys by Netlify