Question

我的网络应用程序使用下面示例中列出的表单...

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>

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

我希望将WHOLE GROUP的单选按钮标记为任何其他字段（如上图所示），但没有任何内容可以将标签链接到（即没有任何内容用于“for”属性，因为每个组中的无线电有自己的标签，仅用于单个单选按钮的值。）没有“for”属性的标签不会通过可访问性合规。
＆lt; legend＆gt; fieldset的元素似乎复制了标签的功能。这真的有必要吗？

我曾考虑过设计＆lt; legend＆gt;的样式标签看起来好像是一个标签，并且完全取消了单选按钮组的标签，但这对我来说似乎有些麻烦，并且还会在我的代码中引入复杂性（依赖于＆lt; label＆gt;元素来做）一些漂亮的验证消息标记和各种其他东西）

提前致谢。

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>

当辅助技术击中男性单选按钮时，大多数会读作：“性别：男性单选按钮1中未选中。”

然后您可以在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”是字段集的图例，它将单选按钮组合在一起。实现此表单的正确方法是删除“Gender”标签，并将字段集保留为legend“Gender”。

从技术上讲，您可以在单选按钮周围添加<div>并指向“Gender”标签的for=，但我确信这会导致可访问性问题（避难所）虽然没有用屏幕阅读器尝试过，所以我强烈建议摆脱“性别”的标签。

标签，复选框和单选按钮

2 个答案: