Accessibilità web: cos’è, cosa significa e perché serve oggi ai siti

Mettici alla prova

Analizza il tuo sito

Seleziona la lingua del database:

Analizza

Più di un miliardo di persone al mondo è affetta da una disabilità riconosciuta. Si tratta di circa il 15% della popolazione mondiale, e questa percentuale sale al 20% se consideriamo le disabilità temporanee e se aggiungiamo la popolazione anziana, che rappresenta una quota significativa in nazioni come l’Italia. È per questo che si parla sempre più di accessibilità e inclusione, e ciò vale anche per Internet e i siti. Garantire l’accessibilità web non è solo una questione di conformità legale, ma rappresenta anche un impegno verso l’inclusione sociale e l’equità digitale: un sito web accessibile permette a tutti gli utenti, indipendentemente dalle loro abilità, di accedere alle informazioni e ai servizi online, migliorando l’esperienza utente complessiva e ampliando il pubblico raggiungibile. Il nostro obiettivo è quindi costruire un sito accessibile, eliminando le barriere architettoniche digitali e informatiche, ovvero gli ostacoli che le persone affette da disabilità incontrano ogni giorno quando cercano di usare determi­nati servizi o informazioni presenti in Rete, e più in generale offrire pari condizioni a tutti gli utenti. Sia nella progettazione del sito che nel quotidiano lavoro di ottimizzazione, perché questo complesso tema chiama in causa diversi elementi legati alla SEO.

Che cos’è l’accessibilità siti web

Accessibilità web si riferisce alla pratica di progettare e sviluppare siti web in modo che siano utilizzabili da tutte le persone, indipendentemente dalle loro abilità fisiche, cognitive o tecnologiche.

Ciò significa quindi includere, nella progettazione e nello sviluppo, le specifiche esigenze di persone con disabilità visive, uditive, motorie e cognitive.

Prenditi cura del tuo sito e dei tuoi utenti

SEO e usabilità vanno a braccetto: un sito accessibile piace di più a Google e parla a più utenti! Usa SEOZoom per verificare gli aspetti principali del tuo progetto

Scopri di più

In senso più ampio, quindi, l’obiettivo dell’accessibilità web è eliminare le barriere che impediscono a questi utenti di accedere alle informazioni e ai servizi online.

Nella sua forma originaria e pura, il Web è fondamentalmente progettato per funzionare per tutte le persone “indipendentemente dal loro hardware, software, lingua, posizione o abilità”. Questa è la posizione ufficiale del World Wide Web Consortium (W3C), l’organizzazione non governativa internazionale fondata da Tim Berners-Lee (uno dei papà del Web), che ha come obiettivo proprio la diffusione della massima accessibilità dei siti, ovvero la possibilità di accedere alle informazioni e ai contenuti “a persone con una vasta gamma di capacità uditive, motorie, visive e cognitive”. 

E proprio il W3C ha sviluppato delle apposite linee guida, chiamate Web Content Accessibility Guidelines (WCAG), che forniscono un quadro di riferimento per creare contenuti web accessibili.

Definizione di accessibilità nel contesto digitale

Con il termine accessibilità digitale si fa riferimento alla capacità dei sistemi informatici di fornire i servizi e informazioni a ogni tipologia di utente senza discriminazioni, e in particolare anche alle persone che soffrono di disabilità temporanee e non e che, di conseguenza, utilizzano tecnologie ausiliarie o configurazioni particolari.

Nel contesto del Web, quindi, la parola comprende tutte le buone pratiche inclusive di rimozione delle barriere digitali che impediscono l’interazione o l’accesso ai siti alle persone con disabilità, ma il suo significato si sta estendendo anche agli ostacoli di tipo tecnologico.

In modo più ampio, infatti, si deve lavorare per garantire la massima accessibilità al sito a ogni tipo di persona/utente, anche ad esempio chi usa dispositivi mobili di vecchia generazione o naviga in Internet con una connessione lenta.

Tutto ruota, come dicevamo, intorno ai quattro principi fondamentali fissati dalle WACG: Percepibile, Utilizzabile, Comprensibile e Robusto (POUR). In pratica, l’accessibilità web implica l’uso di tecniche come l’aggiunta di descrizioni testuali per le immagini, la creazione di una navigazione intuitiva e la garanzia che tutti i contenuti siano compatibili con le tecnologie assistive, come gli screen reader.

Accessibilità digitale: i numeri e le criticità

L’accessibilità è un elemento cruciale da valutare per gli sviluppatori e le organizzazioni che desiderano creare siti e strumenti Web di alta qualità, che non escludano le persone dalla possibilità di usare i loro prodotti e servizi.

Tuttavia, ancora troppo spesso i siti, le applicazioni, le tecnologie o gli strumenti sono progettati in modo errato e creano vere e proprie barriere che impediscono a gruppi di persone di usare con efficienza questi prodotti, similarmente a quanto avviene agli ostacoli fisici che caratterizzano molti luoghi nella realtà quotidiana.

In questo modo, si tradisce il concetto di accessibilità, che è appunto “la capacità dei sistemi informatici di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari”. A livello globale, si stima che siano oltre 1 miliardo le persone che hanno disabilità – di tipo visivo, motorio uditivo o cognitivo – e questa enorme platea vanno aggiunte anche le difficoltà all’accesso create dalla tecnologia – ad esempio, difficoltà di navigazione mobile in aree scarsamente coperte da rete, oppure utilizzo di dispositivi obsoleti.

L’ultimo report della ONG statunitense WebAim  (Web Accessibility In Mind) fotografa la situazione: analizzando un milione di home page alla ricerca di problemi di accessibilità, lo studio certifica che ancora in questo 2024 il 96 per cento delle pagine presenta almeno un errore WCAG 2.2 (ovvero, non rispettava almeno una delle linee guida per l’accessibilità dei contenuti web) e, più specificamente, ogni pagina conteneva in media 56.8 errori. Considerando che una home page media si compone di 1173 elementi, significa che gli utenti con disabilità rischiano di riscontrare un errore su 21 elementi in pagina con cui interagisce.

WebAim ha anche rilevato quali sono gli errori di accessibilità più frequenti riscontrati sulle home page prese in esame: testo a basso contrasto, assenza di testo alternativo, mancanza di etichette di input dei form, collegamenti vuoti, lingua del documento mancante e pulsanti vuoti. Più nello specifico, l’81% delle home page ha un testo a basso contrasto (con una media di 34.5 istanze per sito), il 54.5% delle immagini ha testo alternativo mancante, oltre un terzo di tutte le immagini analizzate presenta problemi di accessibilità rilevabili e quasi la metà di tutti gli input dei moduli non sono etichettati correttamente.

Come notano gli esperti dell’associazione confrontando i risultati degli ultimi quattro monitoraggi annuali, ci sono lievi miglioramenti nel numero complessivo di errori di accessibilità rilevati e di mancata conformità a WCAG, ma i problemi relativi a home page con testo a basso contrasto, etichette di input mancanti e pulsanti vuoti restano molto elevati, mentre le criticità con home page con testo alternativo mancante, collegamenti vuoti e lingua del documento mancante sono al contrario e per fortuna diminuiti.

Comprendere l’accessibilità, un tema in evoluzione

L’accessibilità non è un concetto statico, ma un processo continuo di miglioramento e adattamento per rispondere alle esigenze di tutti gli utenti.

Ad esempio, per una persona non vedente, un sito web accessibile potrebbe includere descrizioni testuali per le immagini e una struttura di navigazione che può essere facilmente interpretata da uno screen reader. Per una persona con disabilità motorie, potrebbe significare la possibilità di navigare il sito utilizzando solo la tastiera.

Con l’evoluzione della tecnologia e l’aumento dell’uso di internet, è essenziale che i siti web siano progettati e sviluppati in modo da essere accessibili a tutti gli utenti, indipendentemente dalle loro abilità fisiche o cognitive.

L’accessibilità web non è solo una questione di inclusione sociale, ma rappresenta anche un’opportunità per migliorare l’esperienza utente complessiva e raggiungere un pubblico più ampio. In un mondo sempre più connesso, dove l’informazione e i servizi online sono diventati parte integrante della vita quotidiana, garantire che tutti possano accedere a questi contenuti è una responsabilità che non può essere ignorata.

Gli ostacoli e le barriere digitali

Quando parliamo di accessibilità di un sito ci riferiamo quindi a un insieme di pratiche e tecnologie che permettono a tutti gli utenti di accedere e interagire con i contenuti senza incontrare ostacoli.

Questo implica una progettazione attenta e consapevole che tenga conto delle diverse modalità con cui gli utenti possono navigare e utilizzare il web, nell’ottica di realizzare un sito che sia percepibile, utilizzabile, comprensibile e robusto.

