現在、フォームに日付入力を追加しています。「開始日」と「終了日」の入力がありますが、両方の入力に 1 つのラベル (「日付」) のみを使用したいと考えています。
これを行うことは可能ですか？アクセシビリティの問題は何ですか?
私の現在の考えは、「日付」というラベルを表示し、スクリーン リーダーなどの入力ごとに 2 つの非表示のラベルを表示することです。この種のことを行っている大規模な Web サイトの例はありますか (可能であれば政府の Web サイト)?
これは政府機関が使用する可能性のあるプロジェクトであるため、アクセシビリティに準拠するための厳しい規則があります。
この場合、最良のマークアップは、入力を a でラップし、「日付」にfieldsetaを使用し、両方に使用して、ラベルを非表示にすることだと思います。legendlabelsinputs
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;
}