# Accessibility

Native elements first, WAI-ARIA patterns where the platform has none, and contrast verified at build time.

## Approach

MIAN leans on native elements because they come with years of assistive-technology support: `<dialog>` traps focus and makes the page inert, the Popover API handles Escape and light dismiss, `<details>` is a disclosure, form controls are real inputs. Where the platform has no primitive, tabs, combobox, command palette, `mian.js` implements the WAI-ARIA Authoring Practices pattern.

## Contrast

Every noodle is checked when the site is built: body text reaches 7:1 on every surface, secondary text and all on-colour text reach 4.5:1, focus rings reach 3:1. Colour roles also provide a `-text` variant that is guaranteed readable as text on the page, used by soft and outline variants.

## Focus

Every interactive component has a visible `:focus-visible` ring in the noodle's ring colour, offset from the background so it reads on any surface.

## Motion

All transitions use one duration token that drops to zero under `prefers-reduced-motion`. Spinners slow down, shimmer stops, the carousel stops smooth-scrolling.

## Your part

- Label every control and give icon-only buttons an `aria-label`.
- Keep heading levels in order.
- Link hints and errors with `aria-describedby`, and set `aria-invalid`.
- Each component page lists its specific requirements under Accessibility.

Source: https://mian.ro/docs/accessibility