Sito web ac­ces­si­bi­le: raggiungi più persone in rete

L’ac­ces­si­bi­li­tà dei siti web ga­ran­ti­sce agli utenti con diversi tipi di esigenze o di li­mi­ta­zio­ni fun­zio­na­li l’utilizzo di internet senza alcuna re­stri­zio­ne e senza un aiuto esterno. Lo scopo di un web design ac­ces­si­bi­le è quello di evitare l’esclu­sio­ne dalla rete di alcuni gruppi di utenti come, ad esempio, le persone con di­sa­bi­li­tà fisica o mentale.

Che cosa s’intende per ac­ces­si­bi­li­tà dei siti web?

L’ac­ces­si­bi­li­tà su internet mira a con­sen­ti­re a tutti i gruppi di persone la stessa par­te­ci­pa­zio­ne ai contenuti web. Ciò significa che tutte le persone possono uti­liz­za­re l’offerta web allo stesso modo, senza essere escluse da de­ter­mi­na­ti contenuti o media a causa di li­mi­ta­zio­ni. Nell’ambito dell’in­clu­sio­ne digitale, le presenze web ac­ces­si­bi­li sono un fattore im­por­tan­te di cui le aziende do­vreb­be­ro essere con­sa­pe­vo­li. Inoltre, i siti web ac­ces­si­bi­li hanno anche un’influenza positiva sull’ot­ti­miz­za­zio­ne per i motori di ricerca.

Le barriere sono ostacoli che rendono più difficile o im­pe­di­sco­no l’uso delle offerte digitali in egual maniera per tutte le persone. Mentre la con­sa­pe­vo­lez­za dell’ac­ces­si­bi­li­tà nel contesto degli spazi pubblici è cresciuta in modo si­gni­fi­ca­ti­vo negli ultimi anni, sul web le barriere con­ti­nua­no spesso a nascere in­vo­lon­ta­ria­men­te, ad esempio a causa di decisioni tecniche, di design o dei contenuti. Studi ed esempi pratici mostrano che, in par­ti­co­la­re, elementi in­te­rat­ti­vi come mec­ca­ni­smi di re­gi­stra­zio­ne o di sicurezza possono essere pro­ble­ma­ti­ci. Per esempio, alcuni captcha con caratteri distorti o attività basate esclu­si­va­men­te su immagini rendono l’accesso ai contenuti web molto più difficile per le persone con di­sa­bi­li­tà visive e risultano quindi in contrasto con i moderni requisiti di ac­ces­si­bi­li­tà digitale.

Standard per siti web ac­ces­si­bi­li

Lo standard pro­ba­bil­men­te più im­por­tan­te per la rea­liz­za­zio­ne di siti web ac­ces­si­bi­li sono le WCAG o, più pre­ci­sa­men­te, le WCAG 2.2 (Web Content Ac­ces­si­bi­li­ty Gui­de­li­nes). Si tratta di linee guida proposte dal consorzio W3C che rap­pre­sen­ta­no l’attuale standard di ri­fe­ri­men­to in­ter­na­zio­na­le per i siti web ac­ces­si­bi­li. Le WCAG 2.2 si con­cen­tra­no so­prat­tut­to su una migliore usabilità, su una gestione più chiara di tastiera e focus e su un’in­te­ra­zio­ne sem­pli­fi­ca­ta sui di­spo­si­ti­vi mobili. In questo modo, le linee guida ri­spon­do­no al cam­bia­men­to delle abitudini d’uso e a barriere finora non af­fron­ta­te in modo adeguato.

Tra i criteri di successo più im­por­tan­ti delle WCAG 2.2 rientrano, tra gli altri:

• Vi­si­bi­li­tà del focus della tastiera: gli elementi in­te­rat­ti­vi devono essere chia­ra­men­te ri­co­no­sci­bi­li durante la na­vi­ga­zio­ne tramite tastiera.
• Di­men­sio­ne minima degli elementi: le aree clic­ca­bi­li e touch devono essere suf­fi­cien­te­men­te grandi per evitare errori di utilizzo.
• Al­ter­na­ti­ve ai movimenti di tra­sci­na­men­to: le funzioni non devono essere uti­liz­za­bi­li esclu­si­va­men­te tramite drag and drop.
• Evitare in­se­ri­men­ti ri­don­dan­ti: le in­for­ma­zio­ni non devono essere inserite più volte.
• Au­ten­ti­ca­zio­ne ac­ces­si­bi­le: le procedure di accesso non devono basarsi su attività cognitive difficili da risolvere, come alcuni captcha.

