Developer What component has
Keyboard support
| Key | Function |
|---|---|
Tab | Moves keyboard focus to the interactive tag and its Close icon button. |
Shift + Tab | Moves focus to the previous focusable element. |
Enter | Toggles active state for interactive tag or removes tag by Close icon button. |
Considerations for developers
- Make sure screenreader reads your tags list as a group.
- Tags that are used as a link for filtering content should also follow the accessibility guidelines for Link.
- Make sure that any function accessible by hovering with a mouse is also available using only the keyboard.
Considerations for designers
- Tag text should be clear and concise.
- Make sure to check the contrast of the tag text against the background.
- Tag that is used as a link for filtering content should also follow the accessibility guidelines for Link.
Resources
To find more information on the ways to make your tags accessible by the keyboard and screen readers see Creating accessible tag.
Other recommendations
See more accessibility recommendations in the common Accessibility guide.