Param PanelAccessibility
Keyboard, screen-reader, and touch support are required for v1 — what ParamPanel guarantees and how to keep custom controls accessible.
Accessibility is a required v1 feature, not an afterthought. ParamPanel builds on native inputs wherever possible so that keyboard, screen-reader, and touch support come largely for free — and stay correct when you restyle the panel.
What ParamPanel guarantees
- Every input has an accessible label, tied to its control's
label. - Hints connect to their control through
aria-describedby. - Disabled controls use native semantics rather than pointer-events tricks.
- Folders expose correct disclosure state (expanded / collapsed).
- Buttons are real
<button>elements; checkboxes are native checkboxes where practical. - Every interactive control is reachable by keyboard, with a visible focus style.
- Canvas controls provide an accessible label or fallback description.
- Color is never the only indicator of a warning or error.
Restyling
When you override CSS variables, keep focus states visible and contrast sufficient — those are the two guarantees most easily lost when customizing colors.
Keyboard behavior
| Key | Action |
|---|---|
Tab | Move between controls |
| Arrow keys | Adjust numeric controls (slider, number) |
Enter | Commit a text / number edit; toggle a folder |
Escape | Cancel an in-progress text edit |
Space | Activate buttons and checkboxes; toggle a folder |
/ | Focus search, where search is enabled |
focus() moves focus to a control's primary interactive element — see
Control lifecycle.
Pointer and touch
- Sliders work with mouse, pen, and touch, using pointer capture for drags.
- A final (
details.final) event fires reliably even when a pointer interaction is cancelled, so completion handlers always run. - Scrolling over a slider should not accidentally change its value.
- Touch targets grow with the
touchdensity.
Mobile
ParamPanel stays usable on phones and tablets. Pair density: "touch" with a
mobile-friendly position:
const pp = createPanel({
density: "touch",
});The panel keeps its content scrollable, respects safe-area insets, avoids hover-only functionality, and behaves predictably with the on-screen keyboard. A full docking or window-management system is out of scope — the goal is a panel that is comfortable to use with a thumb, not a mobile UI framework.