Accessibilità Web

Cos'è l'accessibilità web

L'accessibilità web (la trovi abbreviata in a11y) è costruire un sito che si possa usare a prescindere da come funziona il corpo di chi lo apre: disabilità visive, uditive, motorie, cognitive. Dentro però ci finiscono anche tutte le difficoltà temporanee di una giornata normale, dalla connessione che va a singhiozzo al sole in faccia al braccio ingessato.

L'Organizzazione Mondiale della Sanità conta più di un miliardo di persone che vivono con una forma di disabilità; in Italia l'Istat parla di circa 3 milioni di persone con disabilità grave. Sono numeri che stanno fuori da qualsiasi nicchia: è il pubblico che stai escludendo mentre credi di parlare a tutti. In aula l'obiezione è sempre la stessa: «i miei clienti ci vedono bene». Poi chiedo di aprire il proprio sito e di usarlo senza mouse, solo con la tastiera, e il giro si ferma prima di quanto si pensi.

«La rampa davanti alla porta l'hanno messa per la carrozzina, e la usano il passeggino, il carrello della spesa e chi arriva con la valigia. Sul web funziona allo stesso modo.»

Oltre alla questione etica ci sono ritorni che si misurano: i contenuti strutturati bene piacciono ai motori di ricerca e aiutano la SEO, i form chiari alzano il tasso di conversione, e la conformità ti tiene fuori dai contenziosi.

Le linee guida WCAG 2.1 e 2.2

Le WCAG (Web Content Accessibility Guidelines) sono lo standard internazionale di riferimento per l'accessibilità web, pubblicate dal W3C. Le versioni attuali sono la WCAG 2.1 (2018) e la WCAG 2.2 (2023), che estendono e aggiornano le linee guida precedenti.

Le WCAG stanno in piedi su quattro principi, che in inglese fanno l'acronimo POUR:

• Percepibile: Le informazioni e i componenti dell'interfaccia devono essere presentati in modo che gli utenti possano percepirli (testo alternativo per le immagini, sottotitoli per i video, contrasto sufficiente)
• Utilizzabile: I componenti dell'interfaccia e la navigazione devono essere utilizzabili (navigazione da tastiera, tempo sufficiente per leggere, nessun contenuto che provochi crisi epilettiche)
• Comprensibile: Le informazioni e il funzionamento dell'interfaccia devono essere comprensibili (testi leggibili, comportamento prevedibile, assistenza nell'inserimento dati)
• Robusto: I contenuti devono essere abbastanza robusti da poter essere interpretati da diverse tecnologie assistive, inclusi gli screen reader

Le novità della WCAG 2.2 includono criteri specifici per la navigazione mobile, l'autenticazione accessibile (senza test cognitivi come i CAPTCHA complessi) e una maggiore attenzione ai target di tocco con dimensioni minime di 24x24 pixel.

ARIA e HTML semantico

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) è una specifica che aggiunge attributi semantici agli elementi HTML, così le tecnologie assistive interpretano correttamente i componenti interattivi complessi.

Prima di mettere mano ad ARIA conviene usare l'HTML che il lavoro lo fa già da solo:

• Usa <nav>, <main>, <header>, <footer>, <aside> per strutturare la pagina
• Usa <h1>-<h6> in ordine gerarchico corretto
• Usa <button> per le azioni e <a> per i link (mai il contrario)
• Usa <table> con <thead>, <tbody> e <th> per i dati tabulari
• Usa <label> associato ai campi dei form tramite l'attributo for

Gli attributi ARIA più utilizzati includono:

• aria-label: Fornisce un'etichetta testuale a un elemento interattivo
• aria-describedby: Collega un elemento a una descrizione più dettagliata
• aria-hidden="true": Nasconde un elemento decorativo agli screen reader
• role="navigation", role="alert": Definisce il ruolo di un elemento
• aria-live="polite": Comunica aggiornamenti dinamici del contenuto

