Come rendere un sito web accessibile: guida 2026

Cosa significa sito accessibile

Un sito accessibile permette a persone con capacità visive, uditive, motorie o cognitive diverse di percepire contenuti, usare controlli e completare attività. Migliora anche situazioni temporanee: braccio immobilizzato, schermo al sole, connessione lenta, audio non disponibile o dispositivo piccolo.

Le Web Content Accessibility Guidelines 2.2 organizzano il lavoro secondo quattro principi: contenuto percepibile, interfaccia utilizzabile, informazioni comprensibili e tecnologia robusta. I criteri sono verificabili e divisi nei livelli A, AA e AAA. Non basta superare uno scanner: molti requisiti dipendono dal significato, dall’ordine e dall’uso reale.

L’obiettivo non è aggiungere una modalità separata. È costruire lo stesso servizio digitale affinché più persone possano usarlo, con adattamenti compatibili con browser e tecnologie assistive.

Obblighi in Italia: mappa prima di dichiarare conformità

Gli obblighi dipendono da soggetto, servizio, dimensione e date applicabili. La Legge 4/2004 disciplina l’accessibilità per pubbliche amministrazioni e soggetti inclusi nel suo perimetro. Per prodotti e servizi coperti dall’European Accessibility Act, la Direttiva (UE) 2019/882 è stata recepita in Italia con il Decreto legislativo 82/2022.

Tra i servizi elencati dalla disciplina europea rientrano, a determinate condizioni, servizi di commercio elettronico e altre categorie specifiche. Esistono definizioni, esclusioni e regole transitorie: non è corretto concludere che ogni sito privato abbia lo stesso obbligo. Le Linee Guida AgID sull’accessibilità dei servizi offrono indicazioni operative, ma il perimetro concreto richiede una valutazione competente.

La disciplina si applica, in generale, ai servizi coperti forniti ai consumatori dopo il 28/06/2025. Il D.Lgs. 82/2022 non si applica alle microimprese che forniscono servizi; restano da verificare le definizioni, i regimi transitori e le altre norme applicabili al caso concreto.

Se comunichi un livello di conformità, conserva evidenze: pagine campionate, criteri verificati, problemi noti, strumenti, tecnologie assistive e data del test. Evita badge o formule assolute non supportate. L’accessibilità cambia quando cambiano template, contenuti, plugin e servizi esterni.

Parti da un inventario e dai flussi, non dalla home

Elenca template e componenti: home, articolo, categoria, ricerca, form, area riservata, checkout, modale, menu, tab, accordion, player, PDF. Poi identifica flussi critici e varianti: errore, campo obbligatorio, sessione scaduta, pagamento rifiutato, risultato vuoto.

Scegli un campione rappresentativo invece di testare casualmente pagine simili. Il campione include:

• almeno una pagina per template;
• componenti interattivi e loro stati;
• contenuti lunghi, immagini, tabelle e video;
• un percorso completo per ogni conversione importante;
• pagine generate da CMS e contenuti inseriti dagli editor;
• servizi esterni incorporati, come mappe, chat o pagamenti.

Assegna gravità in base all’impatto. Un pulsante irraggiungibile che blocca l’acquisto viene prima di una piccola imperfezione su una pagina secondaria.

Struttura semantica: il fondamento

Usa elementi HTML secondo funzione: intestazioni ordinate, regioni come header, nav, main e footer, liste per gruppi, button per azioni e link per navigare. Un elemento visivamente simile a un pulsante ma costruito con un div può non avere nome, ruolo, stato o comportamento da tastiera.

Ogni pagina dovrebbe avere titolo descrittivo, un h1 coerente e gerarchia comprensibile anche senza stile. I landmark aiutano a saltare tra aree; uno skip link permette di evitare menu ripetitivi. Lingua della pagina e cambi di lingua devono essere dichiarati perché la pronuncia sia corretta.

ARIA integra HTML quando un componente complesso non può essere rappresentato con elementi nativi. Non ripara una struttura sbagliata. Prima scegli controllo nativo, poi aggiungi attributi necessari e testa nome, ruolo, valore e stato nell’albero di accessibilità.

Tastiera e focus: prova il sito senza mouse

Parti dall’inizio e usa Tab, Shift+Tab, Invio, Spazio e frecce dove previste. Devi vedere sempre dove si trova il focus. L’ordine deve seguire lettura e azione, senza salti inattesi o elementi invisibili raggiungibili.

Menu, modali e pannelli richiedono gestione esplicita. Quando una modale si apre, il focus entra in un punto sensato; resta nel dialogo finché è attivo; alla chiusura torna al controllo che l’ha aperto. Escape dovrebbe chiudere quando appropriato. Contenuto dietro la modale non deve restare interattivo.

Non rimuovere l’outline senza un’alternativa evidente. Il focus deve distinguersi su sfondi chiari e scuri. Aree cliccabili troppo piccole, azioni disponibili solo al passaggio del mouse e gesture senza alternativa rendono il flusso fragile anche su mobile.

Form accessibili: etichette, istruzioni ed errori

Ogni campo ha bisogno di un’etichetta programmaticamente associata. Il placeholder non basta: scompare durante la scrittura e spesso ha contrasto ridotto. Raggruppa opzioni correlate con fieldset e legend; indica formato ed esempio prima dell’errore quando l’input è particolare.

Non comunicare un errore solo con il rosso. Scrivi cosa è successo e come correggerlo, collega il messaggio al campo e porta l’attenzione al riepilogo quando l’invio fallisce. Conserva i valori validi: costringere a ricompilare tutto aumenta il rischio di abbandono.