Le WCAG 2.2 sono quindi un parametro centrale per lo sviluppo web moderno e co­sti­tui­sco­no al contempo la base tecnica per i requisiti di legge, ad esempio nell’ambito della legge italiana sull’ac­ces­si­bi­li­tà digitale.

Per­ce­zio­ne

Molti siti web con­ten­go­no annunci lam­peg­gian­ti, il campo relativo ai commenti è ricco di testo e, a volte, anche di musica di sot­to­fon­do per sot­to­li­nea­re il tema della pagina o l’atmosfera che questa vuole suggerire. A seconda del tipo e del grado di di­sa­bi­li­tà, chi visita il tuo sito web potrebbe non percepire questi elementi, del tutto o in parte.

I non vedenti, ad esempio, navigano in internet senza potersi affidare a stimoli visivi. Al loro posto usano uno screen reader che legge i contenuti del sito web: questo ap­pa­rec­chio trasmette i dati leggibili alle tec­no­lo­gie assistive in uso. Lo schermo Braille, ad esempio, riesce a con­ver­ti­re il testo di modo che sia leggibile per i non vedenti. 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 tec­no­lo­gia, è possibile anche uti­liz­za­re l’udito per recepire i contenuti di un sito web. In questi casi, tuttavia, un’eventuale musica di sot­to­fon­do diventa un elemento di disturbo.

Le persone con una di­sa­bi­li­tà visiva meno grave, tra cui molti anziani e molte anziane, riescono a leggere il sito web con i loro occhi, ma spesso ne­ces­si­ta­no di immagini no­te­vol­men­te in­gran­di­te. Chi invece è affetto da dal­to­ni­smo non riesce a decifrare cor­ret­ta­men­te gli avvisi che sono espressi solo dal colore. Di­ver­sa­men­te i non udenti non per­ce­pi­sco­no le in­for­ma­zio­ni di un file audio e di gran parte dei file video.

Com­pren­sio­ne

Gli utenti molto giovani, gli anziani e le anziane o le persone con di­sa­bi­li­tà cognitive a volte hanno dif­fi­col­tà a capire un testo ricco di moderni termini tecnici o di complesse ab­bre­via­zio­ni. Molti utenti hanno dif­fi­col­tà a com­pren­de­re i contenuti di un sito web anche quando questi sono te­ma­ti­ca­men­te distanti tra loro, poiché risulta com­pli­ca­to ri­co­no­scer­ne il contesto.

In­te­ra­zio­ne e na­vi­ga­zio­ne

Dato che sono sempre più numerosi gli utenti che navigano in internet tramite smart­pho­ne, risulta estre­ma­men­te fa­sti­dio­so se non è possibile cliccare i link con le dita senza dif­fi­col­tà e con pre­ci­sio­ne. Se il sito non è ot­ti­miz­za­to per gli smart­pho­ne e i link in caratteri piccoli sono troppo vicini tra loro, anche le persone anziane con le mani poco ferme si sen­ti­ran­no in dif­fi­col­tà.

Tuttavia, sono stati svi­lup­pa­ti numerosi strumenti per fa­ci­li­ta­re l’uso dei computer da parte delle persone con di­sa­bi­li­tà fisiche: a questo scopo, alcuni strumenti catturano i movimenti oculari, mentre altre tec­no­lo­gie vengono uti­liz­za­te tramite la tastiera. In linea di principio, un sito web ac­ces­si­bi­le dovrebbe essere concepito in modo da poter essere valutato uti­liz­zan­do tali tec­no­lo­gie assistive: se il tuo sito web non è na­vi­ga­bi­le, i po­ten­zia­li clienti che dipendono da questo fattore di ac­ces­si­bi­li­tà non hanno alcuna pos­si­bi­li­tà di be­ne­fi­cia­re della tua offerta.

