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