Accessibility

Every Atelier primitive is built to meet WCAG 2.2 AA. This page documents the keyboard interaction patterns, ARIA conventions, and common pitfalls.

Keyboard Patterns

Component	Key(s)	Action
Button	`Enter` `Space`	Activate the button
Switch	`Enter` `Space`	Toggle checked state
Accordion	`Enter` `Space`	Expand or collapse section
Accordion	`Arrow Down / Up`	Move focus between triggers
Accordion	`Home / End`	Jump to first / last trigger
Dialog	`Escape`	Close the dialog
Dialog	`Tab`	Cycle focus within the dialog

Component	Attributes	Notes
Button	`aria-disabled, aria-busy`	Set when disabled or loading. Prevents interaction while staying in tab order when aria-disabled is used.
Switch	`role=switch, aria-checked, aria-labelledby`	Announces toggle state to screen readers. Label is associated via aria-labelledby.
Accordion	`aria-expanded, aria-controls`	Each trigger announces whether its panel is open. aria-controls links trigger to panel.
Dialog	`role=dialog, aria-modal, aria-labelledby, aria-describedby`	Modal dialog pattern. Title and description are linked by id.

Use visible focus indicators on all interactive elements. The system provides a 2px ring via --color-ring on :focus-visible.

Don't

Remove outline styles or hide focus rings. Users who navigate with a keyboard lose track of their position on the page.

Provide meaningful aria-label or visible text for icon-only buttons. Screen readers cannot infer meaning from an SVG alone.

Don't

Rely on colour alone to convey state. Pair colour changes with text, icons, or ARIA attributes so the information is available to all users.