Analisi di accessibilità web

Come funziona questo controllo

Scanaris analizza l'HTML che la tua pagina serve, senza eseguire JavaScript né aprire un browser, ed esegue otto test di accessibilità che si possono decidere con certezza sul codice. Tre sono di gravità media: che il tag <html> dichiari la lingua con lang, che esista la <meta name="viewport">, e che nessun campo di modulo (input, select, textarea, esclusi quelli nascosti e i pulsanti) sia privo di etichetta accessibile, cioè abbia un <label for>, stia dentro un <label>, o porti aria-label, aria-labelledby o title. Gli altri cinque sono di gravità bassa: immagini senza attributo alt (un alt="" vuoto è valido per quelle decorative; ciò che fallisce è l'assenza dell'attributo), link con href e pulsanti senza testo, senza aria-label e senza un'immagine con alt all'interno, attributi id ripetuti, elementi con tabindex maggiore di zero, e intestazioni da h1 a h6 vuote. Ogni test fallito apre il proprio rilievo con il conteggio.

Perché è importante

Circa il 15 % della popolazione ha qualche disabilità, e molte più persone usano il web con uno screen reader, solo con la tastiera o con lo zoom al massimo in momenti specifici. Per loro, un'immagine senza alt è un buco, un campo senza etichetta è una casella di cui non si sa cosa aspettarsi e un pulsante che è solo un'icona viene annunciato come "pulsante" e basta. Oltre all'etica, è legge: la direttiva europea sull'accessibilità si applica da giugno 2025 alla maggior parte dei servizi digitali delle imprese, e negli Stati Uniti le cause per siti inaccessibili si contano a migliaia ogni anno. Ed è SEO: l'alt, la lingua e la struttura delle intestazioni sono esattamente ciò che Google legge.

Come risolvere

• Lingua: <html lang="it">. In Nuxt si configura in app.head.htmlAttrs o lo mette il modulo i18n; in Next.js, nell'<html> del layout radice; in WordPress lo scrive language_attributes() nel tema.
• Viewport: <meta name="viewport" content="width=device-width, initial-scale=1">. Senza maximum-scale=1 né user-scalable=no, che bloccano lo zoom.
• Etichette dei moduli: un <label for="email"> per ogni campo con il suo id, o il campo dentro il <label>. Se il design non mostra un'etichetta visibile, aria-label="Indirizzo email". Il placeholder non conta: sparisce quando si scrive.
• Immagini: alt descrittivo in quelle informative ("Grafico delle vendite del terzo trimestre"), alt="" in quelle decorative. I componenti immagine di Nuxt e Next.js richiedono l'attributo.
• Link e pulsanti con icona: aria-label="Apri menu", oppure un testo nascosto visivamente con una classe sr-only. Le icone SVG inline portano aria-hidden="true".
• Id duplicati: di solito vengono da componenti ripetuti con l'id fissato a mano. Genera l'id da una prop o usa useId().
• Tabindex positivi: cambiali in 0 e ordina gli elementi nell'HTML nell'ordine in cui vanno percorsi.
• Intestazioni vuote: se servivano per impaginare, sostituiscile con un div; se contengono un'icona, dai loro un testo.

Verifica che sia risolto

curl -s https://tuodominio.it | grep -oE '<html[^>]*>|<meta name="viewport"[^>]*>'
curl -s https://tuodominio.it | grep -oE '<img[^>]*>' | grep -vc 'alt='

Il primo deve mostrare lang e il viewport; il secondo deve dare 0. Per il resto, il pannello Lighthouse di Chrome (scheda Accessibilità) o l'estensione axe DevTools ti elencano ogni elemento con il suo selettore.

Domande frequenti

Superare questi otto test significa che il mio sito è accessibile?

No. Sono gli otto che si possono verificare con certezza senza browser. Il contrasto dei colori, il focus visibile, l'ordine di lettura reale e i componenti costruiti con JavaScript richiedono una revisione con strumenti del browser e, per qualcosa di serio, un audit umano. Superarli significa però che non commetti gli errori più frequenti e più facili da evitare.

La mia app è una SPA e l'HTML iniziale è quasi vuoto.

Allora il controllo vede poco, e Google pure. È una ragione in più per renderizzare lato server almeno il contenuto principale; lo spiega contenuto senza JavaScript.

Perché l'alt vuoto è corretto e l'assenza di alt no?

Perché alt="" dice allo screen reader "salta questa immagine, è decorativa", mentre senza attributo il lettore legge il nome del file, che di solito è qualcosa come IMG_4821.jpg. La struttura delle intestazioni, che influisce sulla navigazione con screen reader, la esamina anche intestazioni.