一个带有两个输入输入的Html标签

Question

如果我想将一个标签与两个输入相关联，对于两个输入“ExpirationMonth”和“ExpirationYear”的标签说“过期日期”，那么执行此操作的最佳语义方法是什么？

Answer 1

没有办法将一个标签与多个输入字段相关联，因为标签是definition，这是单个字段的标签。使用label元素的原因是基于这样一个简单的对应关系，因此在两个领域同时使用它没有意义。

如果需要有两个输入字段，一方面，并​​遵守在另一WCAG 2.0（这使得label标记强制输入框，H44），那么就需要为每个单独的标签那些盒子。

实际上，最好有一个月/年输入一个字段，然后你就不会有这个问题。 （我相信大多数用户会觉得输入“10/12”比输入“10”更自然，点击下一个输入框或点击TAB，但大多数用户不会 - 然后输入“12” 。而在自动Tab键从一个领域到另一个任何企图都会引起混乱。）

Answer 2

有使用冠军和唱段，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/辅助功能检查。