Come rendere accessibile un sito web

Una tematica spesso messa in secondo piano o, peggio ancora, ignorata completamente, è l’accessibilità di un sito web.

Ciò è dovuto principalmente al fatto che se ne parla poco. Quando ci si forma sullo sviluppo web, sia che si tratti di corsi specifici, sia che si tratti di percorsi universitari, questo tema viene spesso sottovalutato. La necessità di imparare ad affrontare questa tematica emerge, spesso e volentieri, quando la richiesta è diretta. Ne è un esempio la creazione di un sito per la pubblica amministrazione che obbliga al requisito di accessibilità.

Dunque, quello di cui parleremo oggi fa riferimento a tutte le pratiche necessarie a rendere fruibile un sito web a persone con diversi tipi di disabilità. Un sito web dovrebbe essere quindi accessibile ai non vedenti, ai non udenti e a chi ha qualsiasi limitazione di mobilità, anche temporanea; si pensi infatti a chi non può utilizzare entrambe le braccia. L’accessibilità, inoltre, include anche l’accesso di persone con strumenti limitati: questo concetto verrà chiarito tra poco.

Sebbene il tema possa sembrare recente, in realtà l’accessibilità è stata affrontata almeno dal 2004, con la legge Stanca “Disposizioni per favorire l’accesso dei soggetti disabili agli strumenti informatici”.

Questa legge riguarda (fonte wikipedia):

• Le pubbliche amministrazioni;
• Gli enti pubblici economici;
• Le aziende private concessionarie di servizi pubblici;
• Gli enti di assistenza e di riabilitazione pubblici;
• Le aziende di trasporto e di telecomunicazione a prevalente partecipazione di capitale pubblico;
• Le aziende municipalizzate regionali;
• Le aziende appaltatrici di servizi informatici.

E si evoluta fino ad estendersi alle aziende private. Il limite di scadenza, in tal senso, è fissato al 28 giugno 2025.

Sebbene vi sia ancora tempo per i privati, attivarsi già da ora comporta solamente dei vantaggi.

Le linee guida di riferimento sono il WCAG che fissa le regole e requisiti da soddisfare.

Perché l’accessibilità è importante e riguarda anche te

Attenzione a credere che questa tematica sia poco importante o che possa riguardare solo gli altri. Come detto, si parla di ogni tipo di disabilità, anche temporanea: chi si ritrova, a seguito di un incidente, con un braccio ingessato, potrebbe beneficiare dei “vantaggi” offerti da un sito accessibile.

Una domanda che spesso si pone chi si ritrova a dover rendere un sito accessibile è “perché la persona con difficoltà non si fa aiutare da qualcuno?”, quasi a volersi deresponsabilizzare da questo impegno. La risposta è che chiunque dovrebbe poter navigare in autonomia per un banale, quanto comprensibile, diritto alla privacy.

Ti invito infatti a riflettere come sarebbe la tua esperienza di navigazione se lì, di fianco a te, ci fosse qualcuno che vede tutto quello che fai. Immagina per esempio di voler accedere al tuo estratto conto online: è perfettamente comprensibile che tu non voglia nessuno di fianco a te. Oppure se hai voglia di fare shopping online, forse non ha voglia che qualcuno metta i prodotti nel tuo carrello senza lasciarti la benché minima riservatezza.

E non è importante solo per questi motivi, perché passando su un piano puramente economico-materiale, rendere un sito accessibile vuol dire allargare la platea di utenti e clienti. Restare distanti da queste problematiche ti allontana anche da una importante fetta di potenziali clienti.

In questo articolo andremo a vedere alcune cose da implementare affinché un sito possa essere considerato accessibile. Tieni conto che sarà necessario un test manuale per poter stabilire ufficialmente l’accessibilità del tuo sito, ma questo non ti impedisce di utilizzare dei tool online per fare le prime verifiche.

Accessibilità per non vedenti

Se il tema dell’accessibilità è una novità per te, potresti credere che rendere un sito accessibile a un non vedente sia qualcosa di estremamente difficile o addirittura impossibile.

In realtà è forse una delle disabilità più facili da trattare. Come è banale sottolineare, un non vedente non può in autonomia leggere il contenuto di un sito: in suo ausilio interviene uno strumento detto “screen reader”. Questo apparecchio legge il contenuto di una pagina in modo tale da rendere fruibile il contenuto.

Potresti pensare che quindi è già tutto risolto: il tuo sito ha il testo e basta leggere quello.

In realtà manca un’accortezza in più: i contenuti multimediali non possono essere letti come un testo.

Come si comporta uno “screen reader” quando incontra nella sua “lettura” un’immagine?

Ci sono due scenari, uno è da sito accessibile e l’altro no.

