标签、复选框和单选按钮

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

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. 字段集的

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

我曾考虑过将

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

提前致谢。

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 或 2 未选择。”

然后你可以使用CSSfieldset, legend、标签和inputs。如果内存正确，字段集可能会成为样式的负担，所以我最终可能会添加一个<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>

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

就像 ssollinger 的回答中的评论一样，您可以转储fieldset and legend方法，但你需要构建一切以使其易于访问，构建的一个例子