Se si suppone che gli utenti compilino un modulo, ad esempio, per iscri­ver­si a una new­slet­ter, spesso si ve­ri­fi­ca­no errori. La password è troppo corta o la data di nascita non cor­ri­spon­de ai parametri impostati. Pertanto, è im­por­tan­te formulare istru­zio­ni chiare per la ri­so­lu­zio­ne dei problemi. L’in­te­ra­zio­ne con un sito web comprende anche la na­vi­ga­zio­ne. Le persone che uti­liz­za­no di­spo­si­ti­vi con un display piccolo o che lavorano con un in­gran­di­men­to dello schermo hanno bisogno di percorsi di na­vi­ga­zio­ne adattati a loro e di una struttura chiara del sito web.

In­se­ri­men­ti

Il campo dei commenti consente agli utenti di lasciare un feedback. Tramite questa funzione possono esprimere la loro opinione su un prodotto o un contenuto o, ancora, scambiare opinioni con altri utenti. Le persone con di­sa­bi­li­tà visive spesso usano una lente d’in­gran­di­men­to dello schermo quando scrivono. In questo modo gli elementi appaiono no­te­vol­men­te più grandi e aumenta la distanza tra la colonna da leggere e il campo di im­mis­sio­ne. Per questo si consiglia di disporre gli elementi più vicini vi­si­va­men­te per fa­ci­li­ta­re così lo scambio di in­for­ma­zio­ni.

Quali vantaggi offre un web design ac­ces­si­bi­le?

L’ab­bat­ti­men­to delle barriere in internet migliora l’usabilità del tuo sito web e quindi anche il tuo ranking su Google. La struttura di un sito web ac­ces­si­bi­le ripaga anche dal punto di vista economico e richiede solo un piccolo sforzo ag­giun­ti­vo. Inoltre, i siti web ac­ces­si­bi­li sono conformi sia alle direttive UE, tra cui lo European Ac­ces­si­bi­li­ty Act (EAA), che alla legge italiana. Un altro fattore non tra­scu­ra­bi­le per le aziende: i siti web ac­ces­si­bi­li rag­giun­go­no una clientela più ampia, in quanto sono ac­ces­si­bi­li a più utenti rispetto ai siti non ot­ti­miz­za­ti per persone con di­sa­bi­li­tà.

Pro­get­ta­re un sito ac­ces­si­bi­le: consigli ed esempi

Chiunque desideri creare un sito web ac­ces­si­bi­le dovrebbe esaminare in par­ti­co­la­re la struttura delle in­for­ma­zio­ni e i vari com­po­nen­ti visivi della propria presenza sul web.

Primo passaggio: crea una struttura in­for­ma­ti­va chiara

Struttura il tuo sito web in modo chiaro e opta per un lin­guag­gio semplice, di immediata com­pren­sio­ne: questo attirerà più lettori e lettrici e mi­glio­re­rà il tuo ranking su Google, dato che i motori di ricerca valutano anche la leg­gi­bi­li­tà dei contenuti. Se desideri con­cen­trar­ti sull’ot­ti­miz­za­zio­ne SEO e miri a rendere più chiara e com­pren­si­bi­le la struttura del tuo sito web, presta at­ten­zio­ne ai seguenti elementi:

Secondo passaggio: attiva stimoli visivi

La pos­si­bi­li­tà di in­gran­di­re il font di un testo o di mo­di­fi­car­ne i colori aiuta le persone con problemi di vista o affette da dal­to­ni­smo 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ù fa­cil­men­te possibile. Sarebbe l’ideale evi­den­zia­re gli elementi in­te­rat­ti­vi con pulsanti o colori: ad esempio, far 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 tra­smet­te­re in­for­ma­zio­ni è es­sen­zia­le uti­liz­za­re anche altri segnali in­for­ma­ti­vi, come numeri o aste­ri­schi.

Close

