DEV Community

Create custom keyboard accessible radio buttons

Lindsey Kopacz on August 05, 2019

Originally posted on a11ywithlindsey.com. Hey friends! Today we'll be creating custom keyboard accessible radio buttons! This blog post is a follo...

Read full post

Andrew Bone • Aug 5 '19

Is there a reason you went for wrapping each input-label combo in a div rather than using the label element?

<div class="radio-wrapper">
  <input type="radio" name="animal" id="elephant" />
  <label for="elephant">Elephant</label>
</div>

Rather than

<label class="radio-wrapper">
  <input type="radio" name="animal" />
  Elephant
</label>

Or is it a simple case of either will do but you went with the div? 🙂

Elizabeth Schafer • Aug 7 '19

One reason to do it this way is that explicit labels (input+label combo) have better support with assistive tech. Implicit labels (label wrapping an input) don't work with Dragon Naturally Speaking.

a11ysupport.io/tech/html/label_ele...

Lindsey Kopacz • Aug 6 '19

I would take a look at the responses to this. I prefer explicit association but others put their reasons in.

Lindsey Kopacz 🐞

@littlekope

There are many different ways to format your labels to make them accessible.

You can nest your inputs inside their label.

You can also add a `for` attribute on a label and match it with an input `id`.

I prefer the latter because there's more CSS control. What about you?

12:49 PM - 06 Aug 2019

7 40

Lindsey Kopacz • Aug 5 '19

Because I wanted to.

Andrew Bone • Aug 5 '19

Cool, thanks 🙂

Was just checking there wasn't some reason I wasn't aware of 🙂

Lindsey Kopacz • Aug 5 '19

haha It's how I prefer to write my inputs.

Elizabeth Schafer • Aug 7 '19

I love the suggestions to keep the native radio buttons visible while you're working on a custom replacement and to use the :checked pseudo-class to style selected radio buttons. It's really easy to make custom radio buttons that are accidentally out of sync with the native controls.

Anton Korzunov • Aug 10 '19

Quite similar to mine HTML State.

Behold the HTML State

Anton Korzunov ・ May 21 ・ 5 min read

#redux #state #html #a11y

And there is one moment I would like to change in your example - please don't use position:absolute to position "radio" visuals - it's not scalable.

Let's try to do the same, but with position:static

Mike Wheaton • Aug 6 '19

Thanks for this! I'm curious about opacity: 0 instead of display: none for the original radio button. Is this because screen readers are still using the original/hidden radio button?

Lindsey Kopacz • Aug 6 '19

That's correct! I would check out @scottohara 's post about why: scottohara.me/blog/2017/04/14/incl...

Eli Bierman • Aug 7 '19

Using this for some radio buttons right now, thank you for the helpful guide!