Docs/Accessibility
SECTION04

Accessible by default.
Verifiable by you.

Mò styles the platform’s elements instead of replacing them, so most accessibility is inherited, not reimplemented. What Mò adds is a visible focus system, keyboard behavior on custom elements, and tokens to keep all of it adjustable.

FOCUS YOU CAN SEE

Focus uses :focus-visible, so mouse clicks stay clean and keyboard navigation always shows the ring. The ring is one token — recolor it site-wide.

Press Tab from here — the ring follows the focus.
…then a badge (skipped)
1:root {2  --ring: #0ea5e9;  /* one token — every :focus-visible follows */3}

KEYBOARD FIRST

Native elements bring their keys for free. Mò’s custom elements implement the ARIA patterns — this live tabs widget moves with the arrow keys.

Tab once to reach the tablist, then use ←/→. One Tab stop, not three.

Tab next control←→ tabs · menusEnter activateEsc close dialog

SEMANTICS, NOT DIVS

The mapping below is the component API. Because Mò builds on these primitives, screen readers get correct information with zero extra markup.

role="alert"Alert messages announce without focus — validation errors are heard, not seen.
<dialog>Native focus trap, Esc to close, ::backdrop. The browser does the hard part correctly.
button[aria-pressed]Toggles expose pressed state to assistive tech and stay queryable in tests.
role="tablist"Tabs use a roving tabindex: one Tab stop, Arrow keys inside — as the ARIA spec prescribes.
<label for=…>Every input example ships with a real label. Click target, accessible name, docs example — one element.
details/<summary>Disclosure state is the browser's, so accordions work before (and without) JavaScript.

REDUCED MOTION

The library keeps motion restrained — short, interruptible transitions, no parallax — and honors the OS setting:

1@media (prefers-reduced-motion: reduce) {2  *, ::before, ::after {3    animation-duration: 0.01ms !important;4    transition-duration: 0.01ms !important;5  }6}

These docs follow the same rule: entrance animations are scroll-triggered, run once, and disable themselves entirely for reduced-motion users.

SHIP CHECKLIST

Tab through the page — every interactive control shows the ring, in order.
Operate dialogs and menus with the keyboard only; Esc closes what Enter opened.
Give every input a real <label>, not a placeholder doing a label's job.
Check color contrast after re-theming — tokens change, WCAG still applies.
Test once with prefers-reduced-motion enabled; nothing should be load-bearing.

Found a gap? The customization tokens make fixes a one-liner — and the docs are built with Mò, so if you can break it here, tell us.