checkbox - 标签、复选框和单选按钮

Question

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

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

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

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

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

1. 我希望将整组单选按钮像任何其他字段一样进行标记(如上图所示)，但是没有任何内容可以将标签链接到(即，其“for”属性没有任何内容，因为每个组中的单选按钮有自己的标签，仅用于单个单选按钮的值)没有“for”属性的标签将无法通过辅助功能合规性。

2. 字段集的

   元素似乎重复了标签的功能。这真的有必要吗？

我曾考虑过将

标签设计为看起来像一个标签，并完全省去单选按钮组的标签，但这对我来说似乎有点老套，并且还会在我的其他地方引入复杂性。代码(依赖 元素来执行一些漂亮的验证消息标记和各种其他操作)

提前致谢。

Answer 1

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

代码应该是:

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

当辅助技术点击男性单选按钮时，大多数会显示为:“性别:男性单选按钮 1 of 2 not selected。”

然后你可以在fieldset上使用CSS , legend 、标签和 inputs 。如果内存正确，字段集可能会成为样式的负担，所以我最终可能会添加 <div>给它:

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

添加此<div>没有可访问性影响。

就像 ssollinger 的答案中的评论一样，您可以转储 fieldset和legend方法，但您需要构建所有内容以使其可访问，an example of a build out