Accessibility

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.