Il problema principale sono quindi gli ostacoli che inconsapevolmente disseminiamo lungo la strada: contrariamente a quanto avviene nel mondo reale – dove la maggior parte degli ostacoli è “concreta” e fisica – nel mondo digitale l’accessibilità è trasparente!

Si tratta cioè delle “barriere architettoniche digitali“, che sono appunto gli ostacoli che impediscono o limitano l’accesso e l’uso dei contenuti e dei servizi online da parte di persone con disabilità. Queste barriere possono assumere diverse forme e influenzare vari aspetti dell’interazione con il web.

Riprendendo una precisa definizione fornita da Donato Matturro e Bianca Maria Carchidio, esperti nel campo dell’accessibilità web e creatori del progetto sitiaccessibili.it, barriera digitale è “qualunque elemento comunicativo che impedisca, limiti o renda difficoltosa la navigazione o la fruizione di contenuti digitali (specialmente per le persone con limitata capacità motoria o sensoriale, cioè portatrici di handicap)”.

Maggior complessità viene data da un aspetto: un elemento può non costituire barriera digitale per un individuo, ma invece essere di ostacolo per un altro. Questo perché il concetto di barriera viene percepito in maniera diversa da ogni individuo, generando anche la necessità di garantire al maggior numero di persone il diritto alla libertà di comunicazione e informazione, attraverso la ricerca di parametri comuni.

Il passo più importante è stato fatto a livello normativo andando a individuare quali contenuti digitali siano da considerarsi barriera digitale, come avvenuto in Italia con la Legge 9 gennaio 2004, n. 4, la cosiddetta “Legge Stanca”.

Quali sono le principali barriere architettoniche digitali

Come dicevamo, le barriere digitali possono manifestarsi in diverse forme e influenzare vari aspetti dell’interazione con il web.

Ad esempio, le barriere visive includono la mancanza di testi alternativi per le immagini, che rende difficile per gli utenti non vedenti comprendere il contenuto visivo attraverso gli screen reader. Un altro problema comune è il contrasto insufficiente tra il testo e lo sfondo, che può rendere la lettura difficile per gli utenti con disabilità visive come la cecità parziale o il daltonismo. Inoltre, testi che non possono essere ingranditi senza perdere la loro leggibilità o funzionalità rappresentano un ulteriore ostacolo per chi ha problemi di vista.

Le barriere uditive, invece, si manifestano quando i video non sono dotati di sottotitoli, rendendo difficile per gli utenti non udenti o con problemi di udito comprendere il contenuto audio. La mancanza di trascrizioni per i contenuti audio esclude ulteriormente questi utenti dall’accesso alle informazioni. Le barriere motorie si presentano quando la navigazione del sito dipende esclusivamente dall’uso del mouse, rendendo il sito inaccessibile per gli utenti con disabilità motorie che utilizzano solo la tastiera o dispositivi di puntamento alternativi. Inoltre, link, pulsanti e altri elementi interattivi troppo piccoli o vicini tra loro possono essere difficili da cliccare per chi ha problemi di coordinazione motoria.

Le barriere cognitive includono contenuti complessi e non strutturati, che possono essere difficili da comprendere per gli utenti con disabilità cognitive. Un’interfaccia utente non intuitiva o una navigazione complessa possono creare ulteriori difficoltà per chi ha problemi di memoria o di comprensione. Le barriere tecnologiche si verificano quando i siti web non sono compatibili con le tecnologie assistive, come gli screen reader e gli ingranditori di schermo, escludendo così gli utenti che dipendono da questi strumenti. L’uso di tecnologie proprietarie o non standard che non sono supportate da tutti i browser o dispositivi può limitare ulteriormente l’accesso ai contenuti.

Anche l’accessibilità mobile presenta le sue sfide. Un layout non responsivo che non si adatta correttamente ai dispositivi mobili può rendere difficile la navigazione per gli utenti che utilizzano smartphone o tablet. Inoltre, elementi interattivi che non rispondono correttamente ai gesti touch possono creare difficoltà per chi naviga su dispositivi mobili. Le barriere di accessibilità multilingue si manifestano quando i siti web non offrono contenuti in diverse lingue, escludendo gli utenti che non parlano la lingua principale del sito. Contenuti che non tengono conto delle differenze culturali e linguistiche possono essere difficili da comprendere per gli utenti di diverse nazionalità.

Infine, le barriere di accessibilità temporale includono contenuti temporizzati che richiedono una risposta entro un tempo limitato, creando difficoltà per gli utenti con disabilità motorie o cognitive. Animazioni e contenuti in movimento che non possono essere fermati o controllati possono distrarre o causare problemi agli utenti con disabilità cognitive o visive.

Cosa significa accessibilità dei siti web nel pratico

In generale, accessibilità è l’impegno a garantire l’inserimento di ciascun individuo all’interno della società, indipendentemente dalla presenza di elementi limitanti o distintivi. È un lavoro per migliore l’inclusione, mantenendo e tutelando le peculiari caratteristiche della singola persona, per arrivare ad assicurare equità e pari opportunità.

Ciò vale anche nel digitale, dove un sito web è accessibile se è raggiungibile e utilizzabile da tutti gli utenti, indipendentemente dalle loro abilità. Non si tratta però solo di una questione di conformità legale o di responsabilità sociale, ma anche di opportunità di business.

Un sito web accessibile può infatti migliorare significativamente l’esperienza utente, aumentare il coinvolgimento e la soddisfazione degli utenti, e ampliare il pubblico raggiungibile. Inoltre, l’accessibilità web può avere un impatto positivo sul posizionamento nei motori di ricerca, rendendo il sito più visibile e attraente per un pubblico più ampio.

Questo tema non riguarda infatti in via esclusiva le persone che soffrono di una disabilità, ma in senso più esteso tutti gli utenti. Ne deriva che accessibilità è il tentativo di fornire a tutti le persone le stesse opportunità di fruizione di un sito, indipendentemente dalle loro capacità e circostanze, anche tecniche.

Sempre secondo Tim Berners-Lee, “il potere del Web sta nella sua universalità” e quindi “l’accesso da parte di tutti, indipendentemente dalla disabilità, è un aspetto essenziale”. Per sua natura, la Rete è progettata per “funzionare per tutte le persone, indipendentemente dal loro hardware, software, lingua, posizione o capacità”, e ciò la rende “accessibile a persone con diversi gradi di capacità uditive, motorie, visive e cognitive”.

Quando ciò avviene, il Web rimuove le barriere alla comunicazione e all’interazione che molte persone disabili affrontano nel mondo fisico, ma quando “quando i siti Web, le applicazioni, le tecnologie o gli strumenti sono progettati male” possono creare altre barriere che escludono le persone dall’utilizzo dei siti e della Rete intera.

Perché l’accessibilità web è importante

In un mondo sempre più digitale, l’accesso alle informazioni e ai servizi online è diventato un diritto fondamentale. Tuttavia, molte persone con disabilità continuano a incontrare barriere significative quando navigano sul web.

L’accessibilità web è una componente essenziale dell’inclusione sociale e rendere i siti web accessibili significa abbattere queste barriere, in modo da garantire che tutti gli utenti possano accedere alle stesse informazioni e opportunità. Questo non solo promuove l’equità e l’inclusione, ma può anche migliorare la reputazione del brand e costruire fiducia e lealtà tra gli utenti.

È sempre il W3C a chiarire cosa significa accessibilità Web per i siti: progettare e sviluppare gli strumenti e le tecnologie per consentirne l’uso a tutte le persone, incluse quelle con disabilità. Più specificamente, gli utenti devono essere in grado di “percepire, comprendere, navigare e interagire con il Web” e, allo stesso tempo, “contribuire al web”.

L’accessibilità web comprende tutte le disabilità che influenzano l’accesso alla Rete, tra cui quelle di tipo:

• uditivo
• cognitivo
• neurologico
• fisico
• discorsivo
• visivo.

Come dicevamo, questo approccio genera vantaggi anche agli utenti senza disabilità, in particolare nei casi di:

• Persone che utilizzano telefoni cellulari, smartwatch, smart TV e altri dispositivi con schermi piccoli, diverse modalità di input, ecc.
• Persone anziane con capacità che cambiano come conseguenza dell’invecchiamento.
• Persone con “disabilità temporanee”, come un braccio rotto o occhiali persi.
• Persone con “limitazioni situazionali”, come quelle che usano lo smartphone in pieno sole, in viaggio in treno o in un ambiente in cui non possono ascoltare l’audio.
• Persone che utilizzano una connessione Internet lenta o che hanno una larghezza di banda limitata o costosa.

Accessibilità dei siti e SEO

