Accessibilità dei siti web: Internet per tutti senza barriere

L’accessibilità dei siti web garantisce agli utenti con diversi tipi di esigenze o di limitazioni funzionali l’utilizzo di Internet senza alcuna restrizione e senza un aiuto esterno. Lo scopo del design per il web senza barriere è quello di evitare l’esclusione dalla rete di alcuni gruppi di utenti come, ad esempio, le persone con disabilità fisica o mentale. Inoltre, un sito web accessibile a tutti è conforme sia alle direttive europee che alla legislazione italiana e possiede un fattore non trascurabile per le imprese, ossia quello di riuscire a raggiungere una gamma di utenti più ampia perché tali siti possono essere consultati da molte più persone, se messi a confronto con i siti Internet non accessibili. Inoltre, grazie al webdesign senza barriere è anche possibile migliorare il posizionamento del proprio sito nei motori di ricerca.

Accessibilità dei siti web: la mancanza di consapevolezza dei gestori dei siti Internet

In linea generale, per barriere si intendono tutti quegli ostacoli che impediscono lo sviluppo e rendono difficile la partecipazione. Spesso nella rete queste barriere vengono create in rete inconsapevolmente. A tale proposito risulta interessante il progetto dell’Agenzia per l’Italia digitale poiché promuove la progettazione di sistemi informatici fruibili da tutti senza alcuna discriminazione. Altri progetti simili sono diffusi su tutto il territorio europeo: tra questi spicca il progetto tedesco del “Barrieren Melde- und Monitoringstelle”, grazie al quale sono stati segnalati dei sistemi per attivare servizi online difficili da utilizzare per le persone con disabilità.

Fra questi compaiono anche alcuni siti web che si servono dei captcha, codici finalizzati a verificare, tramite segni o immagini, che l’utente che accede a un determinato sito Internet sia effettivamente un umano: questo test è difficilmente o per nulla decifrabile da persone affette da disabilità visiva. Le risposte dei gestori dei siti web interessati hanno dimostrato che molti webdesigner non avevano mai sentito parlare di barriere in rete prima d’ora.

Uno degli obiettivi principali di Tim Berners-Lee, fondatore del World Wide Web (W3), consisteva proprio nel fatto che ogni sito Internet dovesse essere accessibile al maggior numero possibile di visitatori. Il primo sito web era, infatti, relativamente semplice e formulava gli obiettivi del progetto W3 come segue:

Citazione

“The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.” Traduzione: “Il WorldWideWeb (W3) è un’iniziativa tesa all’ottenimento su vasta scala di informazioni ipermediali e che mira a provvedere l’accesso universale a un vasto universo di documenti.” – Tim Berners-Lee, W3-Project

Era il 1991. Solo tre anni dopo, Tim Berners-Lee ha fondato il World Wide Web Consortium, che da allora lavora per stabilire standard uniformi per il web. A tal fine sono state elaborate le Web Content Accessibility Guidelines, che fungono anche da base per la direttiva UE sul miglioramento dell’accessibilità di Internet. In tal senso, in Italia è entrata in vigore la legge del 9 gennaio 2004 pubblicata nella Gazzetta Ufficiale n°13 del 17 gennaio 2004 e riguardante le disposizioni per favorire l’accesso dei soggetti disabili agli strumenti informatici. Tuttavia, questa legge si riferisce prevalentemente alle istituzioni pubbliche, mentre il settore privato non è soggetto a norme ben precise. Dovrebbero essere le imprese, piuttosto, a elaborare un piano comune circa gli obiettivi da raggiungere.

I gruppi di pressione hanno criticato il poco interesse dell’economia riguardo a questa problematica. Di fatto, l’attuazione delle linee guida del W3C per l’accessibilità dei siti web non è una misura importante solo da un punto di vista altruistico, per le istituzioni e per le aziende, ma risulta vantaggiosa anche per ragioni economiche.

