Skip to main contentCarbon Design System

Tag

Accessibility testing status

For every latest release, Carbon runs tests on all components to meet the accessibility requirements. These different statuses report the work that Carbon has done in the back end. These tests appear only when the components are stable.

Latest version: ^1.51.0 | Framework: React (@carbon/react)

ComponentAccessibility testStatusLink to source code
TagTest(s) that ensure the initial render state of a component is accessible.
Passes all automated tests with no reported accessibility violations.
GitHub link
Tests that ensure additional states of the component are accessible. This could be interactive states of a component or its multiple variants.
Passes all automated tests with no reported accessibility violations.
Tests that ensure focus is properly managed, and all interactive functions of a component have a proper keyboard-accessible equivalent.
Passes all automated tests with no reported accessibility violations.
This manual testing ensures that the visual information on the screen is properly conveyed and read correctly by screen readers such as JAWS, VoiceOver, and NVDA.
A human has manually tested this component, e.g. screen reader testing.

How it works

Tags are used for web content that needs to be labeled, categorized, or organized using keywords that describe them. Tags are often used as a filter where all tags are in the same color, or used when content is mapped to multiple categories, where color is used to differentiate between categories.

Accessibility considerations

This component has been validated to meet the WCAG 2.0 AA and Section 508 accessibility guidelines, however changes made by the content owner can affect accessibility compliance. Be sure to review and follow the guidance in this section when updating or adding new content to this component.

  1. Be sure the tag text is clear and concise.
  2. Color should not be used as the only means to differentiate tag categories.
  3. When using custom colors be sure the minimum contrast requirements are met.
  4. Tags that are modified as a link to filter content should also follow the link Carbon Component guidance.

Resources

Helpful resources for creating customized accessible implementations

Accessibility testing

Accessibility issues are tracked in the Carbon Component GitHub repository

Automated test

Automated test environmentResults
- macOS Mojave version 10.14.6 with VoiceOver
- Chrome version 77.0.3865.90
- Dynamic Assessment Plugin version 1.8.0.0 - IBM Accessibility WCAG 2.1 Sept. 2019 Ruleset
- Carbon React version 7.7.1
DAP test
- Violations

macOS Screen reader tests

Environment Results
- macOS Mojave version 10.14.6 with VoiceOver
- Safari Version 13.0.2
- Carbon React version 7.7.1
VoiceOver(VO) test:
  1. Control-Option-Shift-Down Arrow to enter the Web area.
  2. Press Control-Option-Right Arrow key. VO announces the label and that it is a text element.
  3. Navigate to the tag with filter. VO announces, "Clear Filter, you are currently on a group. To interact with items in this group press Control-Option-Shift-Down Arrow." (Note: There is an open issue. VO does not announce the "X" clear filter when Tab is pressed immediately after the Tag text is read.)

Windows screen reader tests

EnvironmentResults
- Microsoft Windows 10
- Firefox version 68
- JAWS 18
- Carbon React version 7.7.1
JAWS test:
  1. Navigate to the Tag. JAWS announces the tag text.
  2. Navigate to the Tag with Filter. JAWS announces the tag text and clear filter.

iOS screen reader tests

Environment Results
- iOS version 12.2 with VoiceOver
- Safari version 12.2
- Carbon React version 7.7.1
VoiceOver test:
  1. Swipe Right to the tag. VO announces the tag text and main landmark.
  2. Navigate to the tag with filter. Swipe Right to the "X". VO announces "Clear Filter Image. Possibly very sharp close." (Note: There is an open issue. VO should announce this as a clear filter button.)