5

我的 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”属性，因为组中的每个单选按钮都有它的仅针对单个单选按钮的值的自己的标签）没有“for”属性的标签将无法通过可访问性合规性。

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

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

提前致谢。

4

2 回答 2

8

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

代码应该是：

<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. 如果内存服务正确，字段集可能会让人难以接受，所以我最终可能会添加一个<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 的回答中的评论一样，您可以转储fieldsetandlegend方法，但是您需要构建所有内容以使其可访问，这是构建的示例

于 2012-10-26T15:16:55.370 回答
1

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

这是正确的做法。“性别”不是任何东西的标签，单选框的标签是“男性”和“女性”。“性别”是将单选按钮组合在一起的字段集的图例。实现此表单的正确方法是删除“性别”标签，并仅将字段集保留为legend“性别”。

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

于 2012-10-26T12:55:09.077 回答