Scenario A:

• Lo screen reader trova l’immagine e non è in grado di interpretarla in nessun modo, di conseguenza il suo contenuto non viene letto e il sito non è fruibile a un non vedente.

Scenario B:

• Lo screen reader trova l’immagine e gli da un senso, questo senso lo riporta all’utente finale sotto forma di descrizione.

Come si implementa quindi una descrizione? È semplicissimo, basta assegnare un valore al parametro “alt” dell’immagine. Attenzione però a scrivere un parametro sensato e descrittivo.

Nel campo SEO l’utilizzo di un parametro alt influisce positivamente su un sito; tuttavia, viene spesso utilizzato in maniera frettolosa ed estremamente sintetica. Ad esempio, se l’immagine contiene un castello, un parametro alt potrebbe essere “castello”. Tuttavia, in ambito di accessibilità, non può bastare una descrizione simile.

Il parametro alt, infatti, deve essere descrittivo e contestualizzato: se l’immagine del castello raffigura per esempio un evento, è opportuno descriverlo -> “Immagine del Castello Sforzesco durante la festa annuale del …”. In assenza di un contesto specifico basta una descrizione in grado di far capire di cosa si tratta -> “immagine del Castello Sforzesco”.

Inserire un parametro alt è molto semplice sia se si sta lavorando direttamente sul codice HTML, sia se si sta utilizzando un CMS come WordPress:

<img src="castello.jpg">

Diventa:

<img src="castello.jpg" alt="immagine del castello sforzesco">

Nel caso tu stia usando un CMS, troverai tra i tuoi file multimediali un input di testo per inserire la tua descrizione, nel caso di WordPress:

Nel caso delle form, invece, bisogna fare un utilizzo simile del parametro alt per l’etichetta “label”. Deve essere possibile compilare ogni campo del form senza lasciare ambiguità o descrizioni generiche.

<label for="nome"> Nome: <input id="nome" type="text" /> </label>

Altri parametri di accessibilità

Ci sono poi tanti altri tipi di difficoltà che gli utenti possono avere, a titolo non esaustivo citiamo:

• Daltonismo
• Fotosensibilità – Epilessia
• ADHD
• DSA
• Sordità
• Disabilità motorie

Per ogni tipo di disabilità possono essere messe in atto delle soluzioni per minimizzare il disagio e rendere comunque fruibile il sito.

Daltonismo

Per agevolare gli utenti daltonici, è importante che il contrasto di colori sia idoneo. Due palette di colori infatti, sebbene all’occhio di una persona non affetta da daltonismo siano distinguibili, per un daltonico potrebbero rendere incomprensibile un testo.

Prendiamo a riferimento questo testo e questo sfondo, e vediamo come verrebbe visualizzato da un utente non affetto da daltonismo:

Sebbene già non risulti gradevole da vedere, resta comunque comprensibile. Ma se lo guardiamo con gli occhi di un daltonico diventa così:

Si potrebbe pensare che con un po’ di sforzo si legge. Il punto è che non dovrebbe essere richiesto alcuno sforzo per leggere un testo.

La simulazione di daltonismo presentata, è stata effettuata grazie a questo tool: https://www.it.colorlitelens.com/images/tesztek/simulator/

In questi casi bisogna trovare il giusto livello di contrasto: non dovrai provare ogni combinazione o chiedere un parere a un soggetto daltonico ad ogni tua modifica. Puoi utilizzare dei tool online pronti all’uso come: https://webaim.org/resources/contrastchecker/

Sarà il tool stesso a dirti quando un contrasto è valido o meno.

Fotosensibilità

Bisogna evitare assolutamente di far apparire luci all’improvviso o simulare lampi.

ADHD e DSA

Per i disturbi legati all’attenzione e all’apprendimento è necessario ridurre ogni elemento di distrazione. Ne sono un esempio i popup che si aprono, la pubblicità invasiva, lo scorrimento veloce di immagini e video.

Sordità

Nel caso di utenti con udito parzialmente o totalmente compromesso, è importante rendere fruibili i contenuti video. Per fare ciò è necessario implementare, oltre che i sottotitoli, anche l’audiodescrizione. L’ideale sarebbe correlare ai video la descrizione nel linguaggio dei segni, ma se ciò non è possibile, l’audio descrizione resta lo strumento da prediligere.

Disabilità motorie

Nel caso di disabilità motorie è necessario prevedere un utilizzo limitato del mouse. Bisogna rendere un sito navigabile attraverso la tastiera. Mediante il tasto TAB l’utente devo poter navigare in ogni sezione del sito. Se qualcosa non si può fare senza mouse, c’è un problema e bisogna risolverlo.

Disabilità generiche

Osserva questa immagine:

