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 Updates
APA

a11y with Lindsey | Sciencx (2019-07-30T00:00:00+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 ,<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 ]. 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 . 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: ]
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/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts