Questo controllo contrassegna i controlli in cui gli utenti (e le API) non possono determinare in modo affidabile lo scopo del campo. Ogni controllo interattivo necessita di un nome accessibile, solitamente da un'etichetta visibile associata, aria-labelledby, o, solo quando non esiste un'etichetta visibile, aria-label.
I controlli automatizzati confrontano ciascun controllo del modulo con le regole di etichettatura di WCAG: i controlli dovrebbero avere un nome determinabile a livello di codice che corrisponda a ciò che vedono gli utenti vedenti (o un testo alternativo intenzionale quando non viene utilizzata alcuna etichetta visibile).
Il report elenca elementi concreti (ad esempio input senza etichetta corrispondente o ID duplicati che interrompono l'associazione delle etichette). Correggi prima queste istanze, quindi esegui nuovamente la scansione per verificare che l'avviso venga cancellato.
Nel report, usate questo elemento come evidenza. Non trattatelo come regola autonoma a meno che il contesto della pagina non supporti la stessa conclusione.
Come interpretarlo
Ogni campo di testo, selezione, area di testo e controllo personalizzato ha un'<label> visibile legata a for/id, un'<label> che avvolge, aria-labelledby che punta al testo visibile o un aria-label documentato quando non è possibile alcuna etichetta visibile.
I gruppi di campi correlati utilizzano fieldset e legenda (o un modello di raggruppamento equivalente) in modo che la relazione sia chiara.
I pulsanti di sole icone includono un nome accessibile (testo visivamente nascosto, aria-label o aria-labelledby).
Modello
Quando usarlo
<label for="id"> + input id
Predefinito per singoli campi; ideale per screen reader e controllo vocale.
Avvolgimento <etichetta>
Markup semplice quando l'etichetta racchiude esattamente un controllo.
aria-labelledby
Quando il testo visibile altrove nella pagina nomina il campo (deve fare riferimento agli ID degli elementi).
aria-label
Raro: nessun testo visibile; mantieni i fili brevi e prova con una vera tecnologia assistiva.
No. I segnaposto scompaiono quando il campo ha un valore e vengono spesso saltati o difficili da sentire nella tecnologia assistiva. Utilizza un'etichetta visibile persistente o un nome programmatico equivalente.
Quando è accettabile aria-label?
Utilizza aria-label solo quando non è presente testo visibile adatto a cui fare riferimento e l'aggiunta di testo visibile interromperebbe il design in un caso raro e documentato: preferisci etichette visibili per quasi tutti i moduli.