兩個輸入的單個標籤

我正在向表單中添加一些日期輸入。我有'開始日期'和'結束日期'輸入，但只想使用一個標籤（'日期'）用於兩種輸入。兩個輸入的單個標籤

可以做到這一點嗎？什麼是可訪問性問題？

我目前的想法是有一個標籤'日期'顯示，然後有兩個屏幕閱讀器的每個輸入隱藏標籤等是這樣的路要走嗎？是否有任何大型網站做這種事情的例子（如果可能的話，政府網站）？

這是一個項目，可能是政府機構的用戶，因此有遵守無障礙的嚴格規定。

來源

2013-02-13 AverageMarcus

你如何定義 '使用'？你的意思是點擊標籤應該關注兩個字段（與'for'屬性一樣）？ – BenM 2013-02-13 12:56:01

那麼需要將for屬性設置爲允許輔助技術通知用戶輸入正確等。 – AverageMarcus 2013-02-13 12:57:24

在這種情況下，一些被掀起使用CSS頁面我認爲最好的標記將包裹投入在fieldset，使用「日期」一legend，使用labels兩個inputs和隱藏標籤：

HTML

<fieldset> 
<legend>Dates</legend> 
<label for="startdate">Start Date</label> 
<input type="text" name="startdate" id="startdate" placeholder="Start Date"> 
<label for="enddate">End Date</label> 
<input type="text" name="enddate" id="enddate" placeholder="End Date"> 
</fieldset>

CSS

fieldset { 
    border: none; 
} 
label { 
    margin-left: -999em; 
} 
input { 
    display: block; 
}

Fiddle here

另見：WCAG 2, H71: Providing a description for groups of form controls using fieldset and legend elements

來源

2013-02-14 19:01:27 steveax

這裏的問題是，您只能爲每個標籤指定一個for。我想，爲便於使用，最好在每個日期顯示兩個labels。通過這種方式，任何使用屏幕閱讀器等的人都將獲得每個輸入的有效標籤。

<label for="x">x name</label><input name="x"/> 
<label for="y">y name</label><input name="y"/>

來源

2013-02-13 12:58:08 Liam

您是否建議使用僅供屏幕閱讀器使用的隱藏標籤？ – AverageMarcus 2013-02-13 12:59:30

不是100％確定隱藏標籤上的建議是什麼。如果有些讀者不會閱讀隱藏的值，我不會感到驚訝，我想這也取決於您對隱藏的定義！ – Liam 2013-02-13 13:01:16

這是最容易接近的方法，並且首先避免了創建問題。它在概念上簡單易懂，這也是一項重要的輔助功能。有認知障礙的人需要在解釋預期輸入的文本和實際輸入的控制之間有簡單易懂的關聯。出於這個原因，標籤不應該隱藏在視覺渲染中。 – 2013-02-13 13:34:00

我認爲你最好的選擇是在每個輸入中包含一個標籤。那麼對於你不想竟在頁面上顯示的標籤可以通過簡單

.hide { 
    position: absolute; 
    left: -9999em; 
}

...或類似

來源

2013-02-13 13:00:24

當然'Display：none'會比'position：absolute'更好嗎？ – AverageMarcus 2013-02-13 13:01:36

某些屏幕閱讀器忽略'display：none'元素。 – BenM 2013-02-13 13:01:55

真的嗎？這對我來說是新聞。你有什麼例子嗎？ – AverageMarcus 2013-02-13 13:02:20

兩個輸入的單個標籤

回答

相關問題