一個帶有兩個輸入輸入的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/輔助功能檢查。