Le persone che soffrono di crisi epi­let­ti­che sono a rischio se un sito web contiene grafici o video che tra­smet­to­no immagini a in­ter­mit­ten­za per più di tre volte al secondo. Gli scien­zia­ti e le scien­zia­te hanno anche scoperto che i modelli di griglia ca­rat­te­riz­za­ti da alto contrasto possono causare con­vul­sio­ni nelle persone affette da epilessia fo­to­sen­si­bi­le.

Terzo passaggio: prepara le in­for­ma­zio­ni in modo versatile

Prendi in con­si­de­ra­zio­ne la totale ac­ces­si­bi­li­tà al web anche nella vita di tutti i giorni. Ogni giorno vengono caricati nuovi contenuti su internet per l’ot­ti­miz­za­zio­ne per i motori di ricerca, per le pubbliche relazioni o per pre­sen­ta­re nuove offerte di vendita: facilita l’accesso ai vi­si­ta­to­ri e alle vi­si­ta­tri­ci adattando le in­for­ma­zio­ni alle loro esigenze.

Una com­po­nen­te fon­da­men­ta­le di un sito web ac­ces­si­bi­le, che svolge anche un ruolo nell’ot­ti­miz­za­zio­ne per i motori di ricerca, è l’as­se­gna­zio­ne di un testo al­ter­na­ti­vo per le immagini. I crawler e gli screen reader non sono in grado di valutare il contenuto delle immagini, ma questo vale anche per gli utenti non vedenti. Il testo al­ter­na­ti­vo informa quindi sul contenuto dell’immagine. Ma anche chi non ha una buona con­nes­sio­ne internet, a causa delle quali le immagini si caricano len­ta­men­te o non si caricano affatto, beneficia di questi testi.

Tra­scri­zio­ni e sot­to­ti­to­li

Un impegno più ampio è la creazione continua e tem­pe­sti­va di tra­scri­zio­ni e sot­to­ti­to­li. Con questi strumenti è possibile dotare le in­for­ma­zio­ni di contenuto audio per i non udenti. A tale scopo, la tra­scri­zio­ne, che riproduce la lingua parlata, i suoni e i rumori sotto forma di testo, viene collocata il più vicino possibile al contenuto audio cor­ri­spon­den­te, ad esempio tramite un pulsante con un col­le­ga­men­to al documento.

I sot­to­ti­to­li rendono possibile ai non udenti la com­pren­sio­ne dei video. Anche gli utenti che non vogliono uti­liz­za­re la ri­pro­du­zio­ne del suono (ad esempio, perché vogliono evitare di fare rumore nel posto in cui si trovano) possono be­ne­fi­cia­re di questa funzione. Le persone con disturbi cognitivi o com­por­ta­men­ta­li come l’ADHD, in maniera analoga alle persone con problemi di udito, assorbono meglio le in­for­ma­zio­ni trasmesse tramite video quando possono di­sat­ti­va­re il rumore di sot­to­fon­do uti­liz­zan­do un’im­po­sta­zio­ne del lettore video.

Spie­ga­zio­ne audio

Le persone con un’acutezza visiva limitata inferiore al 30% sono con­si­de­ra­te ipo­ve­den­ti; se l’acutezza visiva risulta essere inferiore al 2%, sono con­si­de­ra­te non vedenti, poiché per­ce­pi­sco­no gli stimoli visivi solo in misura limitata o per niente. Per aiutare queste persone a capire il contenuto video di un sito web, è ne­ces­sa­rio ag­giun­ge­re una traccia audio, che fornisce spie­ga­zio­ni su com­po­nen­ti visivi, come i paesaggi o le persone, e descrive bre­ve­men­te le azioni visibili. Inserisci tali spie­ga­zio­ni nella re­gi­stra­zio­ne audio originale in modo che le tracce non si so­vrap­pon­ga­no.

Lingua facile

La lingua facile esprime ogni concetto in modo molto semplice. Aiuta le persone con di­sa­bi­li­tà cognitive a com­pren­de­re meglio questioni complesse. Ad esempio, nella lingua facile si evitano il con­giun­ti­vo, i sinonimi e le negazioni; le frasi sono brevi e tra­smet­to­no solo un’in­for­ma­zio­ne alla volta.

