Components
Tag
Tag is a label that can be used to categorize items or communicate progress, status, or process. Tags can provide users with a quicker overview of content.
What you need to verify yourself
Tag containing only an icon without visible text
Give the icon an accessible name using aria-label. The name should describe the status or meaning. Hide the icon from screen readers using aria-hidden="true" if the tag already has a visible name.
A tag's status or meaning must be communicated using more than color alone
Use a clear and visible label that describes the tag's meaning. Users should not have to rely solely on color or an icon to understand the information.
WCAG: 1.4.1 Use of Color (W3C)
A group of tags should have an accessible name and should be coded as a semantic group
If you display multiple tag components together, we recommend using a ul list with one li element per tag. This allows screen readers to announce them as a list rather than as one continuous text.
Give the surrounding element an accessible name using aria-label or aria-labelledby.
Make sure each individual tag also has an accessible name.
A tag must not perform an action
Use a tag to present information, or optionally link to a category or collection, not to perform actions. Use a chip, button, or another interactive component instead if the user needs to activate or change something.
Avoid long text strings in tags where possible
Long text strings can be difficult to read inside a tag. Use short and meaningful labels wherever possible.
If longer text is required, it may be necessary to truncate the visual presentation. Ensure that the complete content remains accessible, for instance through an accessible tooltip.
Handled by the design system
- Color contrast is handled by the design system's color system. If you deviate from the recommended color tokens, verify that the combination of text and background colors meets the required contrast ratios for all tag variants.
- Sizing and scaling are handled by the design system's sizing system. If you deviate from it, verify that the tag remains usable when text is resized or when screen magnification is used, without loss of information.
Test with a keyboard for link-type tags
Verify that you can:
- reach link-tag using Tab
- activate link-tag using Enter