Guida pratica all’accessibilità dei siti web: normative, specifiche W3C e linee guida

Qualche tempo fa, un cliente ci ha contattato chiedendo di apportare delle modifiche ai suoi siti web al fine di garantire il rispetto dei requisiti di accessibilità. Questo ci ha portato a esplorare un aspetto poco sviluppato della realizzazione dei siti web e a prendere la decisione di condividere la nostra esperienza in questo articolo.

Che cos’è l’accessibilità digitale

Normalmente fruiamo dei siti attraverso browser visuali come Chrome, interagendovi con un mouse, se utilizziamo un computer, o con i polpastrelli, se adoperiamo un dispositivo touch come uno smartphone o un tablet.

Ma le persone possono accedere al web in molti modi differenti, per esempio attraverso tastiere, comandi vocali, screen reader, joystick, pedali, tastiere braille e così via.

Uno degli scopi di chi sviluppa pagine web dovrebbe essere quello di costruirle in modo da creare il minor numero possibile di ostacoli per l’accesso alle informazioni, indipendentemente dalle capacità dell’utente e dal dispositivo utilizzato. In altre parole, è necessario progettare per l’accessibilità.

Sebbene ci si riferisca al fatto di permettere la fruizione di una pagina web a persone con disabilità, visive o motorie, le tecniche e le strategie sviluppate per l’accessibilità si rivelano utili anche nei riguardi di coloro che usano browser con poche funzioni su dispositivi mobili o connessioni lente o con JavaScript disabilitati.

Inoltre, i siti accessibili sono anche indicizzati più efficacemente dai motori di ricerca. Meglio Google capisce il tuo sito, maggiori sono le possibilità che vengano abbinati termini di ricerca del web ai tuoi contenuti e maggiori sono le possibilità che il tuo sito si trasformerà nei risultati di ricerca di qualcuno.

Categorie di disabilità

Per cominciare il viaggio nell’argomento dell’accessibilità, è necessario partire dal capire quali sono le quattro categorie principali di disabilità che influenzano il modo in cui le persone interagiscono con i loro computer e le informazioni.

Disabilità visiva

Le persone con visione limitata (ipovedenti) o assente possono utilizzare dispositivi assistivi come lettori di schermo, display Braille o ingranditori dello schermo per disporre dei contenuti. Possono anche semplicemente utilizzare la funzione del browser di zoom dei caratteri per rendere il testo sufficientemente grande da leggere.

La disabilità visiva comprende anche coloro che non riescono a visualizzare correttamente i colori (daltonismo, color blindness, ecc). I siti devono quindi rispettare dei contrasti minimi nell’uso dei colori, per far sì che la visibilità sia garantita anche a questa categoria.

Disabilità motoria

Gli utenti con limitata o assente capacità di utilizzare le mani possono utilizzare dispositivi speciali come mouse e tastiere modificati, pedali per i piedi, comandi vocali o joystick per navigare sul web e inserire le informazioni.

Disabilità uditiva

Gli utenti con udito limitato (ipoudenti) o assente perderanno gli aspetti audio dei contenuti multimediali, quindi è necessario fornire delle alternative, come trascrizioni per le tracce audio o sottotitoli per i video.

Disabilità cognitiva

Gli utenti con limitazioni di memoria o di comprensione della lettura o deficit dell’attenzione, beneficiano di vantaggi quando i siti sono progettati in modo semplice e chiaro. In realtà queste qualità sono utili per chiunque utilizzi il tuo sito, specie al giorno d’oggi che la maggior parte di noi consulta le pagine web tramite smartphone, quindi su schermo ridotto.

Che cosa significa rendere un sito web accessibile

Secondo Steve Krug, uno dei massimi esperti dell’usabilità dei siti web e autore del best seller in materia “Don’t make me think”, gli sviluppatori e i designer 26 enni sono riluttanti all’accessibilità perché “il mondo in cui vivono è popolato da 26enni non disabili e [sono convinti che] gli accorgimenti per l’accessibilità creino cose peggiori per tutti”.

Bisognerebbe invece fargli notare come “gli accorgimenti per l’accessibilità possono migliorare in modo straordinario la vita di alcune persone [permettendo per esempio ai] non vedenti che dispongono di un computer [di] leggere un quotidiano da soli”. 

Accessibilità dei siti web: la normativa italiana e internazionale