Le persone con problemi cognitivi hanno lo stesso diritto all’in­for­ma­zio­ne come tutte le altre. Per questo motivo i quo­ti­dia­ni tendono a rendere di­spo­ni­bi­li sulle loro piat­ta­for­me online versioni in lingua facile dei loro articoli, di­ven­tan­do così un buon esempio di sito web ac­ces­si­bi­le a tutti e a tutte. Anche le isti­tu­zio­ni pubbliche uti­liz­za­no sempre più spesso la lingua facile per i prin­ci­pa­li contenuti in­for­ma­ti­vi.

Quarto passaggio: rendi il tuo sito web com­pa­ti­bi­le

Gli screen reader e le altre tec­no­lo­gie assistive sono ciò che rende possibile a molti l’ac­ces­si­bi­li­tà su internet. I programmi elaborano i documenti web da sinistra a destra e dall’alto verso il basso, lavorando in modo stret­ta­men­te lineare. Pertanto, è ne­ces­sa­rio separare layout e design. In caso contrario, gli screen reader ela­bo­re­ran­no la pagina in modo errato. Pertanto, aiuta gli utenti a navigare sul tuo sito ef­fi­cien­te­men­te, seguendo le regole di base riportate qui di seguito.

Skip na­vi­ga­tion link e altre ab­bre­via­zio­ni

Gli screen reader tra­smet­to­no in­for­ma­zio­ni testuali al software di ri­pro­du­zio­ne vocale e agli schermi Braille. Per riuscire in questo, questi strumenti leggono la pagina dall’alto verso il basso, compresi gli elementi ri­cor­ren­ti come la barra di na­vi­ga­zio­ne, le icone o i link alle sot­to­pa­gi­ne. Per evitare che gli screen reader ripetano inu­til­men­te queste in­for­ma­zio­ni ogni volta che si apre una nuova pagina, è ne­ces­sa­rio in­stal­la­re gli skip na­vi­ga­tion link, detti anche “skip link”, cioè dei link che portano di­ret­ta­men­te a una de­ter­mi­na­ta pagina.

Anche gli utenti che navigano solo con la tastiera, o even­tual­men­te con uno strumento di sintesi vocale, hanno grossi problemi quando devono navigare tra numerosi elementi dif­fe­ren­ti. Per questo l’ideale sarebbe ag­giun­ge­re uno skip na­vi­ga­tion link nella parte superiore della pagina, in modo che sia il più visibile possibile:

<a href="#content">Salta navigazione</a>
<main id="content">
    <h1>Titolo principale</h1>
    <p>Primo paragrafo</p>
</main>

Esistono anche alcuni tipi di skip link che sono in­vi­si­bi­li 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 al­ter­na­ti­vo “Salta na­vi­ga­zio­ne”:

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

È im­por­tan­te po­si­zio­na­re gli skip link quanto prima possibile all’interno del codice. Il testo di an­co­rag­gio deve essere im­ple­men­ta­to all’inizio del contenuto prin­ci­pa­le:

<div id="content"></div>

Tuttavia, è meglio uti­liz­za­re gli skip link con par­si­mo­nia, poiché se usati troppo spesso, l’effetto positivo viene annullato, inducendo gli utenti a cliccare su troppi elementi. Una soluzione più elegante è l’utilizzo degli standard ARIA, nonché una buona strut­tu­ra­zio­ne del documento. Si consiglia di uti­liz­za­re elementi di HTML5.

Un altro aiuto potrebbe essere quello di collocare un indice all’inizio del documento, che rimanda l’utente alla sezione di interesse tramite link inpage, ovvero nella pagina. Gli screen reader moderni leggono i titoli di ogni sezione. Dunque, uti­liz­za­re titoli si­gni­fi­ca­ti­vi e ben strut­tu­ra­ti aumenta la leg­gi­bi­li­tà sia per i motori di ricerca che per le tec­no­lo­gie assistive.

So­sti­tui­re le tabelle di layout con tabelle di dati

