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…


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

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…


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-02-08T23:37:38+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 2023-02-08T23:37:38+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 2023-02-08T23:37:38+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 2023-02-08T23:37:38+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: 2023-02-08T23:37:38+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/ | 2023-02-08T23:37:38+00:00
https://github.com/addpipe/simple-recorderjs-demo