单选按钮可访问性（508 合规性）

发布于 2024-09-05 03:28:11 字数 380 浏览 8 评论 0原文

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

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

谢谢

原文

If I want to have a question with a "Yes/No" radio button. How do I need to mark up the code so that a screen reader reads the question associated with the "yes/no" selection instead of just reading the "Yes" and "No" labels when the radio buttons are selected?

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

Thanks

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

提笔书几行 2024-09-12 03:28:11

对于这种性质的表单元素，我使用：

<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 值都应该是唯一的。如果您有一个需要共享描述符的元素，请将其添加为类。

我还使用字段集为单选选择添加明显的边界。

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

For form elements of this nature I use:

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

Also please take note that all ID values on a page should be unique. If you have an element that needs to share a descriptor then add it as a class.

I also use Fieldsets to add a distinct boundary to the radio selection.

And be sure to specify the for="id_value" attribute of the label. This will associate the label with the desired radio button.

回复收藏 0 原文

要走干脆点 2024-09-12 03:28:11

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

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

回复收藏 0 原文