Etichetta singola per due ingressi

Question

Attualmente sto aggiungendo un input di data a un modulo. Ho un input "Start Date" e "End Date" ma voglio solo usare una singola etichetta ("Date") per entrambi gli input.

È possibile farlo? Quali sono i problemi di accessibilità?

Il mio pensiero corrente è di avere un'etichetta "Date" che viene mostrata, quindi avere due etichette nascoste per ogni input per screen reader ecc. È questa la strada da percorrere? Ci sono esempi di siti di grandi dimensioni che fanno questo genere di cose (siti web governativi se possibile)?

Questo è un progetto che può essere utilizzato da un'agenzia governativa, pertanto esistono regole rigorose in merito all'accessibilità.

Answer 1

In questo caso penso che il miglior margine di profitto sarebbe quella di avvolgere gli ingressi in un fieldset, utilizzare un legend per "Date", utilizzare labels sia per inputs e nascondere le etichette:

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

vedi anche: WCAG 2, H71: Providing a description for groups of form controls using fieldset and legend elements

Answer 2

Il problema qui è che è possibile specificare solo uno for per ciascuna etichetta. Immagino, per motivi di accessibilità sarebbe meglio mostrare due labels uno per ogni data. In questo modo chiunque utilizzi uno screen reader, ecc. Otterrà un'etichetta valida per ogni input.

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

Answer 3

penso che la soluzione migliore sarebbe essere quello di includere un'etichetta con ogni ingresso. Poi per l'etichetta che non si desidera visualizzare in realtà sulla pagina può essere semplicemente scatenare pagina utilizzando CSS tramite

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

... o qualcosa di simile