Secondo le linee guida del consorzio W3C, è pre­fe­ri­bi­le uti­liz­za­re esclu­si­va­men­te tabelle di dati al fine di creare siti web ac­ces­si­bi­li. Con questo formato, gli screen reader hanno meno problemi a ri­pro­dur­re le in­for­ma­zio­ni in modo si­gni­fi­ca­ti­vo dopo aver ef­fet­tua­to la con­ver­sio­ne dei dati. Se da un lato le tabelle di layout con­fe­ri­sco­no alla pagina una buona struttura visiva, dall’altro com­pli­ca­no agli screen reader la com­pren­sio­ne del contenuto.

Definisci le tabelle di layout solo con elementi semplici: TABLE, TR e TD (ri­spet­ti­va­men­te: tabella, riga e cella). Se utilizzi elementi strut­tu­ra­li per rendere logici i col­le­ga­men­ti delle celle, lo screen reader legge la tabella di layout come una tabella di dati. Per con­tra­sta­re questo problema, è ne­ces­sa­rio rimuovere alcuni elementi dall’Ac­ces­si­bi­li­ty-Tree.

Per creare un sito web ac­ces­si­bi­le, usa il codice role="none" come nell’esempio seguente. Questo vale per la piat­ta­for­ma e per tutti gli altri sot­toe­le­men­ti. Quando si uniscono le tabelle in altre tabelle, è ne­ces­sa­rio definire entrambi gli elementi.

<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>

Sito web ac­ces­si­bi­le: lista di controllo

Al termine della creazione del tuo sito web, dai un’occhiata alla nostra lista di controllo per as­si­cu­rar­ti di aver pensato ai fattori più im­por­tan­ti di ac­ces­si­bi­li­tà.

✓ In­for­ma­zio­ni ben strut­tu­ra­te e com­pren­si­bi­li

✓ Utilizzo di un lin­guag­gio semplice e ac­ces­si­bi­le

✓ Testi al­ter­na­ti­vi per le immagini

✓ Tra­scri­zio­ni video e audio

✓ Codifica a colori dei contenuti im­por­tan­ti

✓ Contrasto ricco

✓ Supporto di screen reader

Strumenti gratuiti per creare siti web ac­ces­si­bi­li

Esistono diversi strumenti che possono aiutarti a creare un sito web ac­ces­si­bi­le. Di seguito te ne pre­sen­tia­mo alcuni:

• Ac­ces­si­bi­li­ty – A Powerful Web Assistant: un’esten­sio­ne per il browser Chrome per ve­ri­fi­ca­re gli aspetti che rendono un sito ac­ces­si­bi­le.
• Ac­ces­si­bi­li­ty Checker: uti­liz­zan­do la web app Ac­ces­si­bi­li­ty Checker, è possibile testare gra­tui­ta­men­te la con­for­mi­tà WCAG del proprio sito web in alcuni paesi.
• WP Ac­ces­si­bi­li­ty: plugin per WordPress che verifica l’ac­ces­si­bi­li­tà del tema in­stal­la­to e aiuta ad ag­giun­ge­re le funzioni richieste.

Con­clu­sio­ne: l’ac­ces­si­bi­li­tà digitale migliora la UX per tutti e tutte

Se rendi il tuo sito web ac­ces­si­bi­le a tutti e a tutte, ne aumenti l’usabilità e migliori l’espe­rien­za dell’utente. In questo modo gli utenti con di­spo­si­ti­vi mobili, le persone con di­sa­bi­li­tà fisiche o cognitive, gli anziani, le anziane e gli utenti inesperti na­vi­ghe­ran­no più fa­cil­men­te sul tuo sito web. Se pia­ni­fi­chi la tua pagina in modo chiaro, strut­tu­ran­do le in­for­ma­zio­ni in modo inclusivo, mi­glio­re­rai anche il tuo ranking nei motori di ricerca e gli utenti si sof­fer­me­ran­no più a lungo sul tuo sito. Per riuscire in questa impresa, sono ov­via­men­te necessari del lavoro in più e dei test ag­giun­ti­vi, ma ne vale la pena: l’ac­ces­si­bi­li­tà web è van­tag­gio­sa per tutti e tutte.