Tag
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.
- Be sure the tag text is clear and concise.
- Color should not be used as the only means to differentiate tag categories.
- When using custom colors be sure the minimum contrast requirements are met.
- 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
- IBM Accessibility Checklist Checkpoint:
- 1.4.1 Use of Color (WCAG Success Criteria 1.4.1)
- 1.4.3 Contrast (Minimum) (WCAG Success Criteria 1.4.3)
Accessibility testing
Accessibility issues are tracked in the Carbon Component GitHub repository
Automated test
Automated test environment
Results
- 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
- 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
- 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
- Safari Version 13.0.2
- Carbon React version 7.7.1
VoiceOver(VO) test:
- Control-Option-Shift-Down Arrow to enter the Web area.
- Press Control-Option-Right Arrow key. VO announces the label and that it is a text element.
- 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
Environment
Results
- Microsoft Windows 10
- Firefox version 68
- JAWS 18
- Carbon React version 7.7.1
- Firefox version 68
- JAWS 18
- Carbon React version 7.7.1
JAWS test:
- Navigate to the Tag. JAWS announces the tag text.
- 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
- Safari version 12.2
- Carbon React version 7.7.1
VoiceOver test:
- Swipe Right to the tag. VO announces the tag text and main landmark.
- 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.)