The task was to make an ugly dropdown of values look better. Immediately I went into mobile-first mode and thought of a slider, but sliders have always been a sticking point for accessible browsers. After poking around, I found a stackexchange thread that suggested linking a slider alongside an accessible input (text field or dropdown). I liked the approach; I wouldn’t be eliminating the dropdown in the name of accessibility, but if you’re down (haha) with using the slider, you won’t open the dropdown and see the long list of values hidden within. Also, the double-up on UI will benefit each other, with the dropdown displaying a more specific value of where you are on the slider’s spectrum. The approach is full of win.
I liked how RangeTouch worked in a majority of browsers and linked it to a regular dropdown. Here it is in action:
See the Pen Accessible slider by Brent Enarson (@benarson) on CodePen.