Tab

Moves focus onto the swatch or swatch group.

Arrow keys

Moves focus through the swatches in the group.

Pointer

Use the pointer cursor for all interactive elements in every state.

Non-text content

A

Non‑text elements 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

1.3.1, 1.3.6

A, AAA

Swatch groups should be understandable by assistive technologies like screen readers. This means the proper semantic HTML or ARIA role should be utilized, so the grouping relationship between swatches and the selected state are programmatically conveyed.

Use of color

A

This criterion requires that color not be the only method of communicating information. In swatches, the color itself is the content being presented, not a cue that conveys additional meaning.

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.