Intestazioni ed etichette
Le intestazioni e le etichette dei moduli devono descrivere l'argomento o lo scopo del contenuto che introducono. Non devono essere necessariamente uniche, ma devono essere informative — un'intestazione «Informazioni» o un'etichetta «Campo» non soddisfa questo criterio di successo.
Cosa richiede
Quando una sezione ha un’intestazione o un controllo di modulo ha un’etichetta, il testo deve descrivere effettivamente ciò che segue. Gli utenti di screen reader usano intestazioni ed etichette come indice della pagina — gli utenti di JAWS premono H per saltare da intestazione a intestazione, e la modalità modulo legge ad alta voce le etichette non appena il focus si sposta su ciascun campo. Un testo vago rompe questo intero modello di navigazione.
Il criterio di successo non richiede che le intestazioni esistano ovunque, solo che quelle presenti siano descrittive. (Per i casi in cui le intestazioni sono obbligatorie, si veda il criterio 2.4.10 a livello AAA.)
Come soddisfarlo
- Scrivere intestazioni che nominino la sezione, non l’intenzione progettuale:
"Indirizzo di spedizione"anziché"Sezione 2","Domande frequenti"anziché"Ulteriori informazioni". - Associare ogni controllo di modulo a un
<label>visibile il cui testo descriva il campo. Evitare di usare il placeholder come etichetta, poiché scompare durante la digitazione. - Per le etichette visivamente nascoste (casella di ricerca, pulsanti con sola icona), usare
aria-labelo una classe.visually-hidden, ma rendere l’etichetta specifica. - Quando due intestazioni di una pagina coprono genuinamente lo stesso argomento (ad es. due sezioni «Commenti» su un indice di forum), aggiungere contesto disambiguante:
"Commenti del 14 luglio","Commenti del 15 luglio". - Verificare ogni intestazione o etichetta composta da tre parole o meno — è lì che si concentra la vaghezza.
Errori comuni
- «Informazioni», «Dettagli», «Altro», «Sezione», «Modulo» usati come intestazioni senza ulteriore contesto.
- Etichette di modulo come «Campo 1», «Input», «Digita qui», o nessuna etichetta (solo placeholder).
- Intestazioni di una griglia di card che recitano tutte «Scopri di più» perché derivate da CTA tramite una modifica al template.
- Pagina dei risultati di ricerca in cui ogni intestazione di risultato è la parola letterale «Risultato».
- Tabelle con intestazioni di colonna «Col 1», «Col 2» anziché «Data», «Importo», «Stato».
Perché è importante
Nelle indagini sugli utenti di screen reader condotte da WebAIM, la navigazione tramite intestazioni è costantemente la strategia più comune per orientarsi su una nuova pagina — più frequente della lettura dall’alto verso il basso. Intestazioni vaghe distruggono questa mappa. Etichette vaghe distruggono i moduli: l’utente raggiunge un controllo che dice semplicemente «input» e deve tornare indietro per leggere il testo circostante, che la modalità modulo spesso nasconde.