Questi principi – garantire che i siti Web siano accessibili e utilizzabili da tutti – dovrebbero essere una preoccupazione primaria per chiunque lavori nello spazio online, ma di solito sono visti come una responsabilità di sviluppatori e designer. In realtà, c’è molta sovrapposizione nel lavoro SEO che facciamo per rendere i siti web accessibili e facili da capire per i motori di ricerca, come sottolinea Ruth Everett su Search Engine Journal.

Uscendo per un attimo dal discorso filosofico e ragionando con un pizzico di cattiveria, ottimizzare un sito Web per utenti disabili è perfettamente sensato anche per gli affari, perché permette di intercettare e soddisfare un segmento di mercato più ampio e, al tempo stesso, costruire un’immagine positiva del brand e ricevere una spinta al ranking.

Questo perché la maggior parte dei componenti necessari per raggiungere l’obiettivo e rispondere agli standard internazionali di accessibilità si inserisce direttamente nelle best practice della SEO: un sito web può essere considerato accessibile quando interviene sull’ottimizzazione dei tag del titolo, della struttura dell’header, dell’alt text e di design responsive, ovvero elementi che tutti i siti Web dovrebbero includere per massimizzare la propria efficacia.

Un sito web accessibile aiuta tutti gli utenti e rispondere anche alle logiche del business: il punto cruciale è avere un sito più facile da visualizzare, capire e navigare, che quindi migliora l’esperienza fornita alle persone e permette loro di trovare rapidamente e in modo efficiente le informazioni cui sono interessati.

In sintesi, l’accessibilità riguarda quindi l’esperienza utente, la soddisfazione e la fedeltà al brand – e difatti compare anche tra le indicazioni di Google per creare siti SEO oriented – ma ci sono anche implicazioni legali per chi non rispetta i principi.

I benefici dell’accessibilità per la SEO

Oltre ai vantaggi sociali, l’accessibilità web offre quindi anche significativi benefici in termini SEO.

I motori di ricerca, come Google, premiano i siti web che offrono una buona esperienza utente, e l’accessibilità è una parte fondamentale di questa esperienza.

Ad esempio, l’uso di descrizioni testuali per le immagini non solo aiuta gli utenti non vedenti, ma fornisce anche informazioni preziose ai motori di ricerca, migliorando la rilevanza e la visibilità del sito.

Allo stesso modo, una struttura di navigazione chiara e coerente facilita la scansione e l’indicizzazione del sito da parte dei motori di ricerca, migliorando il posizionamento nelle pagine dei risultati. Inoltre, i contenuti accessibili tendono a essere più chiari e ben organizzati, il che può ridurre il tasso di abbandono e aumentare il tempo di permanenza sul sito, entrambi fattori che influenzano positivamente il ranking SEO.

Linee guida per l’accessibilità Web: i 4 principi chiave

Per garantire che i siti web siano accessibili a tutti gli utenti possiamo far riferimento alle linee guida consolidate e riconosciute a livello internazionale.

Le Web Content Accessibility Guidelines (WCAG) rappresentano lo standard di riferimento per l’accessibilità web, fornendo un quadro completo e dettagliato delle pratiche da adottare.

Queste linee guida sono state sviluppate dal World Wide Web Consortium (W3C) e sono ampiamente accettate come best practice per la progettazione e lo sviluppo di contenuti web accessibili. Seguendo le WCAG, i proprietari di siti web possono assicurarsi che i loro contenuti siano fruibili da un pubblico più ampio, inclusi gli utenti con disabilità.

Un sito web è accessibile se soddisfa quattro principi, noti come POUR:

• Perceivable
• Operable
• Understandable
• Robust

Ovvero, in italiano:

1. Percepibile – ovvero prevedere la rimozione di qualsiasi barriera che un utente potrebbe avere per accedere ai contenuti, compresa la possibilità di utilizzare il sito con screen reader, fornendo alternative di testo e una struttura logica. Il principio della percepibilità si concentra sulla necessità che le informazioni e i componenti dell’interfaccia utente siano presentati in modi che possano essere percepiti da tutti gli utenti. Questo significa che i contenuti devono essere visibili e udibili, e che le informazioni visive devono essere accompagnate da alternative testuali. Ad esempio, le immagini devono avere descrizioni testuali (alt text) che possano essere lette dagli screen reader, e i video devono avere sottotitoli per gli utenti non udenti. Inoltre, è importante garantire un contrasto sufficiente tra il testo e lo sfondo per facilitare la lettura.
2. Operabile – un sito funzionante e fruibile da tutti gli utenti, a prescindere dal dispositivo su cui stanno navigando, grazie a un lavoro sull’interfaccia utente e sulla navigazione. Questo parametro include anche garantire il tempo sufficiente agli utenti di completare una determinata attività. È il principio dell’usabilità, che riguarda la capacità degli utenti di navigare e interagire con il sito web. Questo implica che tutti i componenti dell’interfaccia utente e la navigazione devono essere operabili. Ad esempio, i link e i pulsanti devono essere facilmente cliccabili, e il sito deve essere navigabile utilizzando solo la tastiera, senza la necessità di un mouse. Inoltre, è importante fornire indicazioni chiare e coerenti per l’uso dei moduli e delle funzionalità interattive, in modo che gli utenti possano completare le attività senza difficoltà.
3. Comprensibile – le persone devono essere in grado di comprendere le informazioni visualizzate su una pagina Web, nonché comprendere chiaramente l’interfaccia utente e navigare nel sito. Include fornire una navigazione prevedibile e coerente. Si tratta del principio della comprensibilità, che implica che il contenuto sia chiaro e leggibile, e che le funzionalità interattive devono comportarsi in modo prevedibile. Ad esempio, il linguaggio utilizzato deve essere semplice e diretto, e le istruzioni devono essere chiare e concise. Inoltre, è importante fornire feedback tempestivi e utili quando gli utenti commettono errori, in modo che possano correggerli facilmente.
4. Robusto – per essere solido, un sito deve poter essere consultato e interpretato da diverse tecnologie e piattaforme, inclusi gli screen reader. Inoltre, deve rimanere accessibile durante gli aggiornamenti a tutte le piattaforme. Il principio della robustezza si concentra sulla necessità che i contenuti web siano abbastanza robusti da poter essere interpretati in modo affidabile da una vasta gamma di agenti utente, inclusi i dispositivi assistivi. Questo significa che il codice del sito deve essere conforme agli standard web e che i contenuti devono essere strutturati in modo semantico. Ad esempio, l’uso corretto dei tag HTML e degli attributi ARIA può migliorare l’interoperabilità del sito con gli screen reader e altri dispositivi assistivi. Inoltre, è importante testare il sito con diverse tecnologie assistive per garantire che tutti gli utenti possano accedere ai contenuti senza problemi.

Le WCAG sono suddivise in tre livelli di conformità: A, AA e AAA. Il livello A rappresenta il minimo indispensabile per l’accessibilità, il livello AA è il livello di conformità raccomandato per la maggior parte dei siti web, mentre il livello AAA è il più alto e richiede l’implementazione di tutte le linee guida per garantire la massima accessibilità. Le WCAG sono organizzate in quattro principi fondamentali: Percepibile, Utilizzabile, Comprensibile e Robusto. Questi principi forniscono una struttura chiara e coerente per la progettazione di contenuti web accessibili, coprendo tutti gli aspetti dell’interazione utente.

Le specifiche ARIA per migliorare l’accessibilità digitale

Le abbiamo citate come un modo per assicurare la robustezza delle piattaforme digitali, ma occorre approfondire cosa sono le ARIA e come possono supportare lo sforzo più ampio di rendere le applicazioni web più accessibili.

ARIA è acronimo di Accessible Rich Internet Applications e fa riferimento a una specifica del W3C che fornisce un insieme di attributi che possono essere aggiunti ai markup HTML. Si concretizzano in attributi che aiutano a migliorare l’interazione con le tecnologie assistive, come screen reader e ingranditori di schermo, fornendo informazioni aggiuntive sui ruoli, gli stati e le proprietà degli elementi dell’interfaccia utente.

Questi attributi aiutano a comunicare informazioni aggiuntive sui ruoli, gli stati e le proprietà degli elementi dell’interfaccia utente, che altrimenti potrebbero non essere facilmente interpretabili dalle tecnologie assistive.

L’uso corretto degli attributi ARIA può migliorare significativamente l’accessibilità delle applicazioni web dinamiche, e nel dettaglio riconosciamo:

1. Ruoli ARIA

I ruoli ARIA definiscono lo scopo di un elemento dell’interfaccia utente. Questi ruoli aiutano le tecnologie assistive a comprendere come un elemento dovrebbe essere interpretato e interagito. Alcuni dei ruoli più comuni includono:

