一个 HTML 标签对应两个表单输入框

Question

如果我想将一个标签与两个表单输入关联起来，比如说将标签“过期日期”与两个输入框“ExpirationMonth”和“ExpirationYear”关联起来，最好的语义化方法是什么？

- Mike Flynn

---

像这样的吗？http://jsfiddle.net/9rexE/ - Blender

也许，那是我目前为止的成果。 - Mike Flynn

Answer 1

使用 title 和 aria-labelledby 属性可以解决此问题。

以下是一个示例：

<span id="bday">Birthday</span>:
<select name="bday_month" title="Month of Birth" aria-labelledby="bday">
<option 1>January
  ...
<option 12>December
</select>
<select name="bday_day" title="Day of Birth" aria-labelledby="bday">
<option 1>1
  ...
<option 31>31
</select>

这个“通过”了http://wave.webaim.org/无障碍检查器。

- John Hascall

Answer 2

由于定义，标签只能与一个输入字段关联，因此没有办法将标签与多个输入字段关联起来。使用元素的原因基于这样一个简单的对应关系，因此在两个字段上同时使用它是没有意义的。

如果你需要有两个输入字段，并且需要遵守WCAG 2.0（使框的标记成为必需，H44），那么你需要为每个框都有单独的标签。

实际上，最好只有一个月/年输入字段，这样就不会有这个问题。（我相信大多数用户更自然地输入“10/12”而不是输入“10”，点击下一个输入框 - 或按TAB键，但大多数用户不会 - 然后输入“12”。任何尝试从一个字段自动跳到另一个字段都会引起混乱。）

- Jukka K. Korpela

---

显然，在使用标签不方便时，使用标题是一个有效的替代方案。https://www.w3.org/TR/2012/NOTE-WCAG20-TECHS-20120103/H65.html - John Hascall