In Italia, per essere conformi ai requisiti dell’accessibilità, è necessario rispettare le indicazioni dell’AGID, l’Agenzia per l’Italia digitale. Le disposizioni sono differenti a seconda che il titolare del sito web sia un ente pubblico o un’impresa privata:

• Linee guida per l’accessibilità per la pubblica amministrazione
• Linee guida per l’accessibilità per le aziende private

Se il tuo sito invece si rivolge al mercato statunitense, devi soddisfare la sezione 508 degli Rehabilitation Act Amendments, che specifica gli standard di accessibilità per la tecnologia informatica, compresi i siti web.  Per un quadro più approfondito sulla sezione 508, ti consiglio di visitare il sito Section508.gov.

Come rendere un sito accessibile?

Nell’ottica di realizzare pagine web accessibili a tutti gli utenti, l’avvento del web semantico, introdotto con HTML5, migliora l’interpretazione dei dati da parte dei lettori di schermo (screen reader) e dei dispositivi di assistenza di accessibilità (accessibility assistance devices) che aiutano i non vedenti a recuperare il senso di una pagina web. 

Pensa per esempio all’introduzione di tutti quegli elementi HTML come <nav>, <header>, <footer>, <main>, che sono andati a sostituire l’utilizzo del generico <div>.

Per far fronte alla necessità di rendere il Web fruibile a tutti, il W3C, il World Wide Web Consortium, l’organismo internazionale deputato a sviluppare gli standard per il web, ossia i linguaggi HTML, CSS e altri, ha avviato da anni la Web Accessibility Initiative (WAI), il cui sito è un ottimo punto di partenza per saperne di più sull’accessibilità del web.

Uno dei documenti prodotti dalla WAI per aiutare gli sviluppatori a creare siti accessibili è il Web Content Accessibility Guidelines (WCAG 2, mentre la versione 3 è in fase di sviluppo). Il governo degli Stati Uniti ha usato i punti stabiliti dal WCAG come base per la sua linee guida sull’accessibilità della suddetta sezione 508.

Siccome l’argomento è davvero enorme, nel resto dell’articolo presenterò alcune delle accortezze da rispettare riguarda o specifici elementi HTML come immagini, tabelle, form, oggetti audio e video.

Consigli sull’accessibilità delle immagini

Quando utilizzi un’immagine in un documento web, evita di utilizzare come testo alternativo “immagine di” o “grafica di”. Sarà chiaro che si tratta di un’immagine, quindi quell’indicazione risulterà ridondante. Viceversa, se il mezzo dell’immagine è rilevante per il contenuto, per esempio se si tratta di pittura, fotografia o illustrazione, allora puoi includere il termine descrittivo.

Alcuni tipi di immagini, come i grafici e i diagrammi, richiedono descrizioni lunghe che non sono pratiche come valori dell’attributo alt. Questi casi richiedono strategie di accessibilità alternative: puoi consultare la guida sul testo alternativo di WebAIM (in inglese), per maggiori informazioni.

Consigli sull’accessibilità delle tabelle

Tra gli elementi che possono comporre una pagina web, è particolarmente difficile dare un senso ai materiali tabellari che devono essere letti da un dispositivo come uno screen reader. Tuttavia la specifica HTML fornisce misure per migliorare l’esperienza e rendere il tuo contenuto più comprensibile.

Oltre agli elementi HTML di base di una tabella come <table>, <tr> e <td>, esistono altri elementi che permettono di descriverne il contenuto in maniera migliore, in modo da offrire descrizioni semantiche più complesse e aumentare l’accessibilità.

Il modo più efficace per dare agli utenti con problemi di vista una panoramica della tua tabella è descrivere i contenuti della tabella o fornire suggerimenti su come è strutturata con l’elemento <caption>.

Tra gli elementi inerenti l’accessibilità di una tabella troviamo anche:

• <thead> per specificare gli elementi che costituiscono l’intestazione della tabella
• <tbody> per specificare gli elementi che costituiscono il contenuto della tabella (i dati)
• <tfoot> per specificare gli elementi che costituiscono la fine della tabella (per esempio i totali).

Se utilizzi gli elementi <th> per le intestazioni per una tabella, gli attributi scope e headers ti permettono di associare esplicitamente quelle intestazioni ai relativi contenuti, cosa non scontata per gli ipovedenti che utilizzano uno screen reader.  Gli esperti di accessibilità raccomandano che ogni elemento <th> contenga un attributo scope per rendere esplicito il suo dato associato.

