Slider demo (aria-valuetext)
Sliders are easy to build, but easy to ship broken: unlabeled sliders get announced as “slider 1” with no context, and numeric values can be meaningless (0/1/2) even when the UI really means “Easy/Normal/Hard”.
AFTER mode
Keyboard: Tab to focus · ←/→ to change · Home/End to jump
BEFORE: unlabeled, numeric-only slider
The UI intends “Easy / Normal / Hard”, but the slider only exposes numbers (0/1/2) and has no associated label.
Difficulty
Value:
1Difficulty: 1
AFTER: label + meaningful value text
This version has an explicit label and a user-facing value (“Normal”). The slider also sets aria-valuetext so assistive tech can announce meaning, not just numbers.
Value:
Normal (1)
If you must use a numeric slider for a non-numeric meaning, add an on-screen value and consider
aria-valuetext.
Difficulty: Normal
Action log
(no actions yet)