标签、复选框和单选按钮

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”属性的内容，因为每个单选按钮都有自己的标签仅用于单选按钮的值）。没有“for”属性的标签将无法通过辅助功能合规性检查。

2. fieldset的<legend>元素似乎重复了标签的功能。这真的必要吗？

我曾考虑过将<legend>标签样式化，使其看起来像是一个标签，并放弃单选按钮组的标签，但这对我来说似乎有点hacky，而且还会在我的代码中引入其他复杂性（我的代码依赖于<label>元素来进行一些巧妙的验证消息标记和其他各种事情）

提前感谢。

- Bumpy

---

免费建议。尽量避免使用单选按钮。这对于屏幕阅读器用户和视力受损的用户来说非常痛苦（存在缩放问题和使用它们所需的敏捷性）。 - user1378430

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>

当辅助技术点击男性单选按钮时，大多数人会读到：“性别：未选择 2 个单选按钮中的男性单选按钮1。”

然后您可以在 fieldset 、 legend 、标签和 inputs 上使用CSS。如果记忆无误，fieldsets 可能难以样式化，所以我可能需要添加一个<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，但是您需要构建所有东西以使其可访问，这是一个构建示例

- Ryan B

---

谢谢您的建议。我不确定该接受谁的答案，所以我选择了Ryan，他的回答更完整，错误也较少（抱歉ssollinger）。 - Bumpy

坦白地说，我很惊讶这种情况没有遇到更多，因为在我工作的项目中，将标签与一组单选按钮放在一起的模式是相当标准的。将图例样式设置为标签仍然对我来说不太可靠，但客户坚持要有标签和可访问的表单，我看不到除了完整的ARIA构建之外还有其他选择，而我没有时间去做。谢谢！ - Bumpy

什么情况？让 fieldset 对齐吗？这只是它们在 DOM 级别上的结构方式。 - Ryan B

谢谢，Ryan。非常相关。这种方法的遗憾之处是当标签和表单在不同的表格单元格中时无法使用。我试图构建生成这些东西的代码，它不会提前知道标签列要多宽，所以我认为我必须使用表格让浏览器决定。为什么他们不能让单选按钮像选择框一样工作：<radio id=r1><option val=1>第一个</option><option val=2>第二个</option></radio> - GlenPeterson

@GlenPeterson 可以的。如果您在表单元素上放置一个id，并在标签上放置一个for属性，调用该id的标签可以放置在页面上的任何位置，这是没有问题的。如果您需要即时处理某些事情，我建议您提出一个新问题。 - Ryan B

这可能是你能做的全部，但对于左侧列中带有标签和右侧控件的常规布局来说，它很奇怪。对于复合收音机字段的标签在左侧是什么？没有任何东西，因为字段集图例已经起到了这个作用，使得收音机在视觉上与所有其他字段类型不同。也许图例可以被设计成在左列中显示，而实际上位于右侧的字段集中，但即使它在某些特定的浏览器版本中工作，我也会非常谨慎。底线：我看不到任何不使收音机成为另类的答案。 - enigment

Answer 2

我曾考虑过将<legend>标签样式化，使其看起来像一个标签，并且对于单选按钮组，放弃使用标签...这是正确的做法。"Gender"不是任何东西的标签，单选框的标签是"male"和"female"。"Gender"是将单选按钮分组在一起的fieldset的图例。实现此表单的正确方法是删除"Gender"标签，只留下带有legend "Gender"的fieldset。

从技术上讲，您可能可以在单选按钮周围添加一个<div>，并将"Gender"标签的for=指向该标签，但我非常确定这会导致可访问性问题（尚未尝试使用屏幕阅读器），因此我强烈建议摆脱"Gender"标签。

- ssollinger

---

不，for 属性不起作用。for 属性只能查找表单元素。您可以使用两个 div 代替 fieldset/legend。新的 div 充当 legend 需要一个 id。然后，性别输入框需要被赋予 aria-describedby= 属性，其值为该 id。 - Ryan B