标签、复选框和单选按钮

Question

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

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”属性没有任何内容，因为每个组中的 radio 有自己的标签，仅用于单个单选按钮的值）没有“for”属性的标签将无法通过可访问性合规性。

2. 字段集的

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

我曾考虑将

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

提前致谢。

Answer 1

索林格回答的第一部分是正确的：

代码应该是：

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

然后您可以在fieldset、legend、标签和inputs 上使用CSS。如果内存服务正确，字段集可能会让人难以接受，所以我最终可能会在其中添加<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

Answer 2

我曾考虑将<legend> 标记设置为看起来好像它是一个标签，并为单选按钮组完全省去标签，...

这是正确的做法。 “性别”不是任何东西的标签，单选框的标签是“男性”和“女性”。 “性别”是将单选按钮组合在一起的字段集的图例。实现这个表单的正确方法是去掉“Gender”标签，只留下带有legend“Gender”的字段集。

从技术上讲，您可以在单选按钮周围添加<div> 并将“性别”标签的for= 指向它，但我很确定这会导致可访问性问题（尚未尝试过虽然有屏幕阅读器）所以我强烈建议去掉“性别”的标签。