Web Accessibility: linee guida e metodi per testare l’Accessibilità del tuo e-commerce

Secondo una recente ricerca della Baymard, il 94% dei più grandi siti di e-commerce non rispetta i requisiti di Accessibilità, in modo più specifico:

1. L'82% dei siti ha problemi con l’Accessibilità delle immagini;
2. Il 73% dei siti ha problemi con l’Accessibilità dei link;
3. Il 58% dei siti ha problemi con l'Accessibilità del markup dei campi dei form;
4. Il 64% dei siti ha problemi con l'Accessibilità da tastiera.

(Fonte: Baymard Institute )

È importante specificare che quelli analizzati da questa ricerca sono alcuni dei più grandi e-commerce: possiamo solo supporre che le percentuali siano più alte per i siti con meno budget per soddisfare i requisiti di Accessibilità.

Se consideriamo che secondo l’Istat sono 3,1 milioni le persone con disabilità in Italia (il 5,2% della popolazione) e a questo numero aggiungiamo anche le persone che dichiarano di avere limitazioni non gravi, il numero totale di persone con disabilità in Italia sale a 12,8 milioni.

In pratica, secondo le statistiche attuali, il 94% dei maggiori e-commerce è potenzialmente inutilizzabile per 12,8 milioni di persone solo in l’Italia, per 1 miliardo di persone nel mondo (OMS).

Di norma si crede che l’Accessibilità nel Web sia di aiuto solo alle persone con disabilità, ma non è corretto: l’Accessibilità porta benefici a tutti gli utenti che utilizzano un sistema. Basta pensare a tutte le volte in cui ci è capitato di utilizzare il telefono in un ambiente rumoroso o con il sole che ci impediva di vedere chiaramente lo schermo: durante situazioni di questo tipo, necessitiamo di funzionalità pensate ad hoc.

Cosa si intende per Accessibilità? Accessibilità significa che i siti Web, gli strumenti e le tecnologie sono progettati e sviluppati in modo che chiunque possa utilizzarli.

L'Accessibilità, quindi, si riferisce all'esperienza di persone che potrebbero trovarsi al di fuori della ristretta cerchia di utenti "tipici" e che potrebbero dover accedere o interagire con il tuo e-commerce  in modo diverso  da quanto previsto. (Google Developers)

Possiamo quindi dividere le persone a cui l’Accessibilità porta beneficio in tre categorie principali:

1. Utenti con disabilità permanenti
2. Utenti con disabilità temporanee
3. Utenti con impedimenti situazionali.

Vediamo qui di seguito un’immagine di Microsoft Design Toolkit che ben riassume alcuni casi tipici in cui la maggior parte di noi si è trovato almeno una volta.

 

(Fonte: Microsoft Design Toolkit)

Qual è il rapporto tra “Usabilità” e “Accessibilità”?

• Usabilità si riferisce alla creazione di siti web che siano efficaci, efficienti e soddisfacenti.
• Accessibilità, invece, si riferisce alla creazione di siti web che siano efficaci, efficienti e soddisfacenti per più persone, in diversi contesti, in particolar modo per persone con disabilità e per coloro che utilizzano tecnologie di assistenza.

Vediamo ora le linee guida previste dalla legge, i metodi per testare il livello di Accessibilità del tuo e-commerce e 5 consigli per aumentare la Web Accessibility.

I Livelli di Accessibilità (A, AA, AAA) e come calcolare quello del tuo e-commerce

Ora che è chiaro cosa si intende con “Accessibilità”, cerchiamo di capire in che modo rendere un sito web accessibile.

Il W3C (World Wide Web Consortium, un’associazione internazionale non governativa nata con lo scopo di sviluppare degli standard al fine di garantire la crescita a lungo termine del web) all’interno della Web Accessibility Initiative ha sviluppato degli standard specifici per l'accessibilità, in particolare:

1. Authoring Tool Accessibility Guidelines (ATAG): una serie di linee guida per i software che gli “autori” (sviluppatori, designer, scrittori) utilizzano per produrre contenuti web.
2. User Agent Accessibility Guidelines (UAAG): linee guida per rendere accessibili gli User Agents, in particolare browser, estensioni del browser, lettori multimediali, lettori ebook e altre applicazioni che presentano il contenuto Web.
3. Web Content Accessibility Guidelines (WCAG): set di linee guida per la gestione del "contenuto" Web, che generalmente si riferisce alle informazioni presenti in una pagina Web o applicazione. Sono incluse quindi sia le informazioni naturali come testo, immagini e suoni, sia la presentazione e il codice che definisce la struttura del sito.

