Accessibility

Built on native <input type="range">, so keyboard, touch, and screen-reader support come from the platform rather than from re-implementations of it.

What that gives you

• Keyboard. Arrow keys step, Home and End jump to the ends, Page Up and Page Down take larger steps, all native behaviour.
• Labels. Each slider carries its own, and the visible label is aria-hidden so controls are not announced twice.
• Touch. Native range inputs, plus pointer events on the draggable chart, so it works the same under a finger as a mouse.

Try it below: tab to a slider and use the arrow keys. Nothing here depends on a pointer.

Charts are decoration

The gamut plots are aria-hidden. They are a visual aid, and the sliders reach everything a chart can, including the out-of-gamut regions the hatching marks, which the notice also states in words.

In the compact layout the visible labels shrink to single letters, but the accessible names stay full: a screen reader hears "Lightness", not "L".

Translating it

The axis names and the out-of-gamut notices come from labels, so the picker speaks whatever your app speaks. The keys are the three axes (l, c, h), plusoutOfGamut and a per-spaceoutOf:<gamut id>.