# Accessibility & motion

Build interactions that work beyond the screenshot.

Primitive libraries provide a strong behavioral foundation. The finished application still owns its labels, content, contrast, composition and testing. A component library cannot certify every screen built from it.

## Keyboard and focus

Buttons must work with their native activation keys. Accordions need discernible triggers and accurate expanded state. Dialogs need a title, initial focus, focus containment, Escape dismissal where appropriate and focus restoration to the trigger.

Use the documented target composition. Replacing a primitive trigger with an arbitrary clickable element can break both state and keyboard behavior.

## Labels and status

Icon-only buttons need an accessible name. Loading actions should expose their state and prevent duplicate submissions. Label fields explicitly; associate descriptions and validation messages with the relevant control.

## Contrast

Theme Studio includes AA/AAA validation and suggestions for supported color pairs. These checks help you evaluate token choices; they are not a full application accessibility audit. Verify rendered text, disabled states, focus indicators, charts and overlays in context.

## Motion with a purpose

Use motion to show cause and effect: a panel opening, a press being acknowledged, a dialog entering focus. Keep durations short and avoid repeated motion that competes with reading.

```css
@media (prefers-reduced-motion: reduce) {
  .component-preview {
    animation: none;
    transition: none;
  }
}
```

The component examples respect reduced-motion preferences. Test your application’s own transitions alongside keyboard and screen-reader behavior.

## Test the finished experience

Navigate without a mouse, test with a screen reader, zoom the page, try narrow viewports and enable reduced motion. Confirm that text and actions remain available when animation is disabled.