Per l’autenticazione e i pagamenti, evita limitazioni non necessarie all’uso dei password manager, del copia e incolla e del completamento automatico. Dai tempo sufficiente e consenti di estenderlo quando possibile. Prima di un’azione importante, mostra un riepilogo e la possibilità di correggere.

Contrasto, zoom e reflow

Misura il contrasto di testo, icone funzionali, bordi necessari e stati del focus. Il valore corretto dipende da dimensione e funzione secondo il criterio WCAG pertinente. Controlla stati normali, hover, focus, disabilitato ed errore; una palette può funzionare in una card e fallire sopra un’immagine.

Verifica separatamente il ridimensionamento del testo al 200% e il reflow a 320 CSS pixel, equivalente a una viewport iniziale di 1280 CSS pixel ingrandita al 400%. Contenuti e controlli non devono sovrapporsi o scomparire; il contenuto deve rifluire senza scorrimento orizzontale in due direzioni, salvo elementi che lo richiedono per natura, come alcune tabelle o mappe.

Non bloccare lo zoom sui dispositivi mobili. Evita altezze fisse per i testi dinamici. La spaziatura, l’interlinea e la larghezza delle righe influenzano la leggibilità; devono resistere alle preferenze dell’utente e alle traduzioni più lunghe.

Immagini, video, link e linguaggio

Un testo alternativo descrive funzione o informazione dell’immagine nel contesto. Un’immagine decorativa usa alt vuoto; un grafico richiede sintesi e dati essenziali nel testo; un pulsante immagine deve comunicare l’azione. Ripetere il nome del file o iniziare sempre con «immagine di» aggiunge rumore.

Video preregistrati con parlato richiedono sottotitoli accurati quando applicabile; contenuti visivi essenziali possono richiedere audiodescrizione o alternativa equivalente. Una trascrizione agevola la ricerca e la consultazione, ma non sostituisce automaticamente tutti i requisiti del media.

I link devono avere senso fuori dal paragrafo. «Scarica il listino PDF» è più utile di «clicca qui». Indica formato e dimensione quando rilevanti. Titoli, istruzioni e pulsanti usano parole coerenti: una persona non dovrebbe indovinare se «continua», «conferma» e «invia» rappresentano azioni diverse.

Come testare: automazione più verifica manuale

Scanner e audit del browser trovano problemi deterministici: attributi mancanti, alcuni contrasti, nomi duplicati o struttura incompleta. Sono utili in sviluppo continuo, ma non possono giudicare se un alt è pertinente, se l’ordine ha senso o se un messaggio aiuta a recuperare un errore.

La guida W3C alla valutazione dell’accessibilità raccomanda una combinazione di metodi. Per un controllo operativo:

1. definisci versione WCAG, livello, campione e browser;
2. esegui scanner automatici e rimuovi falsi positivi;
3. percorri ogni flusso con tastiera e zoom;
4. ispeziona albero di accessibilità, nomi, ruoli e stati;
5. prova lettore di schermo con combinazioni documentate;
6. registra criterio, evidenza, impatto e correzione;
7. ripeti il test dopo la modifica per evitare regressioni.

I test con persone con disabilità offrono conoscenze che la sola conformità tecnica non può fornire. Vanno pianificati in modo rispettoso, con compiti realistici e compenso appropriato.

Perché un overlay non basta

Un overlay può cambiare colori, dimensioni o aggiungere controlli, ma non conosce l’intento editoriale, il flusso aziendale e il significato di ogni componente. Non può trasformare in modo affidabile un checkout confuso, scrivere alternative pertinenti o definire correttamente tutte le interazioni personalizzate.

La correzione duratura avviene nel design system, nei template, nel codice e nelle regole del CMS. Quando un componente viene sistemato alla fonte, il beneficio raggiunge tutte le pagine che lo usano e può essere protetto da test. Qualunque tecnologia aggiuntiva deve essere valutata per compatibilità, privacy, prestazioni e impatto sulle tecnologie assistive.

Dichiarazione, redazione e manutenzione

Una dichiarazione di accessibilità, quando richiesta, deve riflettere lo stato reale, il metodo di valutazione, i contenuti non accessibili e il canale di contatto secondo il modello applicabile. Non copiarla da un altro sito. Anche quando non è obbligatoria, pubblicare i limiti noti e un contatto utile migliora la trasparenza.

Inserisci controlli nel lavoro quotidiano: componenti accessibili nel design system, lint e test automatici in CI, checklist per editor, verifica prima del rilascio e audit periodici. Un’immagine senza alt o un titolo saltato spesso entra dal CMS, non dal codice: formazione e vincoli editoriali sono parte della soluzione.

Monitora le segnalazioni senza chiedere diagnosi mediche. Raccogli pagina, azione, dispositivo e problema incontrato; rispondi con tempi e stato. Le correzioni urgenti che bloccano un servizio vengono prima dei miglioramenti cosmetici.

Piano di intervento su un sito esistente

1. scopri: inventario, obblighi, utenti e flussi essenziali;
2. misura: audit campionato con criteri ed evidenze;
3. prioritizza: blocchi, componenti condivisi e contenuti;
4. correggi: design system, template, codice e CMS;
5. verifica: test automatici, manuali e tecnologie assistive;
6. mantieni: ownership, checklist, formazione e monitoraggio.

Se il sito deve essere ricostruito, inserisci accessibilità nel brief e nei criteri di accettazione. La guida su quanto costa un sito web professionale aiuta a definire architettura, contenuti e costi di gestione. Correggere componenti condivisi durante progettazione è più controllabile che intervenire pagina per pagina dopo il deploy.

Domande frequenti