Tag

Overview Style Guidelines Code Demos Accessibility
  1. Implementation
  2. Using color
  3. ARIA Authoring Practices Guide (APG)
  4. Web Content Accessibility Guidelines
  1. Implementation
  2. Using color
  3. ARIA Authoring Practices Guide (APG)
  4. Web Content Accessibility Guidelines

Implementation

  • Ensure any interactive elements can be navigated to and interacted with via keyboard and other assistive technologies such as a screen reader
  • Provide an aria-label if a tag group does not have a visible text category name
  • Ensure a tag that contains a link has descriptive text content

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 UI to convey the same information that color alone would convey. Designers and developers should consider using tags with icons instead of color alone or be sure that text within a tag is as descriptive as possible.

Compare Figure 1 to Figure 2. Both examples include blue, red, and green tags. In Figure 1, note how difficult it is to determine the differences between tags due to a lack of visual cues. In Figure 2, including icons and more descriptive text increases the amount of helpful information available without relying on color alone.

An image of 3 tags, first tag is outline variant with a white background and blue colored text which reads Tag 1. The second tag is outline variant with white background and red colored text which reads Tag 2. The third tag is an outline variant with white background and green colored text which reads Tag 3.

Figure 1

An image of 3 tags, first tag is outline variant with a white background and blue colored text which reads Secure server and has a blue padlock icon. The second tag is outline variant with white background and red colored text which reads critical error and has a red circle with an exclamation point icon The third tag is an outline variant with white background and green colored text which reads signed successfully and has a green circle icon with a check mark.

Figure 2

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.

Edit this page on GitHub