• role=”button”: Indica che un elemento è un pulsante.
• role=”checkbox”: Indica che un elemento è una casella di controllo.
• role=”dialog”: Indica che un elemento è una finestra di dialogo.
• role=”navigation”: Indica che un elemento è una sezione di navigazione.
• role=”alert”: Indica che un elemento è un messaggio di avviso.

2. Stati ARIA

Gli stati ARIA descrivono le condizioni dinamiche di un elemento dell’interfaccia utente. Questi stati possono cambiare in risposta alle azioni dell’utente e devono essere aggiornati in tempo reale per riflettere lo stato corrente dell’elemento. Alcuni esempi di stati ARIA includono:

• aria-checked: Indica lo stato di una casella di controllo (true, false, mixed).
• aria-expanded: Indica se un elemento, come un menu o una sezione, è espanso o compresso (true, false).
• aria-hidden: Indica se un elemento è visibile o nascosto agli utenti delle tecnologie assistive (true, false).
• aria-disabled: Indica se un elemento è disabilitato e non interattivo (true, false).

3. Proprietà ARIA

Le proprietà ARIA forniscono informazioni aggiuntive sugli elementi dell’interfaccia utente. Queste proprietà aiutano a descrivere le caratteristiche e le relazioni tra gli elementi. Alcune delle proprietà ARIA più utilizzate includono:

• aria-label: Fornisce un’etichetta testuale per un elemento, che può essere letta dalle tecnologie assistive.
• aria-labelledby: Indica l’ID di un altro elemento che funge da etichetta per l’elemento corrente.
• aria-describedby: Indica l’ID di un altro elemento che fornisce una descrizione aggiuntiva per l’elemento corrente.
• aria-controls: Indica l’ID di un altro elemento che è controllato dall’elemento corrente.

4. Ruoli di Landmark ARIA

I ruoli di landmark ARIA aiutano a definire le principali aree di una pagina web, facilitando la navigazione per gli utenti delle tecnologie assistive. Alcuni dei ruoli di landmark più comuni includono:

• role=”banner”: Indica l’intestazione principale di una pagina.
• role=”main”: Indica il contenuto principale di una pagina.
• role=”complementary”: Indica contenuti aggiuntivi che completano il contenuto principale.
• role=”contentinfo”: Indica informazioni sul contenuto, come i diritti d’autore o i contatti.

Un topic sempre più di attualità

Dopo la pandemia di coronavirus, che ha generato un ulteriore aumento dell’uso del web, la necessità di predisporre un sito web accessibile non è mai stata così grande: uno studio americano ha segnalato che il 62 per cento dei professionisti dell’accessibilità intervistati a marzo e aprile 2020 ha riferito che “il COVID-19 ha aumentato la consapevolezza e l’impatto dell’accessibilità sul canale digitale”. Più di recente, poi, un sondaggio di Deque ha rivelato che a fine 2021 il 73% dei professionisti dell’accessibilità negli USA ha visto un aumento della consapevolezza su questo tema sui canali digitali durante la pandemia, che ha costretto più persone a impegnarsi online, per lavoro, formazione o semplice divertimento.

Quando i siti Web non sono pienamente accessibili, può diventare incredibilmente difficile per alcuni utenti eseguire le attività necessarie o trovare le informazioni che stanno cercando. Questo ovviamente determina un’esperienza negativa, che peggiora il sentimento verso il brand e mina la fiducia e la fedeltà.

Fattore ancora più pragmatico, questo va contro anche l’attenzione crescente che Google sta dedicando ai siti che, al contrario, forniscono una buona esperienza utente – e che sta anche alla base della Page Experience, l’importante update algoritmico lanciato nel 2021. Ciò significa che il motore di ricerca vuole essere sicuro di includere i migliori siti nei suoi risultati, e i siti accessibili rispondono ai criteri perché sono i più facili da capire e utilizzare.

Le leggi sull’accessibilità digitale

Ma oltre a essere indispensabile per l’esperienza dell’utente, un sito web accessibile è anche richiesto dalla legge nella maggior parte dei casi e normative: nella Comunità Europea, nel 2019 è stato introdotto l’Atto Europeo sull’Accessibilità (European Accessibility Act), che riguarda prodotti e servizi come computer e sistemi operativi, smartphone e piattaforme di e-commerce, che devono essere compatibili con le tecnologie assistive e presentati in un formato appropriato per tutti gli utenti.

Nel Regno Unito vige dal 2010 l’Equality Act, che copre l’accessibilità dei siti web nel Regno Unito ed è progettato per proteggere le persone da trattamenti ingiusti, promuovendo nel contempo una società equa e paritaria. In particolare, impone che i proprietari dei siti sono tenuti ad anticipare le esigenze dei potenziali clienti disabili e ad apportare “aggiustamenti ragionevoli” per tali esigenze.

Negli Stati Uniti si parla del tema ancora da prima: già nel 1990 fu introdotto l’Americans Disability Act (ADA), legge sui diritti civili che proibisce la discriminazione contro le persone con disabilità, comprendendo anche, i siti Web con componenti inaccessibili, che possono essere considerati discriminatori e in violazione del Titolo III della legge. Qui, inoltre, ha una forte influenza la cosiddetta Section 508, una legge federale statunitense (parte del Rehabilitation Act del 1973) che richiede che le agenzie federali rendano accessibili i loro prodotti elettronici e le tecnologie dell’informazione alle persone con disabilità. Questi standard includono requisiti per siti web, software, documenti e altre tecnologie dell’informazione utilizzate dalle agenzie federali; la conformità alla Section 508 è essenziale per garantire l’accessibilità digitale e l’inclusione delle persone con disabilità negli ambienti online governativi negli Stati Uniti.

Questo interesse non sorprende troppo, a leggere le stime dell’agenzia federale CDC – che rivela che il 25 per cento degli adulti negli Stati Uniti vive con una disabilità – né sorprende scoprire che spesso si aprono procedimenti legali contro siti che non rispettavano tali principi – 2.256 cause legali per l’accessibilità del sito Web ADA nei tribunali federali nel solo 2019. Questi casi hanno colpito in passato anche dei colossi come Nike (colpevole di inaccessibilità agli screen reader, di presenza di link vuoti e di assenza di alt text per le immagini), Domino’s Pizza (gli utenti con screen reader non potevano personalizzare le pizze né usufruire di buoni sconto a causa di un problema tecnico di compatibilità con il sito) e il sito web della star Beyoncé (per assenza di alt text, impossibilità di accesso via tastiera e menu a tendina scarsamente accessibili).

Come rendere il sito accessibile

Nonostante l’attenzione crescente sul tema – anche le Istituzioni sovranazionali si stanno muovendo per promuovere l’accessibilità, come detto – la realtà ci racconta che in concreto l’inclusività digitale è l’ultima cosa (o comunque tra le ultime) a cui gli esperti di marketing pensano quando creano un sito web, e i numeri riscontrati dallo studio di Webaim lo confermano.

Oltre all’aspetto sociale, perché come detto questa negligenza impedisce a tantissime persone di accedere ai siti e usarli correttamente, ci sono anche degli aspetti affaristici da valutare, perché gli errori creano una vera e propria barriera di crescita per il sito, che si preclude la possibilità di attirare potenziali clienti.

Per chi vuole cambiare approccio e rendere il sito accessibile ci sono buone notizie: la maggior parte degli interventi base dell’accessibilità sono abbastanza facili da implementare, anche se lo studio dei problemi e delle soluzioni comuni può richiedere tempo e sforzi.

A cosa serve l’ottimizzazione dell’accessibilità di un sito web?

Implementare l’accessibilità web non è un compito che si esaurisce con l’adozione di linee guida e standard. Richiede un approccio continuo e proattivo, che coinvolge diverse pratiche e strumenti per garantire che il sito rimanga accessibile nel tempo

Le migliori pratiche per l’accessibilità web includono test regolari, un design inclusivo e il coinvolgimento di utenti reali nel processo di sviluppo e valutazione.

Queste pratiche non solo migliorano l’accessibilità, ma contribuiscono anche a creare un’esperienza utente più soddisfacente e inclusiva.

Il valore dell’accessibilità informatica per il marketing e il business

Tale lavoro per riconoscere e adottare l’accessibilità al Web può però produrre effetti positivi per il sito, come sottolinea nel suo articolo Atul Jindal, perché questo approccio “migliora l’esperienza del cliente, apre nuove porte per l’attività, migliora i risultati di marketing e aumenta le entrate in più di un modo”.

L’accessibilità informatica ha quindi un valore prezioso nelle moderne iniziative di marketing, perché permette in particolare di estendere la portata del mercato del sito, di migliorare la user experience e di beneficiare anche di vantaggi SEO.

