标签,复选框和单选按钮

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. 我希望将WHOLE GROUP的单选按钮标记为任何其他字段(如上图所示),但没有任何内容可以将标签链接到(即没有任何内容用于"for"属性,因为组中的每个无线电都有它的仅用于单个单选按钮的值的自有标签)没有"for"属性的标签不会通过可访问性合规性.

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

我曾想过将<legend>标签设计为看起来像是一个标签,并且完全取消了单选按钮组的标签,但这对我来说似乎有点笨拙,并且还会在我的代码中的其他地方引入复杂性(其中依赖<label>元素来做一些漂亮的验证消息标记和其他各种事情)

提前致谢.

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接近,但是你需要构建所有东西以使其可访问,这是一个构建的例子