Foundations
Accessibility
Accessible as a rule, not a pass: native elements, printed contrast measured in both finishes, a keyboard route to every value, and motion that can stop.
Native first
Keys are buttons and links. Switches, rockers and checks are checkboxes; selectors and radios are radio groups; faders are ranges; dialogs are <dialog>. They are focusable, announced and posted by the browser, not by the kit. The one custom element, <tui-knob>, is a role="slider" with the full set of ARIA values and is form-associated.
Printing contrast
Body text is --tui-ink or --tui-ink-2, at 4.5:1 or more on the desk, the face and the well in both finishes; --tui-ink-3 is for scales and hints only, at 3:1 or more. The measured pairs are on Colour, as node kit/brain/tools/verify.mjs --contrast prints them.
The keyboard map
| Part | Keys |
|---|---|
| Key | Tab to reach · Enter or Space to press |
| Switch, rocker, check | Space toggles |
| Selector, radio | One Tab stop · arrows move the choice |
| Tabs | One Tab stop · Left/Right · Home/End |
| Fader | Arrows · Page Up/Down · Home/End |
| Knob | Arrows ±step · Page Up/Down ±10% · Home/End · wheel while focused |
| Dialog | Focus moves in and is trapped · Escape closes · focus returns |
| These docs | ⌘K or Ctrl K opens search · / filters the list of pages · arrows and Enter pick a page |
Focus, labels, motion
- Focus is a 2px ring in
--tui-focus, 3px away from the part: on the visible key of a selector, the cap of a fader, the whole well of a combo. - Every control has a visible label or an
aria-label; the verify tool fails a page that has an unlabelled input or knob. - Lamps are never the only signal: every lamp sits next to words.
- Under reduced motion every transition and animation is zero and lamps stop blinking; nothing is lost.
- What the kit does not do for you: meters and progress need their
roleand values from your markup, and the stepper’s keys need eight lines of script. The part pages say so.