In particolare, un’azienda che ha una presenza sul Web digitalmente inclusiva interagisce con un volume maggiore di persone che altrimenti avrebbe perso, e quindi questi interventi correttivi portano un’intera nuova comunità di potenziali clienti con cui interagire e da conquistare come clienti per aumentare le entrate. Allo stesso tempo, migliora la percezione positiva del brand, un elemento chiave per attrarre i consumatori orientati al valore, riflettendo l’impegno nella diffusione dei valori di empatia, compassione e pari opportunità per tutti

È facile comprendere, poi, che il lavoro di ottimizzazione dell’accessibilità del sito consente anche di migliorare la user experience, un fattore che è sempre più al centro della presenza digitale perché si riferisce direttamente alle conversioni e influisce su ciò che il pubblico di destinazione desidera, rendendolo disponibile nel modo più semplice, immediato e fluido. Un sito senza errori di usabilità raggiunge più facilmente la soddisfazione del cliente e dà al potenziale cliente una spinta finale verso la conversione, contribuendo appunto a migliorare i rendimenti.

E questo porta benefici anche alla SEO, perché i motori di ricerca preferiscono far emergere nelle loro SERP siti che sono “sicuri, accessibili e preziosi per tutti i tipi di utenti”.

Quali sono i principali errori di accessibilità

Prima ancora di addentrarci negli aspetti pratici di ottimizzazione, è opportuno completare il quadro teorico e comprendere quindi quali sono gli ostacoli e le barriere che comunemente ergiamo sui nostri siti.

I principali problemi di accessibilità di un sito web possono variare, ma ci sono alcune problematiche comuni che spesso emergono e che possono rendere difficile o impossibile l’uso del sito per persone con disabilità. WebAIM ha come detto identificato diversi problemi ricorrenti che possono influenzare negativamente l’esperienza utente, tra cui spiccano:

• Mancanza di testi alternativi per le immagini

Uno dei problemi più comuni è l’assenza di testi alternativi (alt text) per le immagini. I testi alternativi sono descrizioni testuali che possono essere lette dagli screen reader, permettendo agli utenti non vedenti di comprendere il contenuto visivo. Senza questi testi, le immagini diventano inaccessibili per chi utilizza tecnologie assistive.

• Contrasto insufficiente

Il contrasto insufficiente tra il testo e lo sfondo è un altro problema significativo. Un contrasto inadeguato rende difficile la lettura del testo per gli utenti con disabilità visive, come la cecità parziale o il daltonismo. WebAIM raccomanda di utilizzare combinazioni di colori con un contrasto elevato per migliorare la leggibilità.

• Navigazione dipendente dal mouse

Molti siti web sono progettati in modo da richiedere l’uso del mouse per la navigazione. Questo rappresenta una barriera per gli utenti con disabilità motorie che utilizzano solo la tastiera o dispositivi di puntamento alternativi. È essenziale garantire che tutte le funzionalità del sito siano accessibili tramite tastiera.

• Assenza di sottotitoli nei video

I video senza sottotitoli escludono gli utenti non udenti o con problemi di udito. I sottotitoli forniscono una trascrizione testuale del contenuto audio, rendendo i video accessibili a un pubblico più ampio. WebAIM sottolinea l’importanza di includere sottotitoli per tutti i contenuti video.

• Contenuti complessi e non strutturati

Testi lunghi e complessi, senza una chiara struttura o suddivisione in sezioni, possono essere difficili da comprendere per gli utenti con disabilità cognitive. È importante organizzare i contenuti in modo logico e utilizzare intestazioni e paragrafi per migliorare la leggibilità e la comprensione.

• Mancanza di etichette e istruzioni per i moduli

I moduli online senza etichette chiare e istruzioni possono essere difficili da utilizzare per tutti gli utenti, ma rappresentano una barriera particolarmente significativa per chi utilizza tecnologie assistive. Le etichette devono essere associate correttamente ai campi del modulo per garantire che gli screen reader possano fornire le informazioni necessarie agli utenti.

• Contenuti non ridimensionabili

Testi che non possono essere ingranditi senza perdere la loro leggibilità o funzionalità rappresentano un problema per gli utenti con problemi di vista. WebAIM raccomanda di utilizzare unità di misura relative, come em o rem, per consentire agli utenti di ridimensionare il testo secondo le proprie esigenze.

• Mancanza di feedback per gli errori

Quando gli utenti commettono errori durante la compilazione di moduli o l’interazione con il sito, è essenziale fornire feedback chiari e utili. La mancanza di feedback può rendere difficile per gli utenti correggere gli errori e completare le attività.

• Incompatibilità con le tecnologie assistive

Siti web che non sono compatibili con screen reader, ingranditori di schermo e altre tecnologie assistive possono escludere gli utenti che dipendono da questi strumenti. È importante testare il sito con diverse tecnologie assistive per garantire che tutti gli utenti possano accedere ai contenuti senza problemi.

• Contenuti temporizzati

Contenuti che richiedono una risposta entro un tempo limitato possono essere difficili da utilizzare per gli utenti con disabilità motorie o cognitive. WebAIM suggerisce di evitare contenuti temporizzati o di fornire opzioni per estendere il tempo disponibile.

• Animazioni e contenuti in movimento

Animazioni e contenuti in movimento che non possono essere fermati o controllati possono distrarre o causare problemi agli utenti con disabilità cognitive o visive. È importante fornire controlli per mettere in pausa, fermare o nascondere questi contenuti.

• Mancanza di struttura semantica

L’uso inappropriato o la mancanza di elementi semantici HTML può rendere difficile per le tecnologie assistive interpretare correttamente il contenuto di una pagina web. Gli elementi semantici, come le intestazioni (<h1>, <h2>, ecc.), i paragrafi (<p>) e le liste (<ul>, <ol>), forniscono una struttura logica che aiuta gli screen reader a navigare e comprendere meglio il contenuto. L’assenza di questa struttura può creare confusione e rendere l’esperienza utente meno intuitiva.

• Contenuti non Localizzati

Siti web che non offrono contenuti in diverse lingue possono escludere gli utenti che non parlano la lingua principale del sito. Inoltre, contenuti che non tengono conto delle differenze culturali e linguistiche possono essere difficili da comprendere per gli utenti di diverse nazionalità. È importante fornire traduzioni accurate e considerare le specificità culturali per rendere il sito accessibile a un pubblico globale.

• Formati di documento inaccessibili

Documenti PDF, Word e altri formati di documento che non sono stati creati con l’accessibilità in mente possono rappresentare una barriera significativa. Questi documenti devono essere strutturati correttamente, con l’uso di tag, descrizioni testuali per le immagini e una navigazione chiara, per essere accessibili agli utenti che utilizzano tecnologie assistive.

• Contenuti Flash e JavaScript non accessibili

L’uso di contenuti Flash e JavaScript che non sono stati progettati per essere accessibili può creare problemi per gli utenti con disabilità. È essenziale assicurarsi che questi contenuti siano compatibili con le tecnologie assistive e che possano essere navigati e utilizzati senza difficoltà.

• Mancanza di test di accessibilità

Infine, uno dei problemi più comuni è la mancanza di test di accessibilità durante il processo di sviluppo del sito. Senza test regolari, è difficile identificare e correggere i problemi di accessibilità. È importante utilizzare strumenti di validazione automatizzati, come WAVE, Axe e Lighthouse, e condurre test manuali con utenti reali per garantire che il sito sia accessibile a tutti.

Strumenti e risorse per rendere i siti accessibili

Alla luce di tutto questo, implementare l’accessibilità web richiede un approccio proattivo e continuo, che coinvolge l’adozione di linee guida consolidate, l’uso di strumenti di validazione e il coinvolgimento di utenti reali nel processo di test.

In particolare, dobbiamo conoscere e utilizzare strumenti e risorse che possano aiutare a identificare e risolvere i problemi di accessibilità. Questi strumenti non solo facilitano il processo di verifica, ma offrono anche indicazioni su come migliorare l’accessibilità del sito. Inoltre, esistono numerose risorse educative che possono aiutare i designer, gli sviluppatori e i proprietari di siti web a comprendere meglio le pratiche di accessibilità e a implementarle efficacemente.

Gli strumenti di validazione dell’accessibilità sono essenziali per identificare i problemi che potrebbero impedire agli utenti con disabilità di accedere ai contenuti del sito. Tra i più popolari e utili ci sono:

