Question

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

看着W3C documentation for Radio Groups，奇怪的是他们的例子甚至没有使用 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>

Answer 1

您可以使用本机input[type='radio']元素，但仍然必须具有一个role='radiogroup'元素才能对不同的项目进行分组（例如fieldset）

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

ARIA无障碍广播小组

1 个答案: