单选按钮可访问性（符合508标准）

Question

如果我想要一个带有“是/否”单选按钮的问题。我如何标记代码，以便屏幕阅读器读取与“是/否”选择相关的问题，而不是在选择单选按钮时读取“是”和“否”标签？

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

由于

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”属性。这会将标签与所需的单选按钮相关联。

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>

Answer 3

使用内容属性（如果可用）。