Html ARIA无障碍无线电组

我正在努力确保我们的表格是可访问的

奇怪的是，他们的示例甚至没有使用

input type=“radio”

。我一点也不明白。我在我的应用程序中使用了下面的代码，看起来Voiceover正确地读取了表单。我说得对吗？为什么他们会给你

div

标签和大量的JS而不是简单的HTML表单控件

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

堆叠无线电组标签
第一台
第二台
无线电3（残疾）

您可以使用本机

输入[type='radio']

元素，但您仍然需要一个

角色='radiogroup'

元素来对不同的项目进行分组（例如

字段集

）

---

有些人不使用本机元素来轻松实现自定义设计。

您可以使用本机

输入[type='radio']

元素，但仍然需要使用

role='radiogroup'

元素来对不同的项进行分组（例如

字段集

）

有些人不使用本地元素来轻松实现自定义设计