Etichette dei campi

Silktide controlla che ogni campo del modulo e pulsante nelle pagine abbia un nome che il software possa leggere. Le persone che non possono vedere il modulo si basano su questi nomi per sapere cosa richiede ciascun campo.

Un visitatore vedente capisce il significato di un campo dal testo vicino. Questa associazione visiva non ha alcun significato nel codice: il nome deve essere associato al campo stesso, molto spesso con un elemento <label> nell'.

<!-- Problema: il testo sembra un'etichetta ma non è associato al campo -->
<p>Nome completo</p>
<input type="text">

Perché è importante

Un annuncia ogni campo in base al suo mentre il visitatore si sposta all'interno di un modulo. Un campo senza nome viene annunciato semplicemente come "modifica testo": il visitatore deve indovinare cosa digitare dal contesto e, in un modulo più lungo, questo diventa rapidamente impossibile. I campi senza etichetta sono uno dei motivi più comuni per cui un modulo non può essere completato senza vedere, con conseguente perdita di iscrizioni, ordini e richieste di informazioni.

Come risolvere

Associa un <label> a ogni campo, collegandolo tramite ID oppure racchiudendo il campo al suo interno:

<!-- Collegato tramite ID -->
<label for="name">Nome completo</label>
<input type="text" id="name">

<!-- Oppure racchiuso attorno al campo -->
<label>Nome completo <input type="text"></label>

I pulsanti hanno un nome tramite il proprio testo o value: non è necessario alcun elemento label:

<button>Invia messaggio</button>
<input type="submit" value="Invia messaggio">

Quando un'etichetta visibile non è praticabile, usa un attributo come aria-label o aria-labelledby. Tieni presente che questo aiuta solo la : i visitatori vedenti non lo vedranno.

Non fare affidamento sul testo placeholder come etichetta: scompare non appena il visitatore inizia a digitare e non viene considerato coerentemente come un nome.

Come Silktide esegue questo controllo

Trova i controlli dei moduli in ogni pagina: input, aree di testo, menu a discesa e pulsanti, oltre agli elementi a cui viene assegnato un ruolo di controllo del modulo con ARIA (ad esempio role="button" o role="checkbox").
Ignora i controlli che non necessitano di un nome: input nascosti, campi inseriti da widget di terze parti noti (come i servizi o i moduli nascosti aggiunti dagli script di tracciamento e traduzione per il proprio utilizzo) ed elementi il cui ruolo ARIA non richiede un'etichetta.
Determina il nome accessibile di ciascun controllo dalla relativa etichetta, dagli attributi ARIA, dal testo del pulsante o dal valore.
Segnala ogni controllo il cui nome accessibile è vuoto.

Risoluzione dei problemi

Il campo ha del testo accanto

Il testo vicino non assegna un nome a un campo, a meno che non sia collegato nel codice: usa un <label> con un attributo for oppure racchiudi il campo nell'etichetta.

Il campo è decorativo o gestito da un plugin

I campi inseriti da widget che non controlli possono essere difficili da correggere direttamente. Verifica se il plugin offre un'impostazione di accessibilità o un aggiornamento; se il campo non influisce realmente sui visitatori, puoi il risultato.