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

问题描述

我的 Web 应用程序使用如下例所示的表单...

名字 [____________]姓       [____________]性别 () 男 () 女

我使用的标记类似于...

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

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

1. 我想要像任何其他字段一样标记整个单选按钮组(如上图所示)，但没有任何可链接标签的内容(即它的for"属性没有任何内容，因为每个组中的 radio 有自己的标签，仅用于单个单选按钮的值)没有for"属性的标签将无法通过可访问性合规性.

2. <传奇>字段集的元素似乎复制了标签的功能.这真的有必要吗?

我曾考虑过为

设计样式标签看起来好像它是一个标签，并且为单选按钮组完全省去了标签，但这对我来说似乎有点hacky，并且还会在我的代码中的其他地方引入复杂性(这依赖于 <label> 元素来做一些漂亮的验证消息标记和其他各种东西)

提前致谢.

解决方案

Ssollinger 回答的第一部分是正确的:

代码应该是:

 First Name<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>:

 First Name<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...

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