html - 一个带有两个表单输入的 Html 标签

Question

如果我想将一个标签与两个表单输入相关联，例如两个输入“ExpirationMonth”和“ExpirationYear”的标签的“到期日期”，那么最好的语义方法是什么？

Answer 1

There isn’t a way to associate a label with more than one input field, because a label is, by definition, a label for a single field. The reasons for using a label element are based on such a simple correspondence, so there’s no point in using it for two fields simultaneously.

If you are required to have two input fields, on one hand, and to comply with WCAG 2.0 (which makes label markup mandatory for input boxes, H44) on the other, then you need to have separate labels for each of the boxes.

In practice, it is better to have a single field for month/year input, and then you won’t have this problem. (I’m sure most users will find it more natural to type “10/12” than to type “10”, click on a next input box – or hit TAB, but most users don’t – and then type “12”. And any attempt at auto-tabbing from one field to another will cause confusion.)

Answer 2

有一个使用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/可访问性检查器。