Ascolta la pagina

riassunto IN 30 SECONDI

Rendere un sito accessibile richiede esperienza poiché bisogna considerare numerosi aspetti: in questo articolo analizziamo i primi 5.

Il sito deve essere completamente navigabile con la tastiera e tutti i contenuti, anche quelli dinamici, devono essere accessibili. Per le immagini è più semplice: prima di tutto bisogna fare in modo che ogni immagine abbia un testo alternativo per la lettura degli screen reader. Per quanto riguarda i testi, bisogna mantenere un elevato contrasto e non utilizzare il colore per definire l’importanza del contenuto ma anche usare titoli, sottotitoli e intestazioni, strutturando un flusso di lettura chiaro.

—————————————————-

ARTICOLO

Abbiamo visto in questo articolo come si possa definire l’accessibilità online. Veniamo alla pratica: come possiamo rendere un sito Web più accessibile?

 

La scelta degli strumenti per la realizzazione del sito

Prima di qualsiasi consiglio o buona pratica, dobbiamo scegliere un CMS strutturato in ottica di accessibilità o rivolgerci a programmatori professionisti. Perché, chiaramente, non basta aggiungere un plugin che ingrandisca il carattere o elimini il colore.

Noi di Comunilabo abbiamo scelto WordPress: sebbene sia possibile trovare strumenti di accessibilità per quasi tutti i CMS, riteniamo che WordPress al momento offra le migliori opportunità, dedicando tempo e risorse specifiche.

 

Veniamo ora agli interventi.

1. Il sito deve essere navigabile con la tastiera

Questo passaggio è uno tra i più importanti: affinché un sito web sia accessibile, deve poter essere navigato senza l’uso del mouse, come avviene grazie a molte tecnologie assistive. Quindi tutte le principali funzionalità devono essere raggiungibili tramite una tastiera e nient’altro, compreso l’accesso a tutte le pagine, collegamenti, contenuti, moduli…

La navigazione più frequente attraverso la tastiera avviene con il tasto Tab che “salta” tra le aree della pagina, soffermandosi sui collegamenti, pulsanti e moduli. Quindi, il nostro obiettivo è di garantire che tutti i contenuti web e la navigazione siano accessibili utilizzando Tab.

Questa verifica è semplice: se nel tuo sito non è possibile accedere a determinati elementi o la navigazione è difficile, occorre individuare questo problemi e risolverli.

 

2. Tutti i contenuti devono essere effettivamente accessibili

Oltre a rendere il sito compatibile con la navigazione da tastiera, bisogna assicurarsi che tutti i contenuti della pagina siano effettivamente accessibili. Anche se nell’uso normale questo può non essere un problema, può diventarlo quando una pagina contiene contenuti dinamici.

Il contenuto è dinamico se può cambiare senza che la pagina si stia ricaricando. Ad esempio, molti screen reader “leggeranno” il sito solo come appare quando viene caricato per la prima volta. Quindi, è necessario fare in modo che legga anche il nuovo contenuto aggiornato o l’utente lo perderà.

In pratica, si tratta di taggare il contenuto dinamico in modo che gli screen reader e i dispositivi simili comprendano il contenuto mentre cambia.

Questo sistema è anche utile per rendere la navigazione più semplice perché consente agli utenti di saltare direttamente a contenuti specifici. 

 

3. Tutte le immagini devono avere un testo alternativo

Gli screen reader accedono al testo alternativo per “leggere” l’immagine. Si può utilizzare questo campo per descrivere l’immagine, dando informazioni agli utenti che altrimenti la perderebbero.

Inoltre, il testo alternativo è particolarmente utile a migliorare la SEO del sito, fornendo ai motori di ricerca più informazioni da scansionare.

 

4.  Mantenere un elevato contrasto e non utilizzare il colore per definire l’importanza del contenuto

È importante assicurarsi che i colori utilizzati sul sito creino un buon contrasto, per garantire che tutti possano distinguere i vari elementi della pagina.

Il primo intervento, naturalmente, è fare in modo che il testo risalti sullo sfondo. L’ideale è contrapporre un testo scuro ad uno sfondo chiaro, evitando i colori simili e le sfumature.

Anche in questo caso si tratta di un intervento che non facilita solo le persone con disabilità visive: tutti subiscono un affaticamento degli occhi se manca il contrasto, abbandonando più rapidamente la pagina. 

Un altro aspetto importante è l’uso del colore per definire l’importanza di un’informazione: le persone con daltonismo potrebbero essere in grado di non percepire correttamente una parola o una frase importante poiché non colgono la differenza del colore. Allo stesso modo, gli screen reader non evidenziano un contenuto se è caratterizzato solo dal cambio di colore. 

 

Questa problematica si collega direttamente al prossimo punto.

 

5. Usare titoli, sottotitoli e intestazioni, strutturando un flusso di lettura chiaro

Un altro intervento fondamentale per rendere accessibile il sito è strutturare i tuoi contenuti utilizzando con attenzione le intestazioni. In questo modo i contenuti saranno molto più facili da capire e memorizzare, migliorando anche il flusso della lettura.

Inoltre, le intestazioni chiare aiutano anche gli screen reader a interpretare le pagine. 

Non si tratta di un intervento complicato ma richiede la progettazione della pagina o dell’articolo prima di arrivare alla scrittura. Bisogna infatti realizzare una buona alberatura che consenta di utilizzare i livelli di intestazione corretti nei contenuti.

Studiare l’uso corretto di titoli (solitamente scritti in H1), sottotitoli (che iniziano con H2 e possono poi essere nidificati ulteriormente con H3, seguiti da H4). È importante evitare di passare da H4, ad esempio, ad H2, per fornire correttamente le informazioni di priorità.

 

Immagine: shutterstock/Ollyy

Clicca per leggere la seconda parte di questo articolo “10 criteri per rendere accessibile un sito web (parte 2)”

Clicca per leggere l’articolo “Breve introduzione all’accessibilità del web”

ARGOMENTI COLLEGATI

POTREBBERO INTERESSARTI ANCHE:

Ti occupi di accessibilità e vuoi condividere le tue competenze con un articolo?

Contattaci: costruiamo insieme il nostro laboratorio di comunicazione accessibile.

Pin It on Pinterest

Skip to content