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…
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…
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/
HARVARDa11y 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/>
VANCOUVERa11y 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