Avvolgimento di un elemento etichetta all'interno di un elemento legenda

Question

Non ho mai avuto motivo di inserire un elemento etichetta all'interno di un elemento legenda (non ci ho mai pensato o visto di averlo fatto). Ma con il design che sto implementando, è allettante farlo.

Ecco cosa sono tentato di fare:

<fieldset>
<legend><label for="formInfo">I would like information on</label></legend>
<select id="formInfo">
    <option value="Cats">Cats</option>
    <option value="Dogs">Dogs</option>
    <option value="Lolz">Lolz</option>
</select>
</fieldset>

Funziona come previsto (facendo clic sull'etichetta si concentra l'input corrispondente) in Firefox3, Safari, Opera e IE6 / 7 e supera la convalida, ma mi chiedo solo se ci sono ragioni conosciute (accessibilità? semantica? browser problemi) perché questo non dovrebbe essere fatto

Answer 1

Dov'è il tuo </fieldset>?

Semanticamente, legend descrive un fieldset , proprio come label descrive un singolo campo.

I set di campi dovrebbero essere usati per raggruppare campi semanticamente correlati (ad esempio, un " indirizzo " fieldset potrebbe avere campi di input per via, città e paese).

Supponendo che tu abbia più di un campo nel set di campi, quindi fare ciò che suggerisci non ha senso semanticamente: devi creare un testo di legenda separato che descriva il set di campi, quindi un'etichetta per ciascun campo.

Se hai un solo campo, non hai bisogno di fieldset o legenda.

Quindi, in sostanza, non dovresti fare quello che stai facendo.

Se lo stai facendo per avere elementi extra a cui allegare regole CSS o eventi Javascript, stai meglio usando elementi generici come div e span che non confondano la sintesi vocale e altri agenti utente non visivi.

Vale a dire, inserire un select o <=> è effettivamente neutro in termini di accessibilità / semantica (non implica nulla) rispetto all'uso improprio di un elemento semantico (anche se solo leggermente, come in questo caso), che è potenzialmente fuorviante . Immagina anche lo scenario best case per il tuo layout in un browser di sintesi vocale: il testo viene letto ad alta voce due volte, una volta come legenda e una volta come etichetta: perché qualcuno dovrebbe desiderare la frase quot; Vorrei informazioni su " leggere ad alta voce due volte per loro? Soprattutto perché ha senso solo nel contesto delle scelte nel controllo <=>.

Answer 2

bene, l'elemento etichetta stesso sembra a posto - è la descrizione del " formInfo " elemento, quindi non è un problema. Semanticamente, tuttavia, cosa sta dicendo questo sull'elemento legend? Dovrebbe essere una didascalia per l'intero fieldset ....