Eliminare le barriere architettoniche informatiche, e quindi 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. Sintetizzando, possiamo dire che questo è l’obiettivo finale dell’accessibilità, una delle parole chiave da tenere a mente non solo nella progettazione del sito, ma anche nel quotidiano lavoro di ottimizzazione, perché chiama in causa diversi elementi legati alla SEO.

La definizione di accessibilità

Con il termine accessibilità in campo web 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 della Rete, 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.

Cosa significa accessibilità dei siti web

Questo tema non riguarda quindi in via esclusiva le persone che soffrono di una disabilità, ma in senso più esteso tutti gli utenti, da cui 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.

Secondo Tim Berners-Lee, direttore del W3C e inventore del World Wide Web, “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.

È 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: parliamo di ottimizzazione dei tag del titolo, della struttura dell’header, della cura 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 4 principi dell’accessibilità

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

  • Perceivable
  • Operable
  • Understandable
  • Robust

Ovvero, in italiano:

  • 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.
  • 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à.
  • 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.
  • 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.

Un topic sempre più di attualità

Con 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”.

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’update algoritmico già programmato per il 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à

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à, 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.

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

L’intersezione tra SEO e accessibilità: ancora troppi errori

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

Come dice l’articolo di SEJ, nel febbraio 2020 Web Aim ha utilizzato il suo motore di accessibilità WAVE per analizzare il DOM renderizzato di tutte le pagine dopo l’applicazione di script e stili, per valutare le barriere all’accessibilità dell’utente finale e gli errori delle linee guida per l’accessibilità dei contenuti web (WCAG).

Lo studio ha rivelato che il 98 per cento delle home page presentava errori WCAG rilevabili, mentre il 97 per cento delle pagine con contenuti più profondi non ha superato il test di accessibilità.

I principali fattori che hanno causato gli errori in entrambi i casi erano testo a basso contrasto, testo alternativo mancante e collegamenti vuoti.

Il lavoro SEO sull’accessibilità

La SEO ha il controllo diretto su almeno due di questi problemi, 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“.

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

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

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

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

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

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

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

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

  1. Url descrittivi

Gli URL leggibili sono importanti anche per l’accessibilità e i consigli di best practice 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à.

  1. 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à.

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