Qui ci concentreremo solamente nelle linee guida per il contenuto web (WCAG), le quali nella versione attuale (2.1) sono suddivise in quattro principi universali di Accessibilità:

1. Percepibile: le informazioni e i componenti dell'interfaccia utente devono essere presentati in modo che possano essere riconosciuti dall’utente;
2. Utilizzabile: l’utente deve poter fruire dei componenti e della navigazione dell’interfaccia;
3. Comprensibile: le informazioni e le operazioni dell'interfaccia utente devono essere chiare e facili da capire;
4. Robusto: il contenuto deve poter essere interpretato in maniera affidabile mediante una vasta gamma di programmi utente, comprese le tecnologie assistive.

Questi principi universali racchiudono delle linee guida, ognuna delle quali comprende delle sotto-linee guida chiamate “Criteri di Successo”. Ogni criterio di successo ha un livello di priorità che può essere:

• A: Un programmatore deve soddisfare i criteri di successo con questa priorità.
• AA: Un programmatore dovrebbe soddisfare i criteri di successo con questa priorità.
• AAA: Un programmatore potrebbe soddisfare i criteri di successo con questa priorità.

Facciamo un esempio. Il principio universale “Comprensibile” contiene 3 linee guida: “Leggibile”, “Prevedibile” e “Assistenza all’input”. A sua volta, ogni linea guida comprende al suo interno vari criteri di successo di diversa priorità.

Comprensibile:

1. Leggibile

1. Lingua della pagina (A): La lingua umana predefinita di ogni pagina Web deve poter essere determinata a livello di codice.

2. Lingua delle parti della pagina (AA): Il linguaggio umano di ogni passaggio o frase deve poter essere determinato a livello di codice, a eccezione di nomi propri, termini tecnici, parole di linguaggio indeterminato e parole o frasi che sono diventate parte del volgare del testo immediatamente circostante.

3. Parole inusuali (AAA): È disponibile un meccanismo per identificare definizioni specifiche di parole o frasi utilizzate in modo insolito o ristretto, inclusi idiomi e gergo.

4. Abbreviazioni (AAA): È disponibile un meccanismo per identificare la forma estesa o il significato delle abbreviazioni.

5. Livello di lettura (AAA): Quando il testo richiede una capacità di lettura più avanzata rispetto al livello di istruzione secondaria inferiore è disponibile un contenuto supplementare o una versione che non richiede capacità di lettura maggiore di quel livello.

6. Pronuncia (AAA): È disponibile un meccanismo per identificare la pronuncia specifica delle parole il cui significato, nel contesto, è ambiguo senza conoscerne la pronuncia.

Vediamo qui di seguito una tabella riassuntiva della struttura delle WCAG 2.1.

Il livello di Accessibilità di un sito è quindi calcolato in questo modo: se un sito soddisfa tutti i criteri richiesti dalle linee guida con priorità A, allora ha un livello A di Accessibilità, se soddisfa tutti i criteri di livello A e AA ha un livello AA e, infine, se soddisfa tutti i criteri A, AA e AAA, ha un livello AAA di Accessibilità.

Cosa richiede la Legge in merito all’Accessibilità?

La domanda che sorge spontanea adesso è: “il mio sito che livello di Accessibilità dovrebbe avere?”. La risposta più giusta sarebbe AAA, in quanto soddisfacendo tutti i criteri di successo, si assicura l’Accessibilità alla maggior parte degli utenti (sì, non a tutti!).

Tuttavia, la risposta a livello legale la troviamo nella Legge Stanca (n°4, 9 gennaio 2004) che con l’ultimo aggiornamento di luglio 2020 richiede:

1. Conformità con il livello AA delle WCAG 2.1 per i siti web le cui procedure negoziali di sviluppo e/o aggiornamento sono state avviate dopo la data di entrata in vigore delle presenti Linee Guida (23/07/2020).
2. Conformità con il livello AA delle WCAG 2.0 per i siti sviluppati o aggiornati in data precedente.

La versione iniziale della Legge Stanca era destinata solamente ai siti della pubblica amministrazione, tuttavia, con l’aggiornamento di luglio 2020, l’obbligo è stato esteso anche ai soggetti privati con un fatturato medio, negli ultimi tre anni di attività, superiore a 500 milioni di euro, che offrono servizi al pubblico attraverso siti web o applicazioni mobili.

È bene chiarire, inoltre, che entro giugno 2025, quest’obbligo verrà esteso alla globalità dei soggetti e, di conseguenza, nessun prodotto non accessibile potrà più essere immesso nel mercato.

Metodi e Tool: Come valutare l’Accessibilità del tuo e-commerce

Per testare il livello di Accessibilità del tuo e-commerce e valutare se rispetta le linee guida presenti nelle normative, esistono principalmente due strade possibili:

