APG · Slider and Multi-Thumb Slider
Slider
aria-valuenow="3" announces "3". Three what? The attribute
people leave out is aria-valuetext, and it is the one that
decides whether the control is usable.
Named steps, where the number means nothing on its own
Two thumbs
What to check. On the price slider, move the maximum
thumb down and then focus the minimum thumb: its announced upper bound
has moved with it. A screen reader that still promises "0 to 1000" is
describing a range the thumb cannot reach. Each thumb also has its own
name — two thumbs both called "Price" are indistinguishable.
| → / ↑ | Increase by one step. |
|---|---|
| ← / ↓ | Decrease by one step. |
| Page Up / Page Down | Increase / decrease by the large step — a tenth of the range by default. |
| Home / End | Jump to the minimum / maximum. |
Notes
In a right-to-left writing mode the arrows follow the visual direction of the track, not the numeric axis — ← increases. Getting this backwards makes the control feel broken to every RTL user.
The track carries touch-action: none. Without it, dragging a
thumb on a touch screen scrolls the page instead.