单选按钮可访问性（508合规性） [英] Radio button accessibility (508 compliance)

问题描述

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

 < span>您是否了解这一点？ （选择一个）< / span> 
< label> 
< input type =radioid =yes_noname =yes_novalue =Yes/> 
是
< / label> 
< label> 
< input type =radioid =yes_noname =yes_novalue =No/> 
否
< / label> 
  

谢谢

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

 < fieldset> 
< legend>您是否了解该问题？< / legend> 
< input type =radioname =yes_noid =yes> 
< label for =yes>是< / label> 
< input type =radioname =yes_noid =no> 
< label for =no>否< / label> 
< / fieldset> 
  

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

我还使用Fieldsets为无线电选择添加明确的边界。

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

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

解决方案

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.

这篇关于单选按钮可访问性（508合规性）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！