Per le tabelle davvero complesse, per esempio quando la tabella contiene celle che utilizzano gli attributi rawspan e colspan, utilizza l’attributo headers nell’elemento <td> per collegarlo esplicitamente al valore id di un’intestazione.

Anche in questo caso, per approfondire il tema dell’accessibilità delle tabelle puoi consultare l’apposita sezione del sito WebAIM.

Il consiglio finale è comunque quello di rendere la tua tabella più semplice possibile.

Consigli sull’accessibilità dei moduli (form)

Anche in questo caso devi considerare come gli utenti senza il beneficio dei browser visivi saranno in grado di comprendere e navigare attraverso i tuoi moduli web.

La specifica HTML prevede per i moduli alcuni elementi specificamente pensati per aumentarne l’accessibilità. In particolare <label>, <fieldset> e <legend> permettono di rendere più chiare le connessioni semantiche tra le diverse componenti di un modulo. Non solo il markup risultante sarà semanticamente più ricco, ma ci saranno anche più elementi a disposizione che potrai sfruttare come “punti di aggancio” con le regole CSS, per una più facile stilizzazione.

L’elemento <label> permette di associare del testo descrittivo a un campo del modulo, fornendo un contesto importante per gli utenti con browser basati su sintesi vocale.

Un form ben progettato dovrebbe dividersi in blocchi logici. Questa suddivisione può essere esplicitata grazie all’elemento <fieldset>, che appunto indica un raggruppamento logico dei controlli del modulo. Un <fieldset> dovrebbe anche includere un elemento <legend> per fornire un titolo alla sezione.

Altri elementi critici per l’accessibilità

Anche altri elementi di una pagina web meritano la tua attenzione. In particolare, se il tuo sito web prevede oggetti multimediali come audio e video, sono previste specifiche cose da fare.

Per esempio, se incorpori delle clip da YouTube, assicurati che ogni video disponga del file dei sottotitoli. I sottotitoli generati automaticamente da YouTube non sempre valgono.

Se vengono inseriti video all’interno del sito i sottotitoli non sono sufficienti, è necessario che sia presente anche una trascrizione del video o una descrizione testuale, soprattutto se non sono presenti audiodescrizioni. Questo per far sì che i contenuti del video che non sono conversazioni, interviste ecc, ma che fanno solo parte dei contenuti visivi (es. nome dell’intervistato o riprese significative per il contenuto che non sono descritte a voce) siano disponibili per chi ha una disabilità visiva.

Le interfacce di navigazione che prevedono il trascinamento degli elementi (drag and drop) mostrano altre problematiche. Puoi consultare questo post per un’introduzione all’argomento.

La specifica WAI-ARIA

Un altro sforzo del W3C nei confronti del tema dell’accessibilità è la specifica WAI-ARIA, che sta per “Web Accessibility Initiative: Accessible Rich Internet Applications” (o semplicemente ARIA).

Uno degli scopi di HTML5 era (è) proprio quello di fornire, tramite i suoi nuovi elementi semantici, pagine il più possibile accessibili da parte dei browser e dei dispositivi specifici, come gli screen reader. Sebbene questo fosse il progetto, inizialmente il supporto dei nuovi elementi, sia da parte dei browser sia dei dispositivi specifici, rimase indietro.

Per agevolare la retrocompatibilità di questi nuovi elementi HTML fu sviluppata ARIA, uno standard specificatamente rivolto alle tecnologie assistive. 

ARIA ha quindi lo scopo di migliorare l’accessibilità di un documento HTML. ARIA è una vera e propria “tecnologia ponte”: quando gli elementi semantici di HTML5 saranno in grado di creare pagine perfettamente accessibili, la parte ARIA del codice potrà essere rimossa. Nei casi in cui esistano sovrapposizioni con HTML5, a oggi gli screen reader offrono un supporto migliore ad ARIA.

Tecnicamente, ARIA non fa parte della specifica HTML5. SI tratta invece, di una separata (e gigantesca) specifica del W3C, compatibile con HTML5, HTML 4 e XHTML 1.x. Oggi la specifica HTML del W3C elenca quali ruoli e proprietà ARIA si applicano nelle descrizioni di ogni elemento HTML.

Con il passare del tempo, il supporto dei dispositivi e dei browser ai nuovi elementi introdotti da HTML5 è diventato ottimo. Tuttavia, ARIA continua ad affrontare l’accessibilità sotto il punto di vista delle applicazioni web che includono contenuti generati dinamicamente, scripting ed elementi di interfaccia avanzati che risultano particolarmente confusi per i dispositivi assistivi.