1. Controllo manuale: il metodo più sicuro è ovviamente far controllare a una persona se ogni linea guida viene rispettata, controllo che ovviamente necessita di una certa quantità di tempo.
2. Utilizzo di tool automatici: Esiste una grandissima quantità di strumenti che valutano se un sito rispetta o meno i requisiti di Accessibilità, il W3C ne fornisce un alcuni nella sua Web Accessibility Evaluation Tool List. Questi strumenti si distinguono per prezzo, numero di pagine controllate in contemporanea e tipo di valutazione effettuata.

I tool più conosciuti e utilizzati sono sicuramente:

• WAVE
• Axe

Anche in questo caso però bisogna prestare attenzione: questi strumenti sono estremamente utili per risparmiare tempo, tuttavia è improbabile che trovino tutti gli errori presenti.

Il metodo migliore per testare il proprio sito dunque qual è? L’ideale è utilizzare degli strumenti automatici per trovare e risolvere velocemente una parte dei problemi e, successivamente, affidare un  controllo manuale del sito a esperti di Accessibilità per trovare gli errori che sono sfuggiti al primo test.

5 linee guida base per migliorare l’accessibilità del tuo e-commerce

Quali accorgimenti puoi applicare sin da subito al tuo sito per adeguarlo alle principali linee guida dell’Accessibilità? Ecco 5 consigli e accorgimenti utili per aumentare la Web Accessibility del tuo e-commerce.

1.Permetti agli utenti di raggiungere tutti i contenuti

Tutte le funzionalità del contenuto devono essere utilizzabili tramite focus da tastiera: questo significa che tutti gli elementi con cui l’utente può interagire ricevono il focus (in modo sequenziale) quando l’utente preme il tasto “tab”.

Un grandissimo numero di utenti si muove attraverso i comandi da tastiera, basta prendere come esempio il tasto “enter” che tutti utilizziamo per confermare un’azione.

Per gli utenti che utilizzano Screen Reader la navigazione da tastiera è la navigazione Primaria.

È importante quindi fare in modo che tutto il contenuto con cui si può interagire in una pagina sia accessibile anche tramite il focus da tastiera: se un bottone o un link non è utilizzabile da tastiera, rende impossibile la navigazione per alcuni utenti.

Secondo la ricerca della Baymard, il 64% dei siti non supporta la navigazione da tastiera.

2.Inserisci un testo alternativo per i contenuti non testuali

Tutti i contenuti non testuali (ad esempio le immagini) presentati all'utente devono avere un'alternativa testuale, il cosiddetto “testo alternativo”.

Il motivo è semplice: gli utenti con disabilità visiva utilizzano delle tecnologie chiamate “Screen Reader” le quali leggono ad alta voce il contenuto testuale. Se uno Screen Reader incontra un’immagine senza testo alternativo, l’utente non potrà sapere cosa è rappresentato in quell’immagine.

3.Scegli un adeguato contrasto dei colori

Il contrasto dei colori è presente in due diversi Criteri di Successo, uno di livello A ed uno di livello AAA. Il criterio di livello A, quindi il livello minimo, chiede che la rappresentazione visiva del testo e di immagini contenenti testo abbia un rapporto di contrasto di almeno 4.5.

Alcuni tipi di disabilità visiva rendono più difficile vedere il contrasto dei colori, di conseguenza un testo su sfondo con contrasto inferiore a 4.5 potrebbe essere invisibile per alcuni utenti.

Il 24% dei siti ha un testo con contrasto insufficiente per essere visibile agli utenti con disabilità visive (Baymard).

4.Imposta la lingua della pagina nel codice

La lingua della pagina deve sempre essere definita a livello di codice, in quanto gli Screen Reader settano la lingua in cui leggere a seconda dell’attributo “lang” che trovano nel codice.

5.Esplicita lo scopo dei link

Il nome dei collegamenti ipertestuali deve essere chiaro.

Anche in questo caso, gli Screen Reader leggono solo il contenuto testuale, di conseguenza, link con testo “Clicca qui” o “Invia”, non faranno capire in alcun modo all’utente cosa succede selezionando quel link.

È quindi importante che il testo del link spieghi cosa accade dopo averlo cliccato.

Il 66% dei siti ha dei link che non hanno un titolo adeguatamente descrittivo (Baymard).

Concludiamo con una citazione dell’informatico Tim-Berners Lee, che tutti conosciamo per essere il co-inventore del World Wide Web assieme a Robert Cailliau:

La potenza del Web sta nella sua universalità. L'accesso da parte di tutti, indipendentemente dalla disabilità, è un aspetto essenziale.