• WAVE (Web Accessibility Evaluation Tool): WAVE è uno strumento gratuito che analizza le pagine web e fornisce un report dettagliato sui problemi di accessibilità. Evidenzia gli errori e offre suggerimenti su come risolverli, rendendo più facile per i sviluppatori apportare le modifiche necessarie.
• Axe: Axe è un altro strumento di test di accessibilità che può essere utilizzato come estensione del browser o integrato nei flussi di lavoro di sviluppo. Fornisce un’analisi approfondita e suggerimenti pratici per migliorare l’accessibilità del sito.
• Lighthouse: Lighthouse è uno strumento open-source di Google che può essere utilizzato per migliorare la qualità delle pagine web. Include un audit di accessibilità che valuta vari aspetti del sito e fornisce raccomandazioni su come migliorare.
• Tenon: Tenon è uno strumento di test di accessibilità che offre un’analisi dettagliata e personalizzabile. È particolarmente utile per i team di sviluppo che desiderano integrare i test di accessibilità nei loro processi di sviluppo continuo.

Questi strumenti non solo aiutano a identificare i problemi, ma offrono anche suggerimenti pratici su come risolverli, rendendo il processo di miglioramento dell’accessibilità più gestibile e meno oneroso.

Per comprendere e implementare efficacemente le pratiche di accessibilità, è essenziale avere accesso a risorse educative di alta qualità. Ecco alcune delle risorse più utili:

• Web Accessibility Initiative (WAI): La WAI del W3C offre una vasta gamma di risorse, tra cui linee guida, tecniche e strumenti per aiutare i designer e gli sviluppatori a creare contenuti web accessibili. Il sito web della WAI è una risorsa fondamentale per chiunque desideri approfondire le proprie conoscenze sull’accessibilità web.
• Coursera e edX: Queste piattaforme di apprendimento online offrono corsi specifici sull’accessibilità web, tenuti da esperti del settore. Questi corsi coprono vari aspetti dell’accessibilità, dalle basi alle tecniche avanzate, e possono essere seguiti a proprio ritmo.
• A11y Project: L’A11y Project è una comunità di sviluppatori e designer che offre risorse pratiche e guide per migliorare l’accessibilità web. Il sito web include articoli, checklist e strumenti che possono essere utilizzati per rendere i siti web più accessibili.
• Inclusive Design Principles: Questi principi offrono linee guida pratiche per creare esperienze digitali inclusive. Sono una risorsa preziosa per chiunque desideri adottare un approccio olistico alla progettazione accessibile.
• WebAIM (Web Accessibility in Mind): WebAIM offre una vasta gamma di risorse educative, tra cui articoli, tutorial e strumenti di valutazione. È una risorsa eccellente per chiunque desideri approfondire le proprie conoscenze sull’accessibilità web.

Come posso rendere il mio sito Web accessibile?

Adottare un design inclusivo fin dalle prime fasi del processo di sviluppo e coinvolgere utenti reali nei test può migliorare significativamente l’accessibilità e l’usabilità del sito. Questo approccio non solo rende il web più accessibile, ma contribuisce anche a creare un’esperienza utente più soddisfacente e inclusiva.

Più specificamente, l’accessibilità digitale richiede un approccio sistematico e l’adozione di diverse pratiche e tecniche.

I passaggi chiave per migliorare l’accessibilità del sito includono:

1. Seguire le WCAG. Le Web Content Accessibility Guidelines (WCAG) forniscono un quadro completo per creare contenuti web accessibili. Le linee guida sono suddivise in tre livelli di conformità: A, AA e AAA. Il livello AA è generalmente raccomandato per la maggior parte dei siti web.
2. Usare alt text per le immagini. Aggiungere descrizioni testuali (alt text) per tutte le immagini. Questo aiuta gli utenti non vedenti a comprendere il contenuto delle immagini attraverso gli screen reader.
3. Garantire la navigabilità tramite tastiera. Tutte le funzionalità del sito devono essere accessibili utilizzando solo la tastiera. Questo è particolarmente importante per gli utenti con disabilità motorie che non possono utilizzare un mouse.
4. Migliorare il contrasto del colore. Utilizzare combinazioni di colori con un buon contrasto per garantire che il testo sia leggibile per gli utenti con disabilità visive. In particolare, è importante utilizzare colori adatti per garantire un buon contrasto tra il testo e lo sfondo, evitando bassi contrasti nel titolo e colori che rendono difficile leggere il testo. Strumenti come il Colour Contrast Analyser possono aiutare a verificare il contrasto del colore.
5. Lavorare sulla leggibilità del testo. Ci sono indicazioni molto chiare e precise anche per la gestione del contenuto testuale. Ad esempio, si consiglia di allineare il testo a sinistra, di evitare l’impaginazione giustificata e assicurarsi di suddividere i paragrafi in modo chiaro, utilizzando sottotitoli e intestazioni per facilitare la lettura e la comprensione del contenuto. Altrettanto importante è controllare la spaziatura tra le parole per una migliore leggibilità e impostare una spaziatura uniforme tra le parole per migliorare la leggibilità del testo. A questo proposito, sarebbero da preferire i tipi di font senza grazie (come Arial, Helvetica, Verdana e simili) rispetto ai font con grazie, come Times New Roman, poiché sono più leggibili sul web per persone con dislessia, ipovisione e problemi cognitivi. Sul pratico, il testo dovrebbe avere un’interlinea di almeno 1,5 volte l’altezza del carattere; la spaziatura tra i paragrafi dovrebbe essere almeno 2 volte la dimensione del carattere; la spaziatura tra le lettere dovrebbe essere almeno 0,12 volte la dimensione del carattere e, infine, la spaziatura tra le parole dovrebbe essere almeno 0,16 volte la dimensione del carattere.

Il lavoro SEO sull’accessibilità

La SEO ha il controllo diretto su alcuni dei problemi principali riscontrati da WebAim (in particolare testo a basso contrasto, testo alternativo mancante e collegamenti vuoti), e più in generale ci sono varie aree di sovrapposizione tra il lavoro di ottimizzazione e l’accessibilità, che può avere un impatto positivo da questi interventi. Ecco quindi una panoramica generale (in ordine sparso) sulle aree del lavoro onpage che possono influire e migliorare l’accessibilità del sito.

1. Page title

I titoli delle pagine sono uno degli elementi di base della SEO on page e servono a fornire contesto e aiutare gli utenti (e motori di ricerca) a capire di cosa tratta la pagina web; come sappiamo, i title non sono visualizzati direttamente sul sito, ma compaiono nella pagina dei risultati di un motore di ricerca come link cliccabile e nella linguetta della scheda del browser.

Quindi, permettono agli utenti di identificare se le informazioni su una pagina sono rilevanti per loro, ma anche di differenziare il contenuto quando sono aperte più schede o pagine: gli screen reader fanno infatti affidamento proprio sui titoli delle pagine per chiarire agli utenti quando navigano tra le pagine.

Ottimizzare questo campo significa pensare prima alle persone, anziché riempire il title di parole chiave per i bot, e il tag deve corrispondere alle intenzioni dell’utente, come suggerisce Abhishek Shah su SearchEngineWatch: per questo, scrivere un titolo che rifletta accuratamente il topic la pagina è il modo migliore per essere trovato e cliccato, e “le linee guida sull’accessibilità dicono che il titolo dovrebbe essere ad esempio I migliori smartphone Android per il 2020 anziché Perché vorrai acquistare uno di questi smartphone“.

2. Heading

È un altro tema che abbiamo già incontrato: nella SEO, il focus principale degli heading è sul tag H1 per fornire una panoramica del contenuto principale della pagina (visibile sul sito, al contrario del title SEO), mentre i tag H2-H6 vengono utilizzati per definire ulteriormente la struttura di una pagina. Una buona struttura può anche attivare un featured snippet in SERP per determinate query.

Proprio come fanno i crawler dei motori di ricerca, le tecnologie assistive utilizzano gli heading per navigare rapidamente in una pagina e passare a una particolare sezione del contenuto. Più in pratica, titoli e sottotitoli consentono a un lettore di comprendere cosa vale la pena leggere e cosa vale la pena saltare.

Le best practices di SEO e accessibilità convergono per questo elemento: utilizzare solo un H1, assicurarsi che tutti i titoli siano pertinenti al contenuto sottostante e utilizzare gli heading solo quando sono presenti contenuti nel paragrafo, perché l’heading descrive il testo sottostante.

3. Sitemap

Le sitemap HTML sul sito aiutano tutti gli utenti a trovare i contenuti che stanno cercando, soprattutto se il sito ha una navigazione complessa, e sono ancora più importanti per l’accessibilità perché forniscono una panoramica e un accesso chiaro a tutte le pagine importanti del sito.

4. Anchor Text

L’anchor text serve descrivere il contenuto che sarà trovato nella pagina a cui porta un link: può essere utilizzato per descrivere lo scopo della pagina e aiutare gli utenti a determinare se desiderano fare clic sul collegamento per visitare la pagina di destinazione.

In genere, gli screen reader scorrono una pagina e informano gli utenti quando viene trovato un collegamento prima di annunciare il testo di ancoraggio; gli utenti daranno poi l’input a seguire il collegamento se lo ritengono utile.

