ARIA accessible radio group

Asked by At

I am trying to ensure that our forms are accessible.

Looking at the W3C documentation for Radio Groups, oddly their example does not even use input type="radio". I don't understand that at all. I have used the code below in my app, and it would appear that Voiceover reads the form correctly. Am I correct? And why would they you div tags and a lot of JS instead of simple HTML form controls?

<div role="radiogroup"
     aria-labelledby="stackedRadioGroup">
  <p class="radio-group-label"
     id="stackedRadioGroup">Stacked Radio Group Label</p>
  <div class="form-check">
    <input class="form-check-input"
           type="radio"
           role="radio"
           name="stackedRadiosExample"
           id="stackedRadiosExample1"
           value="option1"
           checked>
    <label class="form-check-label"
           for="stackedRadiosExample1">
      Radio 1
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input"
           type="radio"
           role="radio"
           name="stackedRadiosExample"
           id="stackedRadiosExample2"
           value="option2">
    <label class="form-check-label"
           for="stackedRadiosExample2">
      Radio 2
    </label>
  </div>
  <div class="form-check">
    <input class="form-check-input"
           type="radio"
           role="radio"
           name="stackedRadiosExample"
           id="stackedRadiosExample3"
           value="option3"
           disabled>
    <label class="form-check-label"
           for="stackedRadiosExample3">
      Radio 3 (Disabled)
    </label>
  </div>
</div>

1 Answers

0
Adam On

You can use native input[type='radio'] elements but you will still have to have a role='radiogroup' element to group the different items (a fieldset for instance)

Some people do not use native elements in order to implement custom designs easily.