Come funziona ARIA?

ARIA implementa la sua tecnologia attraverso un insieme di ruoli, stati e proprietà che descrivono il contenuto di una sezione del documento in modo che questo sia facilmente identificabile e fruibile (quindi accessibile) dagli utenti delle tecnologie assistive, come per esempio gli screen reader.

I ruoli ARIA, associati a seconda del contesto, permettono di far identificare meglio le sezioni del documento alle tecnologie assistive, in modo che l’utente possa capire subito la struttura della pagina e possa navigarlo più agevolmente.

I ruoli vengono applicati esplicitamente nel codice HTML utilizzando l’attributo role e associandogli uno tra i valori predefiniti a disposizione. Molti di questi valori corrispondono agli elementi strutturali di HTML5, mentre altri valori non hanno un tag equivalente in HTML5. 

A oggi la prima regola di ARIA è che non dovresti utilizzare ARIA a meno che non sia necessario. Gli elementi HTML hanno già l’accessibilità integrata, e aggiungere etichette ARIA non necessarie può compromettere l’accessibilità.

Per un elenco degli errori più comuni nell’applicazione di questo standard, leggi l’articolo di Ilknur Eren,  Web Accessibility – Common ARIA Mistakes to Avoid.

Se vuoi testare come vengono le tue pagine ARIA su uno screen reader, per Windows puoi utilizzare il NonVisual Desktop Access (NVDA), disponibile gratuitamente, oppure JAWS della Freedom Scientific, ma a pagamento. Per MacOsX e iOS esiste invece la funzione VoiceOver, inclusa nel sistema operativo. 

Uno screen reader è l’esempio più classico di tecnologia assistiva. Si tratta di un software che legge il contenuto di una pagina a voce alta. Il tono della voce dello screen reader può cambiare a seconda del codice (markup) che il software incontra nella pagina, per esempio se trova del codice che indica di dare enfasi a un certo termine o paragrafo. Oppure anche in base al contesto che trova, per esempio se trova un elenco, un link o un menù di navigazione, per dare la possibilità all’utente di decidere se seguire il collegamento o meno. 

Per questo motivo la struttura di una pagina è importantissima, perché permette alla persona di capire gli argomenti principali di un contenuto e di scegliere quali ascoltare in dettaglio, anziché doverli ascoltare tutti in sequenza. Ed ecco perché una buona semantica fa una grossa differenza per gli utenti disabili.

La navigazione di una pagina in uno screen reader avviene in vari modi, per esempio con dei comandi dalla tastiera.

Per approfondire WAI-ARIA

Ovviamente, tutto questo non è sufficiente per farti sentire sicuro nell’utilizzare ARIA oggi, ma dovrebbe darti un’idea di come funziona e del suo valore potenziale. Se sei interessato ad approfondire queste tematiche, ecco alcune letture consigliate.

La specifica ARIA completa. È grande. Davvero grande. Per un punto di partenza puoi far riferimento al piccolo sottoinsieme chiamato landmark.

Qui trovi l’elenco completo dei ruoli di ARIA.

La sezione ARIA del MDN Web Docs ospita molti collegamenti aggiornati a risorse correlate ad ARIA. Anche questo è un buon posto per iniziare per la tua esplorazione.

Il sito HTML5 Accessibility testa quali nuove funzionalità HTML5 sono supportate in modo accessibile dai principali browser.

Conclusioni sull’accessibilità per i siti web

L’accessibilità è la pratica di rendere i contenuti fruibili a tutti gli utenti, indipendentemente dalle capacità personali.

Oltre a essere disponibili sui dispositivi “tradizionali” come desktop, smartphone, tablet e notebook, i contenuti con markup semantico diventano accessibili ai visitatori disabili grazie alle tecnologie assistive.

Siti di approfondimento sull’accessibilità

Per saperne di più sulle migliori pratiche per l’accessibilità web, puoi visitare il sito della Web Accessibility Initiative (WAI) oppure consultare il loro canale YouTube ufficiale della W3C.

Per verificare se il tuo sito risponde ai requisiti dell’accessibilità, puoi inserire l’URL del tuo sito nello strumento specifico del sito webaim.org (in basso, nel footer).

(ha collaborato Sara Stianti)