3

I have the following HTML to create a custom radio button that appears like a yes/no toggle. To comply with WCAG guidelines, would this markup require a role="checkbox" ARIA attribute on the label? Because I have a native HTML radio button in the markup, I'm not sure if ARIA is required here.

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" class="form-control">Yes
    </label>
    <label class="btn btn-default active">
        <input type="radio" class="form-control" selected="true">No
    </label>
</div>
unor
  • 92,415
  • 26
  • 211
  • 360
noclist
  • 1,659
  • 2
  • 25
  • 66

1 Answers1

4

No, radio buttons are fine as is. There's nothing custom about them. You are using a native radio button and the role is defined by default and you have an implicit label associated with it.

If you set the role to checkbox, that would cause the screen reader to announce it as a checkbox and the user would think they could press space to toggle the value on/off, which is not the case. The user must hear that it's a radio button so that they'll know to use the arrow keys to navigate to each radio button.

Two things are missing, though:

  1. The first is the name attribute on each <input type="radio"> so that the radio buttons are grouped together.
  2. The second is a container for the radio buttons (radio group). You either need a <fieldset> or <div role="radiogroup">. Whichever one you choose, the group needs a label. Either <legend> or aria-label, respectively.
slugolicious
  • 15,824
  • 2
  • 29
  • 43