单选按钮无障碍性（508合规）

Question

如果我想使用“是/否”单选按钮来提问，我需要如何标记代码，以便屏幕阅读器在选择单选按钮时读取与“是/否”相关联的问题，而不仅仅是读取“Yes”和“No”标签？

<span>Did you understand this? (choose one) </span>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>

谢谢

- Jaime Garcia

Answer 1

对于这种类型的表单元素，我使用以下代码：

<fieldset>
  <legend>Did you understand the question?</legend>
  <input type="radio" name="yes_no" id="yes">
  <label for="yes">Yes</label>
  <input type="radio" name="yes_no" id="no">
  <label for="no">No</label>
</fieldset>

请注意，在页面上所有ID值都应该是唯一的。如果您有一个需要共享描述符的元素，可以将其添加为类。

我还使用Fieldsets来为单选按钮添加明显的边界。

并且一定要指定的for="id_value"属性。这将把标签与所需的单选按钮关联起来。

- gruntled

---

这正是我所需要的。 :D - Jim Ford

tabindex怎么办？你肯定会因此被ADA扣分。 - Phillip Holmes

Answer 2

<fieldset>
<legend><span>Did you understand this? (choose one) </span></legend>
<label>
<input type="radio" id="yes_no" name="yes_no" value="Yes" />
Yes
</label>
<label>
<input type="radio" id="yes_no" name="yes_no" value="No" />
No
</label>
</fieldset>

- Jeff

Answer 3

使用 content 属性（如果它可用）。

- VoodooChild