CODEWITHSUNDEEP
htmlwai-ariawcag
noclist
noclist

Reputation: 1819

Do I need to use the ARIA role attribute on custom radio buttons to be compliant with accessibility guidelines?

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>

Upvotes: 3

Views: 2279

Answers (1)

slugolicious
slugolicious

Reputation: 17435

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.

Upvotes: 4

Related Questions