Key

Interaction

Tab

Moves focus onto or off of the swatch group. Focus moves to the first swatch in the group.

Space or Enter

Triggers an action or selects the swatch when selection is enabled. The focus remains on the swatch, unless the swatch opens or closes the current container. In this case, the focus moves to the target or back to the caller.

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.