Motivi per cui le imprese dovrebbero creare siti web accessibili a tutti

  • In questo modo l’azienda dimostra di avere una responsabilità sociale (Corporate Social Responsibility). Ciò vale anche per le misure delle pubbliche relazioni.
  • Si riduce il rischio di subire danni alla propria immagine dovuti dalla discriminazione.
  • Il ranking nei motori di ricerca e l’usabilità del sito web ne sono influenzati positivamente.
  • Il numero dei possibili utenti aumenta, aumentando di conseguenza anche le quote di mercato e gli utili.
  • L’azienda promuove la partecipazione dei dipendenti con disabilità.

Questi sono soltanto alcuni dei tanti vantaggi dell’inclusione digitale. Per sapere di più riguardo all’accessibilità dei siti web potete consultare l’articolo “Developing a Web Accessibility Business Case for Your Organization“ (Shawn Lawton Henry and Andrew Arch, eds. Copyright © 2012 W3C® (MIT, ERCIM, Keio). Se volete maggiori informazioni sugli standard generali per l’accessibilità sul web, leggete il nostro articolo sulle linee guida WCAG - W3C per contenuti web facilmente accessibili.

Accessibilità dei siti web: le barriere di Internet

L’accessibilità illimitata dei siti Internet è ovvia per molti. Ciononostante sono tante le persone impossibilitate, per vari motivi, ad utilizzare alcuni siti web. Il W3C ha individuato cinque fattori importanti per la piena partecipazione degli utenti a Internet. Le parole chiave corrispondenti sono percezione, comprensione, navigazione, interazione e contributo. Qui di seguito spieghiamo i termini in modo più dettagliato.

Percezione

Molti siti web contengono annunci lampeggianti, il campo relativo ai commenti è ricco di testo e, a volte, anche di musica di sottofondo per sottolineare il tema della pagina o l’atmosfera che questa vuole suggerire. A seconda del tipo e del grado di disabilità, alcuni visitatori del vostro sito web potrebbero non percepire questi elementi, del tutto o in parte. I non vedenti, ad esempio, navigano in Internet senza potersi affidare a stimoli visivi. Ciononostante esiste uno strumento detto screen reader che legge i contenuti del sito web: questo apparecchio trasmette i dati leggibili alla cosiddetta tecnologia di assistenza. Il display per il Braille, ad esempio, riesce a convertire il testo in scrittura Braille. In questo modo è possibile leggere il sito Internet tramite il senso del tatto. Uno strumento di sintesi vocale, inoltre, ne riproduce il contenuto in formato audio. Con questa tecnologia, è possibile anche utilizzare l’udito per recepire i contenuti di un sito web. In questi casi tuttavia, un’eventuale musica di sottofondo al sito web diventa un elemento di disturbo.

Le persone con un handicap visivo meno grave, tra cui molti anziani, riescono a leggere il sito web con i loro occhi, ma spesso necessitano di immagini notevolmente ingrandite. Chi invece è affetto da daltonismo non riesce a decifrare correttamente gli avvisi che sono espressi solo dal colore. Diversamente i non udenti non percepiscono le informazioni di un file audio e di gran parte dei file video.

Comprensione

Gli utenti molto giovani, gli anziani o le persone con disabilità cognitive a volte hanno difficoltà a capire un testo ricco di modernitermini tecnici o di complesse abbreviazioni. Molti utenti hanno difficoltà a comprendere i contenuti di un sito web anche quando questi sono tematicamente distanti tra loro, poiché risulta complicato riconoscerne il contesto.

Interazione e navigazione

Dato che sono sempre più numerosi gli utenti che navigano in Internet tramite smartphone, risulta estremamente fastidioso se non è possibile cliccare i link con le dita senza difficoltà e con precisione. Se il sito non è ottimizzato per gli smartphone e i link in caratteri piccoli sono l’uno vicino all’altro, le persone anziane con le mani poco ferme si sentiranno in difficoltà. Tuttavia sono stati sviluppati numerosi strumenti per facilitare l’uso dei computer da parte delle persone con disabilità fisiche: a questo scopo, alcuni strumenti catturano i movimenti oculari, mentre altre tecnologie vengono utilizzate tramite la tastiera. In linea di principio, il sito web dovrebbe essere concepito in modo da poter essere valutato utilizzando tali tecnologie di supporto: se il vostro sito web non è accessibile, i potenziali clienti che dipendono dal fattore di accessibilità non hanno alcuna possibilità di beneficiare della vostra offerta.

Se si suppone che gli utenti compilino un modulo, ad esempio, per iscriversi a una newsletter, spesso si verificano errori. La password è troppo corta o la data di nascita non corrisponde ai parametri impostati. Pertanto, è importante formulare istruzioni chiare per la risoluzione dei problemi. L’interazione con un sito web comprende anche la navigazione. Gli utenti che utilizzano dispositivi con un display piccolo o che lavorano con un ingrandimento dello schermo hanno bisogno di percorsi di navigazione adattati a loro e dipendono da una struttura chiara del sito web.

Contributo

Il campo dei commenti consente agli utenti di lasciare un feedback. Tramite questa funzione possono esprimere la loro opinione su un prodotto o su un contenuto o, ancora, scambiare opinioni con altri utenti. Le persone con disabilità visive spesso usano un ingranditore dello schermo quando scrivono sul monitor LCD. In questo modo gli elementi appaiono notevolmente più grandi e aumenta la distanza tra la colonna da leggere e il campo di immissione. Per questo sarebbe ideale disporre gli elementi otticamente vicini e rendere più facile lo scambio di informazioni.

Tramite alcuni moduli potrete ricevere feedback o ordini dai vostri clienti. I programmi integrati per il controllo ortografico spesso visualizzano gli errori evidenziando in rosso le parole errate. Tuttavia, per le persone affette da daltonismo, il testo a colori a volte non differisce dal resto del testo. Pertanto sarebbe meglio considerare un altro tipo di marcatura, come, ad esempio, la sottolineatura.

Siti web accessibili: come abbattere le barriere

L’abbattimento delle barriere in Internet migliora l’usabilità del vostro sito web e quindi anche il vostro ranking su Google. La struttura di un sito web accessibile ripaga anche dal punto di vista economico e richiede solo un piccolo sforzo aggiuntivo. Il W3C raccomanda vari strumenti per effettuare dei test di verifica, per controllare che il proprio sito Internet sia effettivamente accessibile a tutti. Tuttavia, i punteggi dei test W3C vengono assegnati solo da esperti tester umani che esaminano il sito web nel suo complesso e certificano i diversi livelli di accessibilità: da A (“bassa accessibilità”) ad AAA (“alta accessibilità”).

Una buona architettura dell’informazione come base per l’accessibilità e la SEO

Strutturate il vostro sito web in modo chiaro e optate per un linguaggio semplice, di immediata comprensione: questo attirerà più lettori e migliorerà il vostro ranking su Google, dato che i motori di ricerca valutano anche la leggibilità dei contenuti. Se desiderate occuparvi di una buona tecnica SEO e di rendere più chiara e comprensibile la struttura del vostro sito web, prestate attenzione ai seguenti aspetti:

  • Denominazione chiara degli URL e dei contenuti: l’orientamento e il tema di base del sito web dovrebbero essere facilmente riconoscibili in ogni sottopagina.
  • Struttura tracciabile: gli utenti devono sempre sapere dove si trovano sul sito.
  • Gerarchie piatte: consentire agli utenti di accedere ai contenuti con pochi clic.
  • Separazione di layout e contenuto: utilizzare CSS per il design.
  • Strutturare le categorie in modo user-friendly: le sottopagine devono avere una connessione alla pagina principale, semantica e intuitiva.
  • Rappresentazione adatta al web di tutti i contenuti
  • Linguaggio facile: le formulazioni sono facili da capire o sono spiegate più dettagliatamente.
  • Le aree principali del sito web come contatti, note legali, campi di ricerca o pagine iniziali devono essere raggiungibili da qualsiasi sottopagina con un solo clic.
  • Gli elementi di navigazione devono essere chiaramente riconoscibili e ugualmente strutturati su ogni pagina.
  • I siti web più grandi forniscono una mappa del sito, per le domande frequenti è disponibile una FAQ.
  • Font scalabili, colori e layout adattabili facilitano la visualizzazione su diversi dispositivi e in diversi browser. Idealmente dovrebbero essere compatibili con la tecnologia di assistenza.
  • Il sito web può essere utilizzato con mouse e tastiera.
  • Testi alternativi per le immagini: sono necessari perché gli screen reader e i searchbots possono leggere soltanto alcune porzioni di testo.

Ulteriori misure: componenti visive per l’accessibilità del sito web

La possibilità di ingrandire il font di un testo o di modificarne i colori aiuta le persone con problemi di vista o affette da daltonismo a decifrare meglio i contenuti di un sito web. Il contenuto deve risaltare sullo sfondo in termini di colore, in modo da poter essere letto il più facilmente possibile. Sarebbe l’ideale evidenziare gli elementi interattivi con pulsanti o colori: ad esempio, fare sì che il link cambi colore quando gli utenti ci passano sopra con un comando della tastiera, con il mouse o cliccando. Oltre ai colori, per trasmettere informazioni è essenziale utilizzare anche altri segnali informativi, come numeri o asterischi.

Le persone che soffrono di crisi epilettiche sono a rischio se un sito web contiene grafici o video che trasmettono immagini ad intermittenza per più di tre volte al secondo. Gli scienziati hanno anche scoperto che i template a reticolo fortemente sagomato caratterizzati da alto contrasto possono causare convulsioni nelle persone affette da epilessia fotosensibile.

Fornire informazioni multicanale: per la totale accessibilità del vostro sito web

Prendete in considerazione la totale accessibilità al web anche nella vita di ogni giorno. Ogni giorno vengono caricati nuovi contenuti su Internet per l’ottimizzazione dei motori di ricerca, per le pubbliche relazioni o per presentare nuove offerte di vendita: rendete più facile l’accesso ai vostri visitatori adattando le informazioni alle loro esigenze. Una componente fondamentale di un sito web accessibile, che svolge anche un ruolo nell’ottimizzazione dei motori di ricerca, è l’assegnazione di un testo alternativo per le immagini. I crawler e i lettori di schermo non sono in grado di valutare il contenuto delle immagini, ma questo vale anche per gli utenti non vedenti. Il testo alternativo informa quindi sul contenuto dell'immagine. Ma anche i visitatori con cattive connessioni Internet, a causa delle quali le immagini si caricano lentamente o non si caricano affatto, beneficiano di questi testi.

Trascrizioni e sottotitoli

Un impegno più ampio è la creazione continua e tempestiva di trascrizioni e sottotitoli. Con questi strumenti è possibile dotare le informazioni di contenuto audio per i non udenti. A tale scopo, la trascrizione, che riproduce la lingua parlata, i suoni e i rumori sotto forma di testo, viene collocata il più vicino possibile al contenuto audio corrispondente, ad esempio tramite un pulsante con un collegamento al documento. I sottotitoli rendono possibile ai non udenti la comprensione dei video. Anche gli utenti che non vogliono utilizzare la riproduzione del suono (ad esempio, perché non vogliono disturbare l’ambiente con il rumore) possono beneficiare di questa funzione. Le persone con disturbi cognitivi o comportamentali come l’ADHD, simili alle persone con problemi di udito, assorbono meglio le informazioni trasmesse via video quando possono disattivare il rumore di fondo utilizzando un’impostazione del videoplayer.

Spiegazione audio

Le persone con un’acutezza visiva limitata, inferiore al 30% sono considerate ipovedenti; se l’acutezza visiva risulta essere inferiore al 2%, queste sono considerate non vedenti, poiché percepiscono gli stimoli visivi solo in misura limitata o per niente. Per aiutare queste persone a capire il contenuto video di un sito web, è necessario aggiungere una traccia audio. Forniscono spiegazioni su componenti visive come il luogo, il paesaggio, le persone e descrivono brevemente le azioni visibili. Inserite tali spiegazioni nella registrazione audio originale in modo che le tracce non si sovrappongano.

Il video seguente mostra una breve introduzione all’argomento della spiegazione audio e come fare per integrarla in un video. Le didascalie sono un esempio di preparazione del contenuto per i non udenti.

Per tutelare la vostra privacy il video si caricherà dopo aver cliccato.

Lingua facile

La lingua facile esprime ogni concetto in modo molto semplice. Aiuta le persone con disabilità cognitive a comprendere meglio questioni complesse. Ad esempio, nella lingua facile si evitano il congiuntivo, i sinonimi e le negazioni; le frasi sono brevi e trasmettono solo un’informazione alla volta. Già da qualche anno l’ONU ha stilato una serie di norme relative al sostegno alla comprensione della lingua facile: queste includono i consigli sulla tipografia più leggibile, regole ortografiche personalizzate e consigli su come combinare testo e immagine.

Le persone con problemi cognitivi hanno lo stesso diritto all’informazione di tutti gli altri. Per questo motivo i quotidiani tendono a rendere disponibili sulle loro piattaforme online versioni in lingua facile dei loro articoli, diventando così un buon esempio di sito web accessibile a tutti. Anche le istituzioni pubbliche utilizzano sempre più spesso la lingua facile per i principali contenuti informativi.

Tecnologie di assistenza: come rendere accessibile il proprio sito web

Gli screen reader e altre tecnologie di assistenza sono ciò che rende possibile a molti l’accessibilità su Internet. I programmi elaborano i documenti web da sinistra a destra e dall’alto verso il basso, lavorando in modo strettamente lineare. Pertanto, è necessario separare layout e design. In caso contrario, gli screen reader elaboreranno la pagina in modo errato. Aiutate gli utenti a navigare nel vostro sito Internet in modo efficace, seguendo queste regole di base.

Usare i frame con parsimonia

I frame set sono molto usati dai progettisti di siti web. Tuttavia utilizzando i frame set si crea una problematica a causa del contenuto mancante e non rilevante per la pagina: i crawler individuano la pagina iniziale come priva di contenuto, collocandola molto in basso nei valori di ranking dei motori di ricerca. Anche i primi screen reader non riuscivano a decifrare i frame. Erano compatibili solo con i browser web di testo che riescono a visualizzare soltanto la denominazione del frame. Ciononostante le nuove versioni di screen reader possono essere utilizzate con quasi tutti i browser.

Skip navigation link e altre abbreviazioni

Gli screen reader trasmettono informazioni testuali al software di riproduzione vocale e ai display per il Braille. Per riuscire in questo, gli screen reader leggono la pagina dall’alto verso il basso, compresi gli elementi ricorrenti come la barra di navigazione, le icone o i link alle sottopagine. Per evitare che i lettori ripetano inutilmente queste informazioni ogni volta che si apre una nuova pagina, è necessario installare gli skip navigation link, detti anche skip link. Anche gli utenti che navigano solo con la tastiera, o eventualmente con uno strumento di sintesi vocale, hanno molti problemi quando devono navigare tra numerosi elementi differenti. Per questo l’ideale sarebbe aggiungere uno skip navigation link nella parte superiore della pagina, in modo che sia quanto più visibile possibile:

<body><a href=“#content“>saltare navigazione</a>…<main id=“content“><h1>titolo principale</h1><p>primo paragrafo</p>

Esistono anche alcuni tipi di skip link che sono invisibili nel layout, ma che vengono rilevati dagli screen reader, i quali, se il codice è come quello riportato qui di seguito, inviano all’utente il messaggio di testo alternativo “saltare la navigazione”:

<a href="#content"><img src="empty.gif" height="15" border="0" alt="saltare navigazione" width="5"></a>

È importante posizionare gli skip link quanto prima possibile all’interno del codice. L’anchor text deve essere implementato all’inizio del contenuto principale:

<a name="content"></a>

Tuttavia è meglio utilizzare gli skip link con parsimonia, poiché se usati troppo spesso, l’effetto positivo viene annullato, inducendo gli utenti a cliccare su troppi elementi. Una soluzione più elegante è l’utilizzo dei landmark ARIA, nonché una buona strutturazione del documento. WebAIM raccomanda l’uso di elementi HTML5. Tuttavia non tutti i browser supportano del tutto questo metodo. Altro aiuto potrebbe essere quello di collocare un indice all’inizio del documento, che rimanda l’utente alla sezione di interesse tramite il link inpage. Gli screen reader moderni leggono i titoli di ogni sezione. Dunque, utilizzare titoli significativi e ben strutturati aumenta la leggibilità sia per i motori di ricerca che per le tecnologie di assistenza.

Sostituire le tabelle di layout con tabelle dati

Secondo le linee guida del W3C, è preferibile utilizzare esclusivamente tabelle dati al fine di creare siti web accessibili. Con questo formato, i lettori di schermo hanno meno problemi a riprodurre le informazioni in modo significativo dopo aver fatto la conversione dei dati. Se da un lato le tabelle di layout conferiscono alla pagina una buona struttura visiva, dall’altro alto complicano agli screen reader la comprensione del contenuto. Questo tipo di design del sito web è ancora molto popolare, ma con le ultime versioni di Netscape non è tassativamente necessario.

Jan Eric Hellbusch fornisce suggerimenti sul design del sito web senza barriere. Infatti afferma che, se le tabelle di layout sono ritenute fondamentali, allora devono essere strutturate solo con elementi semplici: TABLE, TR e TD (rispettivamente: tabella, riga e cella). Se si utilizzano elementi strutturali per rendere logici i collegamenti delle celle, il lettore di schermo legge la tabella di layout come una tabella dati. Per contrastare questo problema, è necessario rimuovere alcuni elementi dall’Accessibility-Tree. Per creare un sito web accessibile, usate il codice role="none" come nell’esempio seguente. Questo vale per la piattaforma e per tutti gli altri sottoelementi. Quando si uniscono le tabelle in altre tabelle, è necessario definire entrambi gli elementi.

Esempio:

<table role="none">
<tr>
<td>
<table role="none">
<tr>
<td>
Esempio di testo <abbr title="esempio">es.</abbr> su ARIA
</td>
</tr>
</table>
</td>
</tr>
</table>

Questo è il modo in cui verrà visualizzato nell’interfaccia:

Esempio di testo <abbr title="esempio">es.</abbr> su ARIA.
In sintesi

Rendete il vostro sito web accessibile a tutti, aumentatene la fruibilità e migliorate l’esperienza dell’utente. In questo modo gli utenti con dispositivi mobili, le persone con disabilità fisiche o cognitive, gli anziani o gli utenti inesperti navigheranno con più facilità nel vostro sito web. Se pianificate la vostra presenza sul web in modo chiaro, strutturando le informazioni in modo inclusivo, migliorerete anche il vostro ranking nei motori di ricerca e aumenterete la permanenza degli utenti nel vostro sito Internet. Sono necessari del lavoro in più e dei test aggiuntivi, ma ne vale la pena: la Web Accessibility è vantaggiosa per tutti.