Una <label> fornisce a un controllo modulo un nome accessibile e un'area di clic più ampia. Esistono due modi per associarle, e farlo è essenziale per l'accessibilità.
Metodo 1: for + id (esplicito)
html
Email address
Una <label> fornisce a un controllo modulo un nome accessibile e un'area di clic più ampia. Esistono due modi per associarle, e farlo è essenziale per l'accessibilità.
for + id (esplicito)Email address
L'attributo for dell'etichetta corrisponde all'id dell'input. Funziona anche se non sono adiacenti nel markup.
<label>
Email address
<input type="email" />
</label>
L'input è annidato all'interno dell'etichetta — non è necessario alcun id.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
Un placeholder scompare quando l'utente digita e non viene annunciato in modo affidabile — non usarlo mai come unica etichetta.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Utilizza aria-label (o aria-labelledby) solo quando un'etichetta visibile genuinamente non è possibile.
Le etichette correttamente associate sono una delle pratiche di accessibilità più impattanti per i moduli — danno a ogni controllo un nome per le tecnologie assistive e ingrandiscono le aree di clic per tutti.
Preferisci un vero <label>; ricorri a aria-label solo quando necessario, e non fare mai affidamento su placeholder come etichetta.