Create custom keyboard accessible radio buttons

Content Warning: This blog post contains gifs. Hey friends! Today we’ll be creating custom keyboard accessible radio buttons! This blog post is a follow-up post from my accessible checkboxes post . We’ll go over: The markup Creating a pseudo-element o…

Content Warning: This blog post contains gifs. Hey friends! Today we’ll be creating custom keyboard accessible radio buttons! This blog post is a follow-up post from my accessible checkboxes post . We’ll go over: The markup Creating a pseudo-element on the label in CSS Add “selected” styling in CSS Add focus styling Starting out I decided to create a simple group of radio buttons asking what your favorite animal is The fieldset groups all the radio buttons together logically. The radios inputs are all options to the question in the legend . Also, remember to associate those form labels with the radio buttons! If you don’t know what that means, I suggest taking a look at my introduction to accessible labeling . I’m going to add some straightforward SCSS to clean it up a bit. I didn’t…


Print Share Comment Cite Upload Translate
APA
a11y with Lindsey | Sciencx (2024-03-29T07:53:06+00:00) » Create custom keyboard accessible radio buttons. Retrieved from https://www.scien.cx/2019/07/30/create-custom-keyboard-accessible-radio-buttons/.
MLA
" » Create custom keyboard accessible radio buttons." a11y with Lindsey | Sciencx - Tuesday July 30, 2019, https://www.scien.cx/2019/07/30/create-custom-keyboard-accessible-radio-buttons/
HARVARD
a11y with Lindsey | Sciencx Tuesday July 30, 2019 » Create custom keyboard accessible radio buttons., viewed 2024-03-29T07:53:06+00:00,<https://www.scien.cx/2019/07/30/create-custom-keyboard-accessible-radio-buttons/>
VANCOUVER
a11y with Lindsey | Sciencx - » Create custom keyboard accessible radio buttons. [Internet]. [Accessed 2024-03-29T07:53:06+00:00]. Available from: https://www.scien.cx/2019/07/30/create-custom-keyboard-accessible-radio-buttons/
CHICAGO
" » Create custom keyboard accessible radio buttons." a11y with Lindsey | Sciencx - Accessed 2024-03-29T07:53:06+00:00. https://www.scien.cx/2019/07/30/create-custom-keyboard-accessible-radio-buttons/
IEEE
" » Create custom keyboard accessible radio buttons." a11y with Lindsey | Sciencx [Online]. Available: https://www.scien.cx/2019/07/30/create-custom-keyboard-accessible-radio-buttons/. [Accessed: 2024-03-29T07:53:06+00:00]
rf:citation
» Create custom keyboard accessible radio buttons | a11y with Lindsey | Sciencx | https://www.scien.cx/2019/07/30/create-custom-keyboard-accessible-radio-buttons/ | 2024-03-29T07:53:06+00:00
https://github.com/addpipe/simple-recorderjs-demo