Tag
Accessibility testing statusFor 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.
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)
| Component | Accessibility test | Status | Link to source code |
|---|---|---|---|
| Tag | Test(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.
- 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 Requirements:
- 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
- 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
- Violations
macOS Screen reader tests
- Safari Version 13.0.2
- Carbon React version 7.7.1
- 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
- Firefox version 68
- JAWS 18
- Carbon React version 7.7.1
- 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
- Safari version 12.2
- Carbon React version 7.7.1
- 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.)