Utilizzo di "etichetta per" sui pulsanti di opzione

136

Quando si utilizza il parametro "etichetta per" sui pulsanti di opzione, per essere conforme a 508 *, è corretto quanto segue?

 <label for="button one"><input type="radio" name="group1" id="r1" value="1" /> button one</label>

o è questo?

 <input type="radio" name="group1" id="r1" value="1" /><label for="button one"> button one</label>

Il motivo che chiedo è che nel secondo esempio, "etichetta" comprende solo il testo e non il pulsante di opzione effettivo.

* La sezione 508 della legge sulla riabilitazione del 1973 impone alle agenzie federali di fornire software e accessibilità del sito Web alle persone con disabilità.

— Niico
fonte

Risposte:

216

Ce l'hai quasi fatta. Dovrebbe essere questo:

<input type="radio" name="group1" id="r1" value="1" />
<label for="r1"> button one</label>

Espandi frammento

Il valore in fordovrebbe essere l'id dell'elemento che stai etichettando.

— Marc W.
fonte

La tua risposta è ovviamente vera, ma Martha ha la risposta giusta. Entrambi gli esempi di Martha sono HTML5 perfettamente validi. E per esempio se vuoi che tutto sia in un frame, è più facile modellare il secondo usando css. Se vuoi che le etichette siano da qualche altra parte, prima. Ma entrambi sono OK. I migliori saluti!

— Jacek Kowalewski,

Hmm .. Come si fa a spostare un'etichetta tra due pulsanti di opzione? Non puoi avere due ID identici ...: /

— Nils Sens

@NilsSens Ogni radio e coppia di etichette dovrebbe avere ID univoci che non devono mai condividere ID

— Daniel Waters,

@NilsSens Commuta tra 2 pulsanti di opzione e hanno solo 1 etichetta? Sembra invece un caso chiaro usare una casella di controllo: D

— T_D

Ah, no, ciò che intendevo era una superetichetta che attiva / disattiva i pulsanti di opzione. Tipo: categoria di frutti preferiti e quando fai clic su quello, commuti tra idk "banana" e "fragola" Perché, perché imporre il movimento del mouse UX quando puoi semplicemente attivare le opzioni. Oggi userei JS solo per codificarlo a mano, ma sarebbe interessante sapere se esiste un solo modo CSS :)

— Nils Sens

Entrambe le strutture sono valide e accessibili, ma l' forattributo dovrebbe essere uguale a quello iddell'elemento input:

<input type="radio" ... id="r1" /><label for="r1">button text</label>

<label for="r1"><input type="radio" ... id="r1" />button text</label>

L' forattributo è facoltativo nella seconda versione (etichetta contenente input), ma in IIRC c'erano alcuni browser meno recenti che non rendevano selezionabile il testo dell'etichetta a meno che non lo includessi. La prima versione (etichetta dopo l'input) è più semplice da applicare allo stile con i CSS usando il selettore fratello adiacente +:

input[type="radio"]:checked+label {font-weight:bold;}

— Martha
fonte

Vero, sebbene nel secondo esempio, l'attributo "for" non sia richiesto.

— Ismaele,

Penso che esistessero alcune versioni del browser che rendevano "cliccabile" il testo del pulsante solo se si utilizzava l'attributo 'for', ovvero non bastava avvolgere l'input all'interno dell'etichetta.

— Martha,

@Martha - Sai quali browser?

— Kirkland,

@Kirkland - w3.org/TR/html401/interact/forms.html#h-17.9 sembra indicare che il secondo modulo è valido, ma diverse fonti indicano che il supporto potrebbe non essere universale. Probabilmente è meglio fornire l' forattributo in ogni caso.

— Ismaele,

@RalphDavidAbernathy Sì, le stesse regole si applicano per le caselle di controllo.

— Ismaele,

(In primo luogo leggere le altre risposte, che ha spiegato l' fornei <label></label>tag. Ebbene, sia le cime risposte sono corrette, ma per la mia sfida, è stato quando si dispone di più caselle, è necessario selezionare per loro un nome comune come name="r1" , ma con differenti ids id="r1_1" ... id="r1_2"

In questo modo la risposta è più chiara e rimuove anche i conflitti tra nome e ID.

Sono necessari ID diversi per le diverse opzioni della radio box.

<input type="radio" name="r1" id="r1_1" />

       <label for="r1_1">button text one</label>
       <br/>
       <input type="radio" name="r1" id="r1_2" />

       <label for="r1_2">button text two</label>
       <br/>
       <input type="radio" name="r1" id="r1_3" />

       <label for="r1_3">button text three</label>

Espandi frammento

— Ebrahim
fonte