Sliders: label + value text (note)

Sliders are often announced as “slider 37” unless you provide context. They also frequently expose numbers (0/1/2) even when the UI meaning is words (Easy/Normal/Hard).

• Prefer a native <input type="range"> so keyboard behavior is built-in.
• Always provide a label (visible <label for>, or aria-label/aria-labelledby).
• Show the current value on screen (don’t make users infer it from thumb position).
• If the meaning is not numeric, consider aria-valuetext (e.g., “Normal”) so assistive tech announces the meaning.
• For discrete steps, consider tick marks (<datalist>) and/or a text value next to the slider.
• Keep the focus ring visible and don’t block Arrow/Home/End keys.