I crawler dei motori di ricerca utilizzano anche il testo di ancoraggio per aiutare a comprendere il contesto della pagina di destinazione, e la frase in cui è contenuto il collegamento è utile anche per scopi SEO e di accessibilità.

Il consiglio in questo ambito è non limitarsi a un testo generico come “clicca qui”, ma di scrivere un anchor text che sia rilevante per la pagina, pur restando sintetico.

5. Collegamenti breadcrumb

Utilizzati come navigazione secondaria, i breadcrumb consentono agli utenti di tornare alla pagina originale o al contenuto di primo livello e di risalire lungo il percorso che hanno seguito per raggiungere la pagina in cui si trovano.

I link possono servire anche per mostrare ai crawler dei motori di ricerca e agli screen reader come è strutturato un sito, e sono anche un ottimo modo per migliorare la linking interna, in particolare per i siti di grandi dimensioni con strutture di navigazione complesse.

Per garantire che le briciole di pane siano accessibili a tutti gli utenti ci sono alcuni fattori da prendere in considerazione, come assicurarsi che siano collocati nella stessa posizione in tutto il sito; inoltre, è importante che le parole usate per i link siano descrittive, per offrire informazioni precise al momento della lettura degli screen reader.

6. Alt text

Il punto di incontro più noto tra SEO e accessibilità è sicuramente l’utilizzo di un alt text descrittivo per le immagini, che serve a fornire informazioni testuali alternative agli utenti con disabilità visive, impossibilitati quindi a leggere l’immagine e l’eventuale testo al suo interno.

Questi elementi visivi possono diventare una barriera di accessibilità per gli utenti non vedenti e con problemi di vista – che spesso devono fare affidamento su tecnologie assistive che usano un sintetizzatore e lettori Braille aggiornabili – o con dispositivi che non riescono a caricare le immagini.

L’alt text viene utilizzato anche per aiutare i crawler dei motori di ricerca a comprendere il contesto dell’immagine, che possono così essere meglio analizzate e mostrate nella ricerca immagini – e difatti è una delle best practice SEO per queste risorse – e viene letto ad alta voce dagli screen reader: ciò significa che deve essere scritto in modo accurato e pertinente, non semplicemente imbottito di parole chiave nel tentativo di ottimizzarlo (vanamente) per i bot.

Gli algoritmi di apprendimento automatico sono progrediti rapidamente negli ultimi anni, e quindi ora i motori di ricerca sono in grado di determinare facilmente se c’è un abuso di keyword stuffing nell’alt text; allo stesso tempo, gli strumenti di visione artificiale stanno diventando sufficientemente avanzati da identificare ciò che è presente in un’immagine, al fine di creare automaticamente il testo alternativo pertinente.

È bene ricordare che il testo alternativo è diverso da una didascalia, che di solito compare sempre un’immagine, mentre l’alt text non è visibile sul front-end del sito.

7. Navigazione e architettura del sito

Una struttura del sito efficace, che curi l’architettura e la navigazione, semplifica la vita agli utenti, che possono trovare rapidamente ciò che stanno cercando e visualizzare subito le pagine più importanti del sito, ma è utile anche ai crawler dei motori di ricerca.

In generale, i link di navigazione sono progettati per essere tab-able, e quindi tutte le tastiere e gli screen reader sono in grado di leggerli.

Bisogna però evitare l’errore di includere nella navigazione tutto il sito: ciò può causare confusione a tutti gli utenti e ostacolare l’accessibilità, e dall’altro lato indica ai crawler dei motori di ricerca che il sito ha un’architettura piatta.

Più nello specifico, la navigazione è una sfida per gli utenti non vedenti e ipovedenti, che non possono utilizzare un mouse per muoversi all’interno del sito e usano strumenti come le tastiere Braille.

Dobbiamo quindi incorporare la navigazione da tastiera nel sito, assicurandoci che gli utenti disabili possano accedere a tutti gli elementi interattivi del sito web, inclusi:

• URL
• Anchor text
• Menu a discesa
• Widget (anche JavaScript)
• Moduli
• CTA
• Finestre di dialogo.

In alternativa, possiamo utilizzare solo link HTML, pulsanti e campi modulo per assicurarci che tutti gli elementi del sito siano accessibili dalla tastiera.

8. Interazioni degli utenti

Proprio come Googlebot non è in grado di eseguire interazioni fisiche – come fare clic su pulsanti o aprire menu a tendina – anche gli screen reader non possono farlo, a meno che non siano indirizzati dall’utente.

Per questo si consiglia di ridurre il numero di interazioni fisiche necessarie: se abbiamo un menu a discesa o un accordion sul sito, il testo deve essere ancora contenuto nel codice sorgente per garantire che sia i bot che gli screen reader siano in grado di leggere il contenuto senza dover eseguire alcuna user interaction.

Tuttavia, questo testo nascosto deve avere senso e riflettere ciò che è scritto sulla pagina, piuttosto che servire come metodo per fare il vecchio keyword stuffing nascosto.

È inoltre buona norma evitare di utilizzare un’azione di passaggio del mouse per rivelare qualsiasi contenuto, a meno che il contenuto nascosto non sia incluso anche nel codice sorgente.

9. Leggibilità

Anche garantire che qualsiasi contenuto di un sito sia leggibile e assimilabile è importante sia per gli utenti che per i motori di ricerca: avere un livello di lettura dei contenuti semplificato è uno dei modi migliori per aiutare gli utenti che potrebbero avere disabilità cognitive, e potrà aiutare anche i visitatori la cui prima lingua non è quella utilizzata sul sito e coloro che potrebbero leggere i contenuti mentre sono distratti.

Semplificare la leggibilità di un sito significa evitare l’uso di linguaggio tecnico o complesso, assicurarsi che il testo sia allineato a sinistra e che vengano utilizzati elenchi.

Sul versante tecnico e di progettazione, è molto importante pensare al colore e al contrasto: le persone con disturbi della vista – come la retinite pigmentosa, il glaucoma, la retinopatia diabetica e la cataratta – hanno una bassa sensibilità al contrasto del colore, e quando si progettano le pagine Web bisogna garantire un contrasto elevato tra il primo piano e lo sfondo, ad esempio, usando lettere gialle su sfondo nero ed evitando di usare font sottili.

In linea di massima, il testo nero su sfondo bianco assicura la massima leggibilità (anche per le CTA), ma possiamo anche optare per una combinazione di testo nero su sfondo giallo o testo giallo su sfondo blu; di sicuro, è da evitare un mix come testo verde su sfondo rosso o viceversa, difficili da leggere anche in condizioni normali.

Attenzione poi che non ci siano funzionalità JavaScript o CSS che impediscano agli utenti con problemi di vista di aumentare il contrasto.

In termini pratici, inoltre, può servire anche consentire agli utenti di ingrandire le dimensioni dei caratteri, risolvendo il problema che molte persone incontrano con testi di piccole dimensioni: offrire un foglio di stile alternativo, con la possibilità di ingrandire la dimensione del carattere senza interrompere il layout della pagina, potrebbe facilitare la lettura del contenuto. Inoltre, i pulsanti CTA dovrebbero avere un font di dimensione maggiore per essere più evidenti.

10. URL descrittivi

Gli URL leggibili sono importanti anche per l’accessibilità e i consigli di best practices includono la garanzia che gli URL siano facili da leggere e da capire, usando separatori di parole come i trattini. Gli screen reader possono leggere in modo rapido e preciso gli URL descrittivi, offrendo un contesto agli utenti non vedenti e ipovedenti.

Queste descrizioni significative anche più facile passare al contenuto corretto, perché gli URL informano gli utenti di ciò che possono aspettarsi di trovare quando fanno clic su una pagina, oltre a essere utilizzati anche dai motori di ricerca per comprendere il contesto della pagina.

Prendendo come esempio la pagina “about”, l’esperto Manish Dudharejia su SEJ spiega che www.abcmarketing.com/about è un URL a bassa leggibilità, mentre www.abcmarketing.com/about-our-company è un URL ad alta leggibilità.

11. Accessibilità di video e contenuti multimediali

I video e altri elementi multimediali sul sito web svolgono un ruolo fondamentale nell’aumentare il coinvolgimento degli utenti, soprattutto in questa che è stata definita attention economy.

Riguardo all’accessibilità, bisogna considerare chi ha problemi con l’udito, ma anche chi ha problemi con la vista: per questi ultimi, la soluzione può essere utilizzare una descrizione audio da aggiungere a parti solo visive – tra le altre, immagini, gesti e modifiche alle impostazioni – che aiuterà gli utenti non vedenti a godersi il video.

Per gli utenti non udenti o ipoudenti, invece, possiamo usare didascalie di testo che si sincronizzano con le tracce video e audio.