La prima regola di ARIA è: non usare ARIA se puoi ottenere lo stesso risultato con HTML semantico nativo. ARIA è un complemento, non un sostituto.

Design accessibile: colori, contrasti e tipografia

Metà dell'accessibilità la decide il design, prima che venga scritta una riga di codice. Il criterio su cui casca più gente è il contrast ratio fra testo e sfondo:

• Testo normale: Rapporto minimo di 4.5:1 (livello AA) o 7:1 (livello AAA)
• Testo grande (18px+ o 14px+ bold): Rapporto minimo di 3:1 (AA) o 4.5:1 (AAA)
• Elementi grafici e componenti UI: Rapporto minimo di 3:1 rispetto ai colori adiacenti

Per misurare il contrasto: WebAIM Contrast Checker, Colour Contrast Analyser, Lighthouse dentro Chrome, axe DevTools. Il contrasto in Google Analytics 4 non lo vedi, però i report ti dicono su quali pagine vale la pena controllare per prime.

Altre cose che sistemo quasi sempre quando guardo un sito:

• Non comunicare informazioni solo attraverso il colore (usa anche icone, testo o pattern)
• Mantieni una dimensione del testo base di almeno 16px
• Assicurati che il focus degli elementi interattivi sia sempre visibile
• Prevedi spaziatura sufficiente tra gli elementi cliccabili (almeno 44x44 pixel di area di tocco)

Contenuti multimediali e form accessibili

I contenuti multimediali richiedono attenzione specifica per essere accessibili:

• Immagini: Ogni immagine significativa deve avere un attributo alt descrittivo. Le immagini decorative usano alt=""
• Video: Fornisci sottotitoli sincronizzati (closed captions) e una trascrizione testuale. Per gli utenti non vedenti, aggiungi l'audio-descrizione
• Audio: Offri sempre una trascrizione testuale del contenuto audio

Per i form accessibili, segui queste regole:

• Ogni campo deve avere un <label> visibile e associato
• I messaggi di errore devono essere chiari, specifici e collegati al campo tramite aria-describedby
• Il campo con errore deve ricevere il focus automaticamente
• Usa autocomplete per i campi comuni (nome, email, indirizzo)
• Non utilizzare solo il colore rosso per indicare errori: aggiungi un'icona e un testo esplicativo
• I CAPTCHA devono avere un'alternativa accessibile (audio o logica semplice)

Normativa europea EAA 2025

L'European Accessibility Act (EAA), recepito in Italia con il D.Lgs. 82/2022, è entrato in vigore il 28 giugno 2025 e impone requisiti di accessibilità per prodotti e servizi digitali offerti da aziende private con fatturato superiore a 500 milioni di euro o più di 250 dipendenti.

La normativa richiede la conformità almeno al livello AA delle WCAG 2.1. Le sanzioni per la non conformità variano da paese a paese, ma possono includere multe e l'obbligo di rendere accessibili i servizi entro termini stringenti.

Per adeguarsi, è consigliabile:

• Effettuare un audit di accessibilità del sito con strumenti automatici (axe, WAVE, Lighthouse) e test manuali
• Pubblicare una dichiarazione di accessibilità che descriva il livello di conformità e le eventuali limitazioni
• Formare chi sviluppa e chi fa design: quasi tutte le barriere nascono da abitudini, e le abitudini si cambiano spiegandole
• Testare con utenti reali che utilizzano tecnologie assistive (screen reader, navigazione da tastiera, switch)
• Integrare i controlli di accessibilità nel processo di sviluppo (CI/CD) per evitare regressioni

L'accessibilità non si «fa» una volta. Ogni pagina nuova, ogni funzione, ogni restyling la può rompere di nuovo, quindi conviene trattarla come la sicurezza e le performance: un controllo dentro il lavoro di tutti i giorni. L'audit una volta all'anno arriva sempre dopo il danno.