Oltre un miliardo di persone nel mondo vive con qualche forma di disabilita. Si tratta di circa il 15 % della popolazione globale. Tra queste ci sono persone non vedenti o ipovedenti, persone sorde o con difficolta uditive, persone con disabilita motorie, differenze cognitive o condizioni temporanee come un braccio rotto o un'emicrania.
Quando costruiamo siti web senza considerare queste realta, non stiamo solo rendendo le cose scomode. Stiamo escludendo le persone dall'accesso a informazioni, servizi e opportunita che altri danno per scontati. L'accessibilita non e una funzionalita. E una responsabilita.
Cosa significa accessibilita web
L'accessibilita web significa progettare e sviluppare siti web in modo che le persone con disabilita possano percepirli, comprenderli, navigarli e interagire con essi. Significa anche che possano contribuire al web.
Questo va oltre i lettori di schermo. L'accessibilita comprende:
- Visiva: cecita, ipovisione, daltonismo
- Uditiva: sordita, ipoacusia
- Motoria: controllo motorio fine limitato, tremori, paralisi
- Cognitiva: dislessia, ADHD, difficolta di memoria, disturbi dell'apprendimento
- Temporanea e situazionale: un polso rotto, luce solare intensa sullo schermo, un ambiente rumoroso, internet lento
L'intuizione chiave e che il design accessibile avvantaggia tutti. I sottotitoli aiutano in un ambiente rumoroso. L'alto contrasto aiuta sotto la luce intensa. La navigazione da tastiera aiuta gli utenti esperti. Una scrittura chiara aiuta i parlanti non madrelingua. L'accessibilita non e una modalita speciale — e buon design.
Lo standard WCAG
Le Web Content Accessibility Guidelines (WCAG) sono lo standard internazionale per l'accessibilita web, pubblicate dal W3C. La versione attuale e WCAG 2.2, organizzata attorno a quattro principi noti con l'acronimo POUR:
Percepibile (Perceivable)
Le informazioni devono essere presentate in modi che tutti gli utenti possano percepire.
- Alternative testuali: ogni immagine necessita di un attributo
altche ne descriva il contenuto. Le immagini decorative usanoalt="". - Sottotitoli e trascrizioni: i contenuti video necessitano di sottotitoli; i contenuti audio necessitano di trascrizioni.
- Struttura adattabile: il contenuto deve avere senso quando gli stili vengono rimossi. Usa HTML semantico (
<h1>,<nav>,<main>,<article>), non solo stili visivi. - Contenuto distinguibile: contrasto cromatico sufficiente, testo ridimensionabile, nessuna informazione trasmessa solo tramite il colore.
Utilizzabile (Operable)
Gli utenti devono poter utilizzare l'interfaccia.
- Accessibile da tastiera: ogni elemento interattivo deve essere raggiungibile e utilizzabile solo con la tastiera. Nessuna trappola per il mouse.
- Tempo sufficiente: se i contenuti hanno limiti di tempo, gli utenti devono poterli estendere o disattivare.
- Nessun trigger per crisi epilettiche: evita contenuti che lampeggiano piu di tre volte al secondo.
- Navigabile: titoli di pagina chiari, struttura logica delle intestazioni, link per saltare la navigazione, indicatori di focus visibili.
Comprensibile (Understandable)
Il contenuto e l'interfaccia devono essere comprensibili.
- Testo leggibile: specifica la lingua della pagina (attributo
lang). Usa un linguaggio chiaro e semplice quando possibile. - Comportamento prevedibile: la navigazione deve essere coerente. Le pagine non devono cambiare contesto in modo inatteso.
- Assistenza all'input: etichetta chiaramente i campi del modulo. Fornisci messaggi di errore utili che spieghino cosa e andato storto e come correggerlo.
Robusto (Robust)
Il contenuto deve essere sufficientemente robusto per funzionare con le tecnologie attuali e future.
- HTML valido: markup semantico corretto che le tecnologie assistive possano interpretare in modo affidabile.
- Nome, ruolo, valore: i componenti personalizzati devono esporre il loro scopo alle API di accessibilita (tramite ARIA quando necessario).
Livelli di conformita
WCAG definisce tre livelli:
| Livello | Significato | Esempio |
|---|---|---|
| A | Accessibilita minima | Le immagini hanno testo alternativo, le pagine hanno titoli |
| AA | Obiettivo standard per la maggior parte dei siti web | Rapporto di contrasto cromatico di almeno 4,5:1 per il testo normale |
| AAA | Livello piu alto, non sempre raggiungibile | Rapporto di contrasto di 7:1, lingua dei segni per tutti i video |
La maggior parte delle legislazioni nel mondo richiede la conformita al Livello AA. Questo e il livello a cui dovresti puntare.
Barriere comuni e come risolverle
Testo alternativo mancante nelle immagini
Il problema: gli utenti di lettori di schermo sentono "immagine" o nulla.
La soluzione: aggiungi un testo alt descrittivo a ogni immagine informativa. Per le immagini decorative, usa alt="" in modo che i lettori di schermo le saltino.
<!-- Corretto -->
<img
src="chart.png"
alt="Bar chart showing a 40% increase in sales from January to June 2025"
/>
<!-- Decorativa -->
<img src="divider.svg" alt="" />
Contrasto cromatico insufficiente
Il problema: le persone ipovedenti o daltoniche non riescono a leggere il testo.
La soluzione: assicura un rapporto di contrasto minimo di 4,5:1 per il testo normale e 3:1 per il testo grande (18px+ o 14px grassetto). Usa uno strumento di verifica del contrasto per controllare le tue combinazioni di colori.
Puoi verificare il contrasto dei tuoi colori adesso con il nostro Verificatore di contrasto. Mostra i risultati WCAG AA e AAA istantaneamente.
Etichette dei moduli mancanti
Il problema: gli utenti di lettori di schermo non sanno a cosa serve un campo del modulo.
La soluzione: ogni campo di input necessita di un elemento <label> visibile collegato tramite l'attributo for.
<!-- Corretto -->
<label for="email">Indirizzo email</label>
<input type="email" id="email" name="email" />
<!-- Errato: il segnaposto non e un'etichetta -->
<input type="email" placeholder="Indirizzo email" />
Nessuna navigazione da tastiera
Il problema: gli utenti che non possono usare il mouse restano bloccati.
La soluzione: usa elementi HTML nativi (<button>, <a>, <select>) che sono accessibili da tastiera per impostazione predefinita. Se costruisci componenti personalizzati, assicurati che siano focalizzabili e rispondano agli eventi della tastiera. Non rimuovere mai i contorni di focus senza fornire un'alternativa.
Struttura della pagina mancante
Il problema: gli utenti di lettori di schermo non possono navigare in modo efficiente.
La soluzione: usa HTML semantico. Un <h1> per pagina, gerarchia logica delle intestazioni (senza saltare livelli), landmark (<nav>, <main>, <footer>).
Riproduzione automatica dei media
Il problema: l'audio inatteso disturba gli utenti di lettori di schermo. La riproduzione automatica dei video puo provocare crisi epilettiche o disagio.
La soluzione: non riprodurre mai l'audio automaticamente. Se il video viene riprodotto automaticamente, assicurati che non abbia audio per impostazione predefinita e fornisci i controlli di pausa.
Il colore non e sufficiente
Non affidarti mai solo al colore per trasmettere informazioni. Considera:
- Un campo del modulo con bordo rosso per gli errori necessita anche di un'icona di errore o di un messaggio di testo
- Un grafico con linee colorate necessita anche di pattern, etichette o una legenda
- Un link nel testo corrente necessita di una sottolineatura o di un altro indizio visivo, non solo di un cambio di colore
Circa l'8 % degli uomini e lo 0,5 % delle donne ha qualche forma di deficit della visione dei colori. Progettare tenendo conto di questo non e un caso limite — e inclusione di base.
Testare l'accessibilita
Test automatizzati
Gli strumenti automatizzati rilevano circa il 30-40 % dei problemi di accessibilita. Sono un buon primo passo, non una soluzione completa.
- axe DevTools (estensione del browser) — analizza una pagina e segnala le violazioni WCAG
- Lighthouse (integrato in Chrome DevTools) — include un audit di accessibilita
- WAVE (strumento basato sul web) — overlay visivo che mostra i problemi
Test manuali
Molti problemi di accessibilita richiedono il giudizio umano:
- Test da tastiera: scollega il mouse e naviga l'intero sito con Tab, Invio, Escape e i tasti freccia. Riesci a raggiungere tutto? L'ordine del focus e logico?
- Test con lettore di schermo: prova VoiceOver (Mac), NVDA (Windows, gratuito) o TalkBack (Android). Il contenuto ha senso quando viene letto ad alta voce?
- Test di zoom: ingrandisci il browser al 200 %. Il layout funziona ancora? Qualche contenuto viene tagliato o si sovrappone?
- Movimento ridotto: attiva "riduci movimento" nelle impostazioni del sistema operativo. Le animazioni rispettano questa preferenza?
Test con gli utenti
Il feedback piu prezioso proviene da persone che utilizzano effettivamente le tecnologie assistive nella loro vita quotidiana. Se il tuo budget lo consente, includi persone con disabilita nel tuo processo di test.
L'accessibilita e uno spettro, non una casella da spuntare
L'accessibilita non e un progetto una tantum con un traguardo. E una pratica continua. I siti web cambiano, i contenuti vengono aggiunti e nuove barriere possono apparire con ogni aggiornamento.
L'obiettivo non e la perfezione. L'obiettivo e il miglioramento continuo e la cura genuina per le persone che usano cio che costruisci. Inizia con i cambiamenti di maggiore impatto — contrasto cromatico, testo alternativo, navigazione da tastiera, etichette dei moduli — e costruisci da li.
Ogni barriera che rimuovi e una porta che apri.
Checklist rapida
- Tutte le immagini hanno un testo
altsignificativo (oalt=""se decorative) - Il contrasto cromatico soddisfa WCAG AA (4,5:1 per il testo, 3:1 per il testo grande)
- Tutti i campi del modulo hanno etichette visibili
- Il sito e completamente navigabile da tastiera
- Le intestazioni seguono una gerarchia logica
- Gli indicatori di focus sono visibili
- La lingua della pagina e impostata (attributo
langsu<html>) - Nessuna informazione trasmessa solo tramite il colore
- I video hanno sottotitoli
- Le animazioni rispettano
prefers-reduced-motion