Bisogna usare il buon senso anche in questo campo: aggiungere ore di descrizione audio rende l’esperienza priva di significato per l’utente, così come non agevola le persone un testo troppo lungo o con contrasto di colore non evidente.

Infine, dobbiamo utilizzare un lettore multimediale accessibile: i moderni i lettori HTML5 offrono maggiori possibilità di incorporare l’accessibilità.

12. Ridurre al minimo l’uso delle tabelle

Di solito, i screen reader informano gli utenti non vedenti del numero di righe e colonne di una tabella, ma spesso risulta difficile per questi dispositivi leggere i dati tabulari nel flusso che corrisponde all’ordine visivo.

Dove possibile, quindi, dovremmo preferire il CSS per la presentazione dei dati e, se dobbiamo inserire una tabella, usare le intestazioni corrette per ogni riga e colonna.

Possiamo anche utilizzare le caption delle tabelle HTML5 per fornire un contesto aggiuntivo agli utenti disabili.

Come valutare e testare l’accessibilità del sito

Una volta implementate queste best practices, bisogna poi testare l’accessibilità e verificare che tutto funzioni regolarmente: esistono diversi strumenti che possono essere utilizzati per questo scopo, comprese molte estensioni di Chrome che possono essere eseguite nel browser per valutare pagine web specifiche.

Tra i vari, l’articolo segnala:

• Lo strumento di valutazione WAVE, sviluppato da webAIM.org, che fornisce un feedback visivo sull’accessibilità del contenuto aggiungendo icone e indicatori sulla pagina.
• axe Web Accessibility Testing, una estensione di Chrome utilizza la libreria JavaScript open source axe, sviluppata da Deque Systems: il test viene eseguito all’interno degli strumenti di sviluppo del browser e identifica i difetti di accessibilità su una pagina web.
• Il controllo accessibilità di Siteimprove, che fornisce una chiara panoramica dei problemi di accessibilità di una pagina con spiegazioni chiare di come influenzano gli utenti.
• Google Lighthouse, lo strumento di Google che esegue anche un check dell’accessibilità e fornisce un punteggio simile a quello usato per le prestazioni.

La checklist degli interventi per migliorare l’accessibilità del sito

E quindi, anche se il lavoro di SEO si concentri tipicamente sulla garanzia che i siti Web siano accessibili ai motori di ricerca, molte delle aree di ottimizzazione possono avere anche un impatto sull’accessibilità del sito per gli utenti.
Eppure, non tutti i siti rispettano tali principi e tanti sono gli ostacoli che possono creare difficoltà agli utenti: questi sono i principali problemi relativi all’accessibilità, con una checklist degli interventi da attuare sul sito per superare le criticità.
Per ottenere il massimo effetto, l’accessibilità informatica dovrebbe essere considerata una priorità e quindi inclusa nella strategia digitale e di marketing: se vogliamo correggere alcuni problemi presenti sulle nostre pagine, possiamo fare riferimento a questa veloce checklist di interventi che ci permettono di migliorare l’inclusività digitale e dimostrare un’attenzione differente e più seria agli utenti/clienti, oltre che il possesso di competenza comunicativa e tecnologica.

1. Organizzazione dei titoli e degli heading

Iniziamo dalla struttura da dare alla pagina attraverso la titolazione e un layout gerarchico, che modella i contenuti e li rende di più facile lettura. Un uso corretto dei titoli delle pagine e degli heading, che crea un’organizzazione gerarchica, rappresenta una parte fondamentale dell’accessibilità al Web e della SEO, perché può rendere il sito utilizzabile e comprensibile sia per gli utenti con determinate disabilità cognitive, sia per lettori che hanno bassi tempi di attenzione, aumentando la loro soddisfazione e l’UX generale.

I buoni titoli delle pagine sono particolarmente importanti per l’orientamento, per aiutare le persone a sapere dove si trovano e a spostarsi tra le pagine aperte nel browser: la prima cosa che gli screen reader pronunciano quando l’utente passa a una pagina Web diversa è proprio il titolo della pagina. Come già consigliato anche dalle best practices SEO sulla titolazione, quindi, è importante anche per l’accessibilità verificare che ci sia un titolo che descriva adeguatamente e brevemente il contenuto della pagina e che tale titolo sia unico e che distingua adeguatamente la pagina dalle altre pagine web. Inoltre, anche la gerarchia delle intestazioni è significativa: a livello ideale, la pagina inizia con un “h1” – che di solito è simile al titolo della pagina – e non salta i livelli, passando quindi ai vari h2, h3 e h4, anche se questi non sono requisiti assoluti ma solo consigliati.

2. Contrasto di colore

Alcune persone non possono leggere il testo se non c’è contrasto sufficiente tra il font e lo sfondo (come ad esempio usando un testo grigio chiaro su uno sfondo chiaro): il contrasto cromatico implica la regolazione del colore degli elementi web in primo piano (come appunto i caratteri) rispetto al colore degli elementi di sfondo, per garantire che ciò che ha maggior valore risalti e sia facilmente leggibile per le persone con disabilità visive e non solo.

Il Bureau of Internet Accessibility ha identificato un rapporto di contrasto del colore che garantisce che il nostro sito Web sia visibile e leggibile per le persone con disabilità visive legate al colore.

Tieni sotto controllo il tuo sito

Analizza i rendimenti delle tue pagine e verifica gli aspetti chiave dell’interazione degli utenti

Scopri di più

Restando sempre sul tema font, è bene fare attenzione anche che i singoli caratteri siano riconoscibili e distinguibili, oltre che valutare l’effettiva efficienza dei comandi di ridimensionamento del testo (disponibili sulla maggioranza dei browser): per poter leggere il contenuto, alcune persone hanno bisogno di ingrandire le dimensioni dei font o di modificare altri aspetti della visualizzazione del testo, come lo spazio tra le righe. Se però le pagine non sono progettate correttamente, diventano di fatto inutilizzabili quando si modifica la dimensione del testo, specialmente quando viene modificata tramite lo zoom del solo testo o le impostazioni del testo, perché succede che colonne e sezioni si sovrappongano, che scompaia lo spazio tra le righe, che le righe di testo diventino troppo lunghe o che addirittura vada via il testo stesso.

3. Alt text per le immagini

Il testo alternativo aiuta i visitatori a capire cosa rappresenta un’immagine web anche quando non riescono a visualizzarla per un qualsiasi motivo; più precisamente, l’alt text rende le informazioni sono disponibili per le persone non vedenti, ma anche per le persone che disattivano le immagini o che, a causa di assenza di connessione di rete sufficiente, non possono caricarle correttamente, nonché per crawler dei motori di ricerca.

Se non forniamo un alt text alle immagini, tali risorse risultano inaccessibili, in particolare alle persone che utilizzano un dispositivo screen reader, che legge ad alta voce le informazioni su una pagina e usano proprio il testo alternativo per descrivere l’immagine visiva.

Ottimizzare le immagini per la SEO e curare la stesura di alt text descrittivi e specifici permette, quindi, di offrire a tutti i visitatori un contenuto pienamente usufruibile in ogni sua parte, costruendo così una migliore esperienza utente.

4. Alternative ai contenuti multimediali

Le pagine web non si basano più soltanto sulla parte testuale e, come sappiamo, ci sono sempre più immagini, video o podcast che completano le informazioni: tuttavia, se inseriamo queste risorse dobbiamo considerare le possibili limitazioni per alcuni utenti.

In particolare, le informazioni nei podcast o in altri file audio non sono disponibili per le persone non udenti o per alcune persone con problemi di udito, mentre le informazioni visual nei video non sono disponibili per le persone non vedenti o per alcune persone con problemi di vista: per superare l’ostacolo, possiamo però offrire il contenuto in un formato alternativo come didascalie e trascrizioni di testo, che possono essere letti da screen reader e display Braille oppure ingranditi e riformattati per le persone ipovedenti.

5. Gestione dei moduli e altre etichette

Abbiamo detto che i moduli sono uno degli elementi più critici per l’accessibilità e che numerosi sono gli errori presenti sui siti a questo proposito, in particolare per la carenza nella gestione delle etichette che identificano i form – intendendo con questo termine una singola casella di testo (ad esempio Cerca), oppure un modulo complesso con campi di testo, pulsanti di opzione, caselle di controllo, elenchi a discesa e pulsanti.

È importante che tutti i campi del modulo e dei controlli abbiano etichette visibili e testuali, con cui quindi le persone possono interagire utilizzando solo la tastiera, l’input vocale e le utilità per la lettura dello schermo; inoltre, quando implementate e contrassegnate correttamente, le etichette stesse diventano selezionabili, aumentando l’area di destinazione e semplificando la selezione di piccoli pulsanti di opzione o caselle di controllo.