Con l’avvicinarsi delle scadenze normative, il tema dell’Accessibilità web sta assumendo una rilevanza sempre più forte e moltissime aziende si stanno muovendo o intendono muoversi nel breve periodo per adeguare i propri touchpoint digitali.
Ma, nel concreto, come possiamo condurre una verifica di accessibilità del sito web per capire come ottemperare alla normativa?
Gung propone un metodo strutturato utile a individuare gli errori, suggerire le soluzioni in base alle buone pratiche di Accessibilità derivanti dalle linee guida internazionali del W3C (WCAG nella loro ultima versione, la 2.2 pubblicata a ottobre 2023) .
Approfondisci il nostro approccio leggendo come abbiamo supportato un nostro cliente attraverso questo caso studio.
In questa pagina:
Accessibilità Web: le linee guida di riferimento
Un sito web per essere considerato Accessibile deve presentare alcuni requisiti per esempio:
- I contenuti della pagina devono essere organizzati in modo strutturato. Organizzare i tag <h> in maniera gerarchica in modo che sia possibile comprendere facilmente la struttura del testo. È consigliabile utilizzare un solo tag <h1> (titolo principale) all’interno della pagina
- Deve essere garantito un contrasto minimo sufficiente tra il testo e il suo sfondo
- I collegamenti ipertestuali devono avere una descrizione testuale del loro scopo. La situazione ideale è quella in cui il testo stesso del link chiarisce lo scopo del link/la destinazione.
- Tutte le funzionalità del contenuto sono utilizzabili tramite un’interfaccia di tastiera senza richiedere tempi specifici per la pressione dei singoli tasti.
Questi requisiti sono definiti dalle WCAG, lo standard universale delle linee guida necessarie a definire specifiche tecniche per rendere i contenuti web accessibili alle persone con disabilità.
Le WCAG poggiano le proprie basi su 4 pilastri fondamentali che devono essere rispettati affinché i contenuti web possano considerarsi accessibili. Stiamo parlando dei cosiddetti principi POUR (Perceivable, Operable, Unserstandable, Robust). Un contenuto web per essere considerato accessibile deve essere:
- Percepibile: riguarda i sensi di percezione che le persone utilizzano durante la navigazione sul web (eventuale utilizzo di tecnologie assistive).
- Utilizzabile: i contenuti e la navigazione devono essere utilizzabili per semplificare l’interazione dell’utente.
- Comprensibile: i termini utilizzati in un sito web devono essere chiari, avere istruzioni semplici e spiegare o guidare nella comprensione di attività complesse
- Robusto: il contenuto deve poter essere interpretato in maniera affidabile da una grande varietà di programmi utente, comprese le tecnologie assistive.
Verifica di Accessibilità siti web: come fare
Hai ottenuto una panoramica su quelli che sono i principi e le linee guida in materia di Accessibilità a questo punto, come validare l’accessibilità dei siti web in concreto?
In Gung realizziamo delle Verifiche di Accessibilità partendo da una navigazione strutturata del sito secondo una checklist da noi sviluppata che guida le verifiche di dettaglio in relazione a ogni linea guida WCAG.
I controlli che svolgiamo interessano:
1. L’organizzazione dei contenuti nella pagina come ad esempio
- verifica della corretta struttura della titolazione
- Verifica della corretta organizzazione dei form
- verifica della collocazione degli strumenti di supporto, se presenti
2. La struttura del codice HTML della pagina, come ad esempio
- correttezza delle lingua impostata a livello di codice
- utilizzo di attributi WAI-ARIA per l’estensione della semantica della pagina
- impostazione corretta dei collegamenti e delle relazioni tra gli elementi nella pagina
3. La corretta gestione di elementi multimediali come immagini, video, audio
4. Viene inoltre valutata l’accessibilità di eventuali documenti in formato .PDF che possono essere scaricati dall’utente.
A valle di questa prima fase, ne viene svolta una seconda in cui viene eseguita la navigazione del sito con l’utilizzo di tecnologie assistive, come la tastiera e lo screen reader. Questo ci aiuta a verificare se le tecnologie assistive interpretano correttamente il contenuto del touchpoint analizzato.
Definizione Checklist
La checklist di controllo che abbiamo elaborato in Gung parte dall’elenco di tutte le linee guida WCAG (versione 2.2) e definisce, per ognuna di esse, le verifiche di dettaglio da fare per valutarne la conformità. Di seguito un estratto della nostra checklist:
Le linee guida sono state raggruppate per tipologia di verifica in modo da rendere più efficaci i controlli:
- Verifiche trasversali: identificano degli errori che, se presenti in una singola pagina, possono essere ritenuti trasversali su tutto il sito.
- Verifiche ad alta priorità: verifiche che interessano le linee guida su cui, in genere, si rileva la maggiore numerosità di errori
- Verifiche relative a immagini
- Verifiche relative a form o campi di input
- Verifiche relative a contenuti audio/video
- Verifiche relative a contenuti dinamici
- Etichette e informazioni aggiuntive
- Navigazione da tastiera / Screen reader
- Utilizzo del puntatore
Come vediamo dall’esempio sopra riportato, per ogni tipo di verifica viene specificato:
- Principio POUR di riferimento
- Requisito della linea guida
- Linea guida WCAG
- Livello di conformità di riferimento
- Scopo della linea guida
- Tipologia di verifica da svolgere
Grazie alla checklist saremo in grado di avere una visione chiara delle verifiche da svolgere su tutti i contenuti del touchpoint in esame.
Definizione del campione da verificare
Strutturata la checklist di controlli passeremo alla definizione dei contenuti da analizzare. In questo caso è possibile procedere con due diversi approcci
- Analisi dell’intero sito web, consigliato in caso di siti esclusivamente redazionali e composti da un numero limitato di pagine
- Analisi di un campione di pagine che rappresentano dei template ricorrenti all’interno del sito (es. template di una pagina prodotto oppure template di una pagina di categoria, in caso di un sito eCommerce)
Vuoi ottenere una verifica di Accessibilità completa?
Analisi di Accessibilità sito web: guida all’utilizzo della Checklist
Definite le verifiche da svolgere, prendendo come riferimento le linee guida WCAG e definito il campione da analizzare, come procediamo in concreto?
Di seguito ti mostriamo come poter sfruttare la nostra checklist di accessibilità per eseguire un controllo preliminare dell’accessibilità del tuo sito web.
Scaricata la nostra checklist quello che dovrai fare è verificare la conformità del tuo sito in relazione a tutte le linee guida indicate al suo interno. Partiamo per esempio dalla prima verifica che troverai all’interno del file:
Esistono diversi strumenti che possono essere utilizzati per testare l’accessibilità di un sito web.
In questo caso specifico, quello che dovrai fare è verificare il contrasto minimo dei tuoi contenuti attraverso un’indagine qualitativa ovvero, una navigazione manuale del sito ricorrendo all’uso della tecnologia assistiva WebAIM Contrast Checker.
In generale, la navigazione strutturata dal sito può essere condotta:
- Attraverso un’indagine qualitativa: navigazione manuale coadiuvata da tecnologie assistive
- Attraverso un’indagine quantitativa: navigazione del sito con il supporto di strumenti automatici
Una volta rilevato l’errore, all’interno della nostra checklist troverai anche una sezione dedicata al tracciamento delle non conformità così strutturata:
quello che dovrai fare è compilare la seguente sezione, tenendo traccia di tutti gli errori rilevati e andando ad indicare:
- Il tipo di device ovvero, indicare se l’errore è rilevabile su tutti i device oppure solamente da Desktop o solamente da mobile
- Il titolo della pagina su cui è stato rilevato l’errore
- L’URL della pagina su cui è stato rilevato l’errore
- L’elemento su cui viene rilevato l’errore: button, link, immagine
- Una descrizione dell’errore rilevato
- La soluzione suggerita per far fronte alla non conformità
- Il Principio POUR di riferimento: Percepibile, Utilizzabile, Comprensibile, Robusto
- Il criterio WCAG di riferimento
- Il livello di conformità soddisfatto: A,AA
Di seguito un esempio di compilazione relativamente al nostro sito web:
nell’esempio sopra riportato facciamo riferimento all’errore relativo alla linea guida 1.4.3 (Contrasto minimo) rilevato sulla Homepage del nostro sito web.
Una volta aver definito il tipo di device su cui l’errore viene rilevato, la pagina e l’url del sito, andiamo ad inserire una descrizione dell’errore. In questo caso specifico abbiamo riscontrato una mancanza di contrasto minimo sufficiente tra testo e sfondo.
La soluzione proposta è stata ovviamente quella di individuare una combinazione di colori diversa per il testo e lo sfondo del nostro contenuto in modo da far si che il contrasto minimo definito dalla linea guida WCAG di riferimento venga rispettato.
Nell’Assessment completo che consegniamo ai nostri clienti, oltre al documento con la rilevazione degli errori viene fornita una sintesi della numerosità degli errori rilevati suddivisi come segue:
- Errori web/ non web
Errori rilevati su pagine web oppure su documenti in formato PDF - Errori relativi ai principi POUR
Errori suddivisi per principio di riferimento (Percepibile, Utilizzabile, Comprensibile, Robusto) - Errori relativi ai livelli di conformità
Errori suddivisi per livello di conformità (A, AA) - Errori con impatti sul codice o sul design
Errori che hanno impatto solo sul codice HTML oppure sul design della pagina
Tra gli errori più frequenti abbiamo quelli relativi a:
- Contrasto insufficiente: le linee guida WCAG prescrivono un rapporto di contrasto minimo di 4.5:1 tra il testo e lo sfondo. Nel caso in cui tale rapporto non sia rispettato, la palette di colori dovrà essere modificata per consentire la corretta visione del testo a tutti gli utenti
- Testo alternativo: le linee guida WCAG indicano che tutte le immagini che contribuiscono al contenuto della pagina debbano avere un testo alternativo in modo da poter essere lette dagli screen reader. Nel caso in cui ci siano immagini significative senza testo alternativo o con un testo alternativo inefficace, questo dovrà essere corretto per rendere il contenuto fruibile a tutti gli utenti
Se vuoi ottenere una verifica di accessibilità completa, ricevendo il supporto di un team di esperti, non esitare a contattarci per capire i prossimi passi da compiere.