标签、复选框和单选按钮

Posted 2023-03-27

【中文标题】标签、复选框和单选按钮

【英文标题】：Labels, checkboxes and radio buttons

【发布时间】：2012-10-16 08:02:09

【问题描述】：

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

我有以下问题不知道如何解决...

我希望将整个单选按钮组标记为与任何其他字段一样（如上图所示），但没有任何东西可以链接标签（即它的“for”属性没有任何内容，因为每个组中的 radio 有自己的标签，仅用于单个单选按钮的值）没有“for”属性的标签将无法通过可访问性合规性。

字段集的

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

我曾考虑将

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

提前致谢。

【问题讨论】：

免费咨询。尽可能避免使用单选按钮。对于屏幕阅读器用户和有视力问题的用户（使用它们需要缩放问题和敏捷性），它们是一种痛苦。

【参考方案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

【讨论】：

感谢您的建议。不确定该接受谁的回答，所以我选择了 Ryan，他的回答更完整，错误更少（对不起 ssollinger）

坦率地说，我很惊讶这种情况没有更多地遇到过，因为在我从事的项目中，用一组单选按钮放置标签的模式是相当标准的。将传奇设计成一个标签的样式对我来说似乎仍然不合时宜，但客户坚持标签存在并且表格可以访问，除了成熟的 aria 构建之外，我看不到任何其他选择，其中我只是没有时间。谢谢！

什么情况？使字段集对齐？这就是它们在 DOM 级别的结构。

谢谢，瑞恩。非常相关。这种方法的可悲之处在于，当标签和表单位于单独的表格单元格中时，它不能使用。我正在尝试构建生成这些东西的代码，并且它不会提前知道标签列的宽度，所以我认为我必须使用一个表格来让浏览器决定。为什么他们不能让收音机像 select 一样工作：<radio id=r1><option val=1>First</option><option val=2>Second</option></radio>

@GlenPeterson 是的，它可以。如果您在表单元素上放置一个 id，并在标签上放置一个 for 属性，那么调用该 id 的标签实际上可以位于页面上的任何位置，这很好。如果您需要即时做某事，我建议您提出一个新问题。

【参考方案2】：

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

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

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

【讨论】：

不，for 的指向将不起作用。 for 属性只查看表单元素。您可以使用两个 div 来代替 fieldset/legend。充当legend 的新div 需要id。然后需要为性别输入赋予带有 id 值的 aria-describedby= 属性。