Accessibilità Web

Cos'è l'accessibilità web

L'accessibilità web (spesso abbreviata in a11y) è la pratica di progettare e sviluppare siti web utilizzabili da tutte le persone, indipendentemente dalle loro abilità fisiche, sensoriali o cognitive. Questo include persone con disabilità visive, uditive, motorie e cognitive, ma anche chi utilizza il sito in condizioni sfavorevoli (connessione lenta, schermo piccolo, luce intensa).

Secondo l'Organizzazione Mondiale della Sanità, oltre 1 miliardo di persone nel mondo vive con qualche forma di disabilità. In Italia, sono circa 3 milioni le persone con disabilità grave. Ignorare l'accessibilità significa escludere una porzione significativa del proprio pubblico.

L'accessibilità non è un'aggiunta opzionale: è una caratteristica fondamentale di un sito web ben progettato. Un sito accessibile è un sito migliore per tutti, non solo per chi ha una disabilità.

Oltre all'aspetto etico, l'accessibilità porta benefici concreti: migliora la SEO (i motori di ricerca premiano i contenuti strutturati e semanticamente corretti), aumenta il tasso di conversione e riduce il rischio di sanzioni legali.

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 si basano su quattro principi fondamentali, noti con 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 (eliminando la necessità di 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, permettendo alle tecnologie assistive di interpretare correttamente componenti interattivi complessi.

Prima di utilizzare ARIA, però, è fondamentale sfruttare l'HTML semantico nativo:

• 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

Il design gioca un ruolo cruciale nell'accessibilità. Il contrast ratio tra testo e sfondo è uno dei criteri più importanti delle WCAG:

• 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

Strumenti utili per verificare il contrasto: WebAIM Contrast Checker, Colour Contrast Analyser, l'estensione Lighthouse di Chrome e l'analisi integrata in Google Analytics 4 tramite i report di esperienza utente.

Altre buone pratiche di design accessibile:

• 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 significative 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 il team di sviluppo e design sulle best practice di accessibilità
• 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 è un progetto una tantum, ma un processo continuo. Ogni nuovo contenuto, funzionalità o aggiornamento del sito deve essere progettato e testato con l'accessibilità in mente, esattamente come si fa per la sicurezza e le performance.