Keyboard interactions
Key
Interaction
Tab
Tabbing into a group of tags places the focus on the first tag (only one tag receives the keyboard focus at a time).
Arrow keys
Moves focus through the group of tags.
Page Up or Page Down
Moves focus to the previous or next tag in the group (last becomes first, and first becomes last).
Home or End
Moves focus to the first or last tag in the group.
Backspace or Delete
Removes the tag in focus from the group.
Space
If the tag is selectable, the space bar will toggle selection.
Cursor guidelines
Cursor
Description
Default (Arrow)
Use the default cursor for non-interactive tags.
Pointer
Use the pointer cursor for interactive tags, such as tags that are removable or can be used to filter content.
Grab hand
Use the grab hand cursor when the order of tags can be rearranged.
Grab fist
Use the grab fist cursor when holding a tag.
WCAG 2.2 compliance
Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.
1 . Perceivable
Requirement
Criterion
Level
Compliance
Non-text content
A
Non‑text elements—such as icons used in tags—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.
Info and relationships, Identify purpose
AA
Tags should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized.
Text contrast
AA
Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.
Resize text
AA
Tags should be built in such a way that they can be resized without assistive technology up to 200%.
Non-text contrast
AA
The visual presentation of icons and various states have a contrast ratio of at least 3:1.
2 . Operable
Requirement
Criterion
Level
Compliance
Keyboard
A, AAA
All functionality of the component is operable through a keyboard without specific timing for keystrokes.
Seizures and physical reactions
A, AAA, AAA
There is no flashing content or unnecessary motion or animation in this component.
Focus order
A
Navigation sequences receive focus in an order that preserves meaning and operability.