Components
Chip
Chip are small, interactive components that allow users to control how they want to see content. For example, they can be used to filter categories in a search result and show which filters are active.
Announce changes on the page
If parts of the page are updated while the user interacts with a chip, screen reader users must be informed about those changes. Use an ARIA live region to communicate updates such as an updated result count or other dynamic information.
What you need to verify yourself
A group of multiple input chips must be placed in a fieldset with an accessible name
Give the fieldset an accessible name using either legend, aria-label, or aria-labelledby.
A group of multiple chips that are removable or clickable should be placed in a list
The list should usually be unordered (<ul>). Consider giving the list an aria-label or an associated heading.
Avoid long text strings in chips where possible
Long text strings can be difficult to read inside a chip. 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.
Test with a keyboard
Verify that you can:
- reach the chip using Tab
- interact with button chips using both Space and Enter
- select and deselect checkbox chips using Space
- navigate to and select radio chips using the arrow keys
WCAG: 2.1.1 Keyboard (W3C)
Handled by the design system
- The component uses semantic HTML elements such as
input,label, andbuttonto comply with WCAG 4.1.2 Name, Role, Value. - The design system includes styles for focus and hover. Verify that these are visible during keyboard focus and pointer hover (mouseover) respectively.
- 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 the chip.
- Sizing and scaling are handled by the design system's sizing system. If you deviate from it, verify that the chip remains usable when text is resized or when screen magnification is used, without loss of information or functionality.