2つの入力の単一ラベル

Question

現在、フォームに日付入力を追加しています。私は '開始日'と '終了日'入力を持っていますが、両方の入力に単一のラベル（ '日付'）を使用したいだけです。

これは可能ですか？アクセシビリティに関する懸念事項は何ですか？

私の現在の考え方は、スクリーンリーダーのための入力ごとに2つの隠れたラベルが表示されているラベル「日付」を持つことです。これは行く方法ですか？このようなことをしている大規模なウェブサイトの例はありますか（可能であれば政府のウェブサイト）？

これは政府機関のユーザーである可能性があるプロジェクトであり、アクセシビリティに準拠した厳しい規則があります。

Answer 1

似たような経由でCSSを使用してページをオフに設定することができ、私は最高のマークアップを考えます、fieldsetで入力を包む「日付」のlegendを使用し、両方のinputsためlabelsを使用してラベルを非表示にするには、次のようになります。

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

Answer 2

ここで問題となるのは、各ラベルに1つのforしか指定できないことです。私はアクセシビリティのために、日付ごとに1つずつlabelsを表示するのが最善であると思います。このように、スクリーンリーダーなどを使用する人は、各入力に対して有効なラベルを取得します。

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

Answer 3

私はあなたの最善の策は、各入力にラベルを含めることです。そして、あなたが実際にページに表示したくないラベルに単に

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

...またはこの場合