Creating an Accessible Range Slider with CSS

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 …


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


Print Share Comment Cite Upload Translate
APA
a11y with Lindsey | Sciencx (2023-01-29T05:19:49+00:00) » Creating an Accessible Range Slider with CSS. Retrieved from https://www.scien.cx/2020/04/29/creating-an-accessible-range-slider-with-css/.
MLA
" » Creating an Accessible Range Slider with CSS." a11y with Lindsey | Sciencx - Wednesday April 29, 2020, https://www.scien.cx/2020/04/29/creating-an-accessible-range-slider-with-css/
HARVARD
a11y with Lindsey | Sciencx Wednesday April 29, 2020 » Creating an Accessible Range Slider with CSS., viewed 2023-01-29T05:19:49+00:00,<https://www.scien.cx/2020/04/29/creating-an-accessible-range-slider-with-css/>
VANCOUVER
a11y with Lindsey | Sciencx - » Creating an Accessible Range Slider with CSS. [Internet]. [Accessed 2023-01-29T05:19:49+00:00]. Available from: https://www.scien.cx/2020/04/29/creating-an-accessible-range-slider-with-css/
CHICAGO
" » Creating an Accessible Range Slider with CSS." a11y with Lindsey | Sciencx - Accessed 2023-01-29T05:19:49+00:00. https://www.scien.cx/2020/04/29/creating-an-accessible-range-slider-with-css/
IEEE
" » Creating an Accessible Range Slider with CSS." a11y with Lindsey | Sciencx [Online]. Available: https://www.scien.cx/2020/04/29/creating-an-accessible-range-slider-with-css/. [Accessed: 2023-01-29T05:19:49+00:00]
rf:citation
» Creating an Accessible Range Slider with CSS | a11y with Lindsey | Sciencx | https://www.scien.cx/2020/04/29/creating-an-accessible-range-slider-with-css/ | 2023-01-29T05:19:49+00:00
https://github.com/addpipe/simple-recorderjs-demo