Creating an Accessible Range Slider with CSS

This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey

I’ve always loved exploring how to make semantic, accessible elements aesthetically pleasing. And yes, it is possible. Challenging myself to do this has improved my CSS skills. Today we are going to talk about input[type="range"] . These inputs where you select a value from a slider that has a thumb on it. You start with HTML that looks like this: NOTE: I use the visually hidden class to ensure that we have a label for screen readers. Selecting a purpose for an input range slider has many possibilities. You could use it for volume decibel. You could use it for an audio player. You could use it in a survey when rating from 1-10. Many times, when people make these features custom, they don't think to use the semantic features. They make a bunch of divs, and don't think about the keyboard…

This content originally appeared on a11y with Lindsey and was authored by a11y with Lindsey