Tab

Tabbing into a tag field activates the text cursor caret at the end of the group of tags.

Moves focus to the text object.

Shift + Tab

Moves focus to the previous focusable element.

Printable characters

Inserts text at the caret position.

Arrow keys

Moves focus through the group of tags.

Home or End

Moves focus to the first or last tag in the group.

Backspace / Delete

Removes the tag in focus from the group.

Ctrl / Cmd + A

Selects all tags.

Pointer

Use the pointer for tags in all states. Always use the pointer cursor when interacting with the tag’s close icon, even if the tag is moveable.

Text

Use the text cursor anywhere in the field besides when hovering on a tag.

Grab hand

Use the grab hand cursor over a tag when the order of tags can be rearranged.

Grab fist

Use the grab fist cursor when holding a tag.

Non-text content

A

Non-text elements, such as the remove icon on individual tags, must provide a text alternative that communicates the action's purpose. All tag fields need an accessible name (for example, via a label, aria-label, or associated text), and dismiss icons within tags need an accessible name so screen readers can announce their function.

Info and relationships, Identify purpose

1.3.1, 1.3.6

A, AAA

Tag fields should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized. Screen readers should also announce the count of tags and changes when tags are added or removed.

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

Tag fields should be built in such a way that they can be resized without assistive technology up to 200%.

Visual presentation

AAA

The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.

Non-text contrast

AA

The visual presentation of icons and various states have a contrast ratio of at least 3:1.

Text spacing

AA

Line height of text is at least 1.5x the font size.

Requirement

Criterion

Level

Keyboard

2.1.1, 2.1.3

A, AAA

All functionality of the component is operable through a keyboard without specific timing for keystrokes.

Keyboard traps

A

Focus can be moved away from the component using only a keyboard.

Seizures and physical reactions

2.3.1, 2.3.2, 2.3.3

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.

Focus visible

AA

Keyboard states use an indicator that is visible with at least 3:1 contrast.