Discussion on: Create custom keyboard accessible radio buttons

[Andrew Bone]

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? 🙂

[Lindsey Kopacz]

Because I wanted to.

[Andrew Bone]

Cool, thanks 🙂

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

[Lindsey Kopacz]

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

[Lindsey Kopacz]

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

[Elizabeth Schafer]

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...