标签，复选框和单选按钮 [英] Labels, checkboxes and radio buttons

问题描述

我的网络应用程序使用下面示例中展示的表单...

 名字[____________] 
姓氏[____________] 
性别（）男性（）女性
  

是类似...

 < label for =firstName> / label>< input type =textid =firstName/> 
< label for =lastName>姓氏< / label>< input type =textid =lastName/& 
< label>性别< / label> 
< fieldset> 
< legend>性别< / legend> 
< input type =radioname =sexid =sex-mvalue =m> 
< label for =sex-m>男性< / label> 
< input type =radioname =sexid =sex-fvalue =f> 
< label for =sex-f>女性< / label> 
< / fieldset> 
  

我有以下问题，我不知道如何解决...

1. 我想将WHOLE组的单选按钮标记为任何其他字段（如上图所示），但没有任何链接标签到（即对于其for属性没有任何东西，因为组中的每个无线电都有自己的标签，只是为单个单选按钮的值）没有for属性的标签不会通过辅助功能合规。 >




2. < legend>元素的fieldset似乎重复了标签的功能。这是真的有必要吗？

我曾考虑过对< legend>标签看起来好像是一个标签，并完全取消了单选按钮组的标签，但这似乎对我有点怪，而且还会在我的代码（其依赖于< label>元素一些漂亮的验证消息标记和各种其他事情）

提前感谢。

解决方案

Ssollinger的第一部分答案是正确的：

代码应该是：

 < label for =firstName>名字< / label>< input type =textid =firstName/> 
< label for =lastName>姓氏< / label>< input type =textid =lastName/& 
< fieldset> 
< legend>性别< / legend> 
< input type =radioname =sexid =sex-mvalue =m> 
< label for =sex-m>男性< / label> 
< input type =radioname =sexid =sex-fvalue =f> 
< label for =sex-f>女性< / label> 
< / fieldset> 
  

当辅助技术击中男性单选按钮时，大多数会读作：性别：男单选按钮1 of 2 not selected。

然后，您可以在字段集， ，标签和输入。如果内存正常，fieldset可以是一个熊风格，所以我可能会最终添加一个< div> ：

 < label for =firstName> First Name< / label>< input type =textid =firstName/& 
< label for =lastName>姓氏< / label>< input type =textid =lastName/& 
< fieldset> 
< legend>性别< / legend> 
< div> 
< input type =radioname =sexid =sex-mvalue =m> 
< label for =sex-m>男性< / label> 
< input type =radioname =sexid =sex-fvalue =f> 
< label for =sex-f>女性< / label> 
< / div> 
< / fieldset> 
  

添加此< div> 无障碍性。

像ssollinger的回答中的注释一样，可以转储 fieldset 和 legend 方法，但您需要构建一切以使其可访问，一个示例构建

My web application uses forms laid out as in the example below...

First Name      [____________]
Last Name       [____________]
Gender          () Male  () Female

The markup I use is something like...

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<label>Gender</label>
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
</fieldset>

I have the following issues that I don't know how to solve...

1. I want to have the WHOLE GROUP of radio buttons labelled like any other field (as in the diagram above), but there is nothing to link the label to (i.e. nothing for its "for" attribute, since each radio in the group has its own label just for the value of the individual radio button) A label without a "for" attribute will not pass accessibility compliance.

2. The <legend> element of the fieldset seems to duplicate the function of the label. Is this really necessary?

I had thought about styling the <legend> tag to appear as though it's a label, and dispense with the label altogether for the radio button group, but that seems a bit hacky to me, and will also introduce complexities elsewhere in my code (which relies on <label> elements to do some nifty validation message markup and various other things)

Thanks in advance.

解决方案

The first part of Ssollinger's answer is correct:

The code should be:

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
  <legend>Gender</legend>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
</fieldset>

When assistive technology hits the male radio button, most will read as: "Gender: male radio button 1 of 2 not selected."

Then you could use CSS on the fieldset, legend, the labels and inputs. If memory serves correctly fieldsets can be a bear to style, so i might end up adding a <div> to it:

<label for="firstName">First Name</label><input type="text" id="firstName" />
<label for="lastName">Last Name</label><input type="text" id="lastName" />
<fieldset>
  <legend>Gender</legend>
  <div>
  <input type="radio" name="sex" id="sex-m" value="m">
  <label for="sex-m">Male</label>
  <input type="radio" name="sex" id="sex-f" value="f">
  <label for="sex-f">Female</label>
  </div>
</fieldset>

Adding this <div> has no accessibility implications.

Like in the comment in ssollinger's answer, you could dump the fieldset and legend approach, but you would need to build everything to make it accessible, an example of a build out

这篇关于标签，复选框和单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！