Analisi rapida dell’accessibilità
La maggior parte dei problemi di accessibilità sono piccole cose lasciate fuori dall’HTML, come un’immagine senza descrizione o un campo senza nome. Questa analisi scarica una pagina, li trova e ti dice quali elementi correggere.
Ogni cosa su una pagina ha bisogno di un nome
Quando guardi una pagina, l’impaginazione fa molto lavoro senza dire una parola. Un’icona a forma di lente accanto a una casella significa “cerca qui”. Un testo grande in grassetto significa “inizia una nuova sezione”. Niente di tutto questo arriva a chi usa uno screen reader, un display braille o il controllo vocale. Il loro software non vede l’impaginazione. Legge l’HTML e da ogni elemento vuole due cose: che cos’è e come si chiama.
Un <img> risponde con il suo attributo alt, un campo di un modulo con la sua <label>, una sezione con il suo titolo. Quando la risposta manca, il software dice “immagine”, “campo di testo” o “link” e va avanti, il che non aiuta nessuno. Le Web Content Accessibility Guidelines (WCAG) trasformano questa idea in regole verificabili, e buona parte di esse si può controllare con un programma.
Cosa verifica l’analisi e quanto costa ogni problema
La pagina parte da 100 punti. Ogni problema ne toglie qualcuno, e un problema che si ripete costa di più, fino a un tetto massimo.
| Problema | Punti tolti |
|---|---|
Nessun lang su <html> | 10 |
Zoom bloccato (user-scalable=no, o maximum-scale sotto 2) | 10 |
<title> vuoto o mancante | 6 |
Immagini senza attributo alt | 4 + 2 per immagine, 20 al massimo |
| Campi di modulo senza etichetta | 5 + 3 per campo, 20 al massimo |
| Link o pulsanti senza nome | 4 + 2 ciascuno, 20 al massimo |
| Nessun titolo | 8 |
Nessun <h1>; livelli di titolo saltati | 4; 2 + 1 per salto, 6 al massimo |
| Testo dei link vago (“clicca qui”, “leggi di più”) | 2 + 1 per link, 8 al massimo |
| Testo con stile inline sotto un contrasto di 4,5:1 | 3 + 2 ciascuno, 10 al massimo |
<iframe> senza title | 2 + 1 ciascuno, 6 al massimo |
Valori id duplicati | 1 + 1 ciascuno, 5 al massimo |
| Audio o video in riproduzione automatica con il suono | 4 |
Nessuna regione <main>; un tabindex sopra 0 | 3 ciascuno |
L’analisi salta gli elementi nascosti con hidden, aria-hidden="true" o un display:none inline, e le immagini segnate role="presentation".
Come leggere il voto
I punti rimasti diventano una lettera: A da 90, B da 80, C da 65, D da 50, F sotto. I problemi in rosso sono barriere, del tipo che impedisce a qualcuno di portare a termine un’operazione. Quelli in ambra rallentano le persone senza fermarle. Sotto ognuno vedi fino a otto degli elementi coinvolti, mostrati come tag con percorso del file, nome del campo, id o classe, così puoi cercarli nei tuoi template.
Una A significa che l’analisi non ha trovato nessuno dei problemi che sa rilevare. I test automatici colgono più o meno un terzo dei veri problemi di accessibilità. Se il tuo testo alternativo è preciso, se l’ordine di lettura ha senso, come si comporta un menu personalizzato con la tastiera: queste cose deve giudicarle una persona.
Correzioni per i problemi che vedrai più spesso
- Immagine senza testo alternativo
- Di’ ciò che l’immagine comunica a chi vede:
<img src="team.jpg" alt="Five engineers around a whiteboard">. Per un elemento decorativo, scrivialt="". Il valore vuoto dice al software di assistenza di saltare l’immagine, e non è la stessa cosa che omettere l’attributo. - Campo senza etichetta
<label for="email">Email</label> <input id="email" type="email">. Un placeholder non conta, perché sparisce al primo tasto premuto.- Link o pulsante con sola icona
<button aria-label="Open menu">…</button>, oppure metti unaltsull’immagine dell’icona al suo interno.- Livello di titolo saltato
- Scegli il livello in base alla struttura (
h2per una sezione,h3al suo interno) e imposta la dimensione nel CSS. - Zoom bloccato
- Riduci il tag viewport a
<meta name="viewport" content="width=device-width, initial-scale=1">.
Cosa questa analisi non può vedere
Il nostro server legge l’HTML che riceve e non esegue JavaScript, quindi tutto ciò che un framework inserisce dopo il caricamento resta fuori dall’esame. Non scarica nemmeno i tuoi fogli di stile. Per questo il contrasto viene misurato solo dove sia il colore del testo sia lo sfondo sono scritti in un attributo style. Per tutto il resto, prova i tuoi colori nel calcolatore del rapporto di contrasto. Per andare più a fondo su una pagina, ascoltala nell’anteprima da screen reader e segui il suo ordine di tabulazione.
Domande frequenti
Un punteggio perfetto significa che il mio sito è conforme alle WCAG?
No. Significa che questa pagina supera i controlli che un programma può eseguire sull’HTML grezzo. La conformità alle WCAG 2.2 di livello AA richiede anche test manuali con tastiera e screen reader, su ogni template del sito.
Che differenza c’è tra un alt vuoto e un alt mancante?
alt="" dice di proposito che l’immagine è decorativa, e gli screen reader la saltano in silenzio. Senza alcun attributo alt, molti screen reader ripiegano sulla lettura del nome del file, qualcosa come “IMG trattino basso 4521 punto jpg”.
Perché un placeholder non viene accettato come etichetta?
Un placeholder sparisce appena il visitatore scrive, quindi chi viene interrotto o usa l’ingrandimento perde di vista cosa chiedeva il campo. Alcuni screen reader non lo annunciano nemmeno. Una <label> visibile resta al suo posto e rende più grande l’area cliccabile.
L’analisi non segnala problemi di contrasto. I miei colori vanno bene?
Non per forza. L’analisi non legge i colori definiti nei fogli di stile, solo quelli impostati direttamente negli attributi style="…". Controlla a mano i colori del testo principale e dei pulsanti nel calcolatore del rapporto di contrasto.
La mia pagina è fatta con React o Vue. Il risultato è affidabile?
Solo se l’HTML viene generato sul server. Se il server invia un documento quasi vuoto e il browser costruisce la pagina con JavaScript, l’analisi vede il documento vuoto e segnala poco o niente.