标签、复选框和单选按钮 [英] Labels, checkboxes and radio buttons
问题描述
我的 Web 应用程序使用如下例所示的表单...
名字 [____________]姓 [____________]性别 () 男 () 女
我使用的标记类似于...
<label for="lastName">Last Name</label><input type="text" id="lastName"/><label>性别</label><字段集><legend>性别</legend><input type="radio" name="sex" id="sex-m" value="m"><label for="sex-m">男</label><input type="radio" name="sex" id="sex-f" value="f"><label for="sex-f">女性</label></fieldset>
我有以下问题不知道如何解决...
我想要像任何其他字段一样标记整个单选按钮组(如上图所示),但没有任何可链接标签的内容(即它的for"属性没有任何内容,因为每个组中的 radio 有自己的标签,仅用于单个单选按钮的值)没有for"属性的标签将无法通过可访问性合规性.
<传奇>字段集的元素似乎复制了标签的功能.这真的有必要吗?
我曾考虑过为
提前致谢.
Ssollinger 回答的第一部分是正确的:
代码应该是:
<label for="lastName">Last Name</label><input type="text" id="lastName"/><字段集><legend>性别</legend><input type="radio" name="sex" id="sex-m" value="m"><label for="sex-m">男</label><input type="radio" name="sex" id="sex-f" value="f"><label for="sex-f">女性</label></fieldset>
当辅助技术点击男性单选按钮时,大多数会显示为:性别:未选择 2 个男性单选按钮 1."
然后您可以在 fieldset
、legend
、标签和 inputs
上使用 CSS.如果内存服务正确,字段集可能会影响样式,所以我最终可能会向其中添加 <div>
:
<label for="lastName">Last Name</label><input type="text" id="lastName"/><字段集><legend>性别</legend><div><input type="radio" name="sex" id="sex-m" value="m"><label for="sex-m">男</label><input type="radio" name="sex" id="sex-f" value="f"><label for="sex-f">女性</label>
</fieldset>
添加此
就像在 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...
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.
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屋!