Sicuramente più volte nella tua vita ti sarà capitato di compilare un form simile. Il suo scopo è sicuramente positivo: impedire a robot di compilare dei form ed effettuare attacchi massici a un sistema informatico.

Ma alla luce di quanto ci siamo detti finora non trovi che quello che c’è nell’immagine è profondamente sbagliato in un’ottica di accessibilità?

Un discorso perfettamente analogo si può fare per questa variante di codice chapta.

La soluzione in questo caso non è, ovviamente, quella di lasciarsi esposti ad attacchi ma bensì di considerare l’uso di strumenti alternativi.

Per esempio, esiste uno strumento chiamato reCHAPTA che richiede solo un click (o una selezione mediante il TAB). Viene richiesto di spuntare una casella con il testo “Non sono un robot” e dopodiché, in automatico, si viene riconosciuti come umani. Questo è possibile grazie a un algoritmo, sviluppato da Google, che verifica le azioni compiute prima di sottomettere il form.

Per semplificare al massimo, l’algoritmo valuta tutte le azioni svolte sulla pagina: un robot è programmato per eseguire velocemente e in maniera ripetuta delle azioni. Un umano invece nel compilare un form potrebbe impiegare più tempo a scrivere del testo, potrebbe correggere qualcosa, potrebbe sbagliare la compilazione di un campo. Insomma, questo algoritmo fa una valutazione sul comportamento e se non lo trova sospetto consente di proseguire. 

Limitazioni da supportare

L’accessibilità non riguarda però solo un aspetto fisico. Può riguardare anche gli strumenti di cui è dotato l’utente. Esistono infatti delle limitazioni tecniche legate a connessioni lente o dispositivi poco aggiornati.

È il caso ad esempio di chi, vivendo in zone rurali, non ha accesso a una connessione veloce. Oppure è il caso di chi utilizzando dispositivi e software vecchi (si pensi a Internet Explorer) non può accedere a determinati contenuti.

Chiaramente il problema da evitare è il negato accesso all’informazione. Infatti, chi utilizza sistemi obsoleti o connessioni poco performanti non potrà sicuramente godere della stessa esperienza di utilizzo, ma l’accesso all’informazione deve essere assicurato. Un esempio può essere il provider mail che agli utenti con una connessione poco performante consente di utilizzare una versione minimale e puramente testuale del sistema.

Quanto costa creare un sito web accessibile?

Creare un sito accessibile non presenta un costo molto diverso rispetto a un sito “tradizionale”. Come hai visto si tratta di accortezze che richiedono sicuramente un impegno maggiore, ma che non giustificano una spesa elevata. Potresti dover investire del tempo o del denaro nella verifica manuale di tutti gli aspetti di accessibilità; tuttavia, se il tuo sito non è eccessivamente grande questa verifica non dovrebbe sottrarre troppo tempo.

Le competenze per rendere accessibile un sito sono molto semplici da acquisire per chi è in grado di progettare e sviluppare un sito tradizionale. Non richiedono formazione tecnica di sviluppo.

Potrebbe essere necessario destinare del tempo alla scrittura di audiodescrizioni nell’eventualità che il tuo sito avesse contenuti video/ audio ed in questo caso, a seconda dell’impegno richiesto, i costi di sviluppo potrebbero lievitare un po’, ma difficilmente in modo non sostenibile.

Cosa succede se non rendi un sito accessibile?

Nel caso in cui il tuo sito web non fosse accessibile, se questo è stato sviluppato per conto della pubblica amministrazione vi possono essere sanzioni non da poco: multe salate e lo scioglimento del contratto.

Se si tratta di un sito privato la situazione è molto diversa e al momento non sono previste sanzioni. Dal 28 giugno 2025 tuttavia entrerà in vigore l’obbligo. Ogni azienda privata con un sito web sarà tenuta a compilare un documento di accessibilità che certifica l’accessibilità del proprio sito.

Sono escluse però da questo obbligo le aziende con meno di 10 dipendenti e un fatturato non superiore a 2milioni di euro all’anno. Per le PMI con meno di 250 dipendenti e con un fatturato annuo non superiore a 50milioni di euro è prevista una clausola di salvaguardia che consente loro di valutare se il conformarsi alla regole di accessibilità comporta un onere eccessivo. Per tutte le altre aziende entrerà in vigore l’obbligo.

La sanzione in questo caso può essere di diversa natura:

• Ritiro dal mercato del prodotto non conforme
• Oscuramento dell’applicazione delle piattaforme che lo ospitano
• Sanzioni pecuniarie.

Spero di aver fornito una panoramica chiara su questa tematica, e ti invito a lasciare un commento nel caso ti andasse di esternare un dubbio o un parere.