I problemi di accessibilità web più comuni e come identificarli
Un sito web può funzionare perfettamente per il team che lo gestisce e creare comunque gravi difficoltà ad alcuni utenti.
Il problema è che molte barriere all'accessibilità non sono evidenti quando si naviga con il mouse, si vede chiaramente lo schermo e si utilizza il sito esattamente come è stato testato internamente.
Cambia leggermente la prospettiva.
Prova a completare un acquisto senza usare il mouse. Usa solo il tasto Tab. Ingrandisci la pagina al 200%. Guarda un modulo e immagina che le etichette dei campi vengano lette da uno screen reader.
Il sito web inizia ad apparire diverso.
Ecco alcuni dei problemi che vale la pena controllare per primi.
Immagini prive di testo alternativo
L'immagine di un prodotto, un diagramma, un'icona o un banner possono comunicare informazioni a cui un utente non può accedere se l'immagine non dispone di un'alternativa testuale appropriata.
Le WCAG 2.2 richiedono alternative testuali per i contenuti non testuali quando trasmettono informazioni o hanno una funzione. Le immagini puramente decorative vengono trattate diversamente e possono essere ignorate dalle tecnologie assistive.
Qui si commette un errore molto comune. Un team verifica se l' alt attributo è presente e considera il problema risolto.
Anche la qualità del testo è altrettanto importante.
Se l'immagine mostra un prodotto, la descrizione dovrebbe fornire informazioni pertinenti a quel prodotto. Se l'immagine è un grafico, limitarsi a scrivere "grafico" non aiuta l'utente a comprendere i dati presentati.
Come effettuare il controllo
Inizia dalle pagine che contengono molte immagini. La home page, le pagine dei prodotti, gli articoli del blog e le landing page sono ottimi punti di partenza.
Il Wawsome Accessibility Checker può identificare automaticamente problemi rilevabili, come testi alternativi mancanti o inadeguati.
Per le immagini che hanno già un alt testo, è comunque necessaria una revisione umana.
Contrasto insufficiente
Un testo grigio chiaro su sfondo bianco può sembrare elegante in un design, ma per chi ha problemi di vista può risultare difficile da leggere.
Il problema si presenta spesso in testi secondari, segnaposto, pulsanti, menu ed elementi in stato disabilitato o inattivo.
Le linee guida WCAG includono criteri specifici per il contrasto del testo e per determinati elementi grafici e componenti dell'interfaccia utente.
Il contrasto deve essere verificato nel prodotto finale. Un file di design può utilizzare i colori corretti, ma l'implementazione finale potrebbe presentare valori differenti.
Come effettuare il controllo
Testa i colori per:
- Testo primario e secondario
- Link e pulsanti
- Messaggi di errore e notifiche
- Controlli e componenti interattivi
- Stati di hover e focus
- Grafici o informazioni veicolate tramite il colore
Non limitare i test alla sola homepage. Il checkout e i moduli sono spesso i punti in cui uno scarso contrasto diventa molto più penalizzante per l'utente.
Moduli privi di etichette e istruzioni chiare
I moduli sono presenti quasi ovunque.
La creazione di account, le richieste di preventivo, il pagamento delle bollette, la prenotazione di appuntamenti e i processi di checkout utilizzano tutti campi in cui gli utenti devono inserire informazioni.
Le WCAG richiedono etichette o istruzioni quando è richiesto l'input dell'utente. L'obiettivo è garantire che gli utenti comprendano quali informazioni devono fornire.
Un segnaposto (placeholder) non dovrebbe essere considerato automaticamente un sostituto di un'etichetta implementata correttamente.
Poi ci sono i messaggi di errore.
"Input non valido" non è molto utile.
Gli utenti devono capire cosa è andato storto e cosa devono correggere. In un modulo lungo, identificare chiaramente il campo problematico è ancora più importante.
Come verificare
Scegli un percorso utente completo e seguilo dall'inizio alla fine.
Potrebbe trattarsi di:
- Modulo di contatto
- Creazione dell'account
- Checkout
- Prenotazione di appuntamenti online
- Richiesta di preventivo
- Accesso
- Ripristino della password
- Pagamento bollette
Verifica che ogni campo abbia un'etichetta chiara e che i messaggi di errore siano comprensibili senza fare affidamento esclusivamente sul colore.
Per i moduli importanti, i test con tastiera e screen reader possono fornire informazioni che uno scanner non è in grado di rilevare completamente.
Navigazione che non funziona con la tastiera
Prova un test semplice.
Metti da parte il mouse e premi Tab.
Riesci a raggiungere il menu? Riesci ad aprire i sottomenu? Riesci a selezionare un prodotto? Riesci a compilare il modulo? Riesci a inviarlo?
Le WCAG includono requisiti per l'accessibilità da tastiera e per evitare situazioni in cui il focus rimane bloccato all'interno di un componente.
Il problema si presenta spesso nei componenti personalizzati.
Menu a tendina, finestre modali, caroselli, selettori di data e menu basati su JavaScript possono funzionare perfettamente con il mouse, ma comportarsi in modo inadeguato con la tastiera.
Come verificare
Usa il tasto Tab per avanzare e Shift + Tab per tornare indietro.
Segui l'indicatore visivo del focus. Dovresti sempre essere in grado di vedere dove ti trovi nella pagina.
Testa i componenti interattivi usando Invio, Spazio e i tasti freccia laddove il comportamento del componente lo richieda.
Esegui il test sui flussi più importanti per l'attività. Accesso, checkout, prenotazione di appuntamenti e moduli importanti dovrebbero essere controllati per primi.
Pulsanti e link privi di nomi accessibili
L'icona della lente d'ingrandimento è visivamente facile da riconoscere come "Cerca".
Per le tecnologie assistive, l'icona necessita delle informazioni programmatiche indispensabili affinché la sua funzione possa essere comunicata all'utente.
Le WCAG definiscono nome, ruolo e valore dei componenti dell'interfaccia utente. Un controllo privo di un nome accessibile può risultare molto difficile da utilizzare con le tecnologie assistive.
Il problema si presenta comunemente con:
- Pulsanti composti solo da icone
- Menu per dispositivi mobili
- Pulsanti di chiusura
- Controlli video
- Elementi di caroselli
- Pulsanti di condivisione sui social
- Componenti personalizzati
- Link con testo vago come "clicca qui"
Un nome accessibile dovrebbe comunicare lo scopo dell'elemento.
Come verificare
Puoi iniziare con il Wawsome Accessibility Checker per i problemi rilevabili automaticamente.
Per i componenti importanti, utilizza anche lo strumento di ispezione dell'accessibilità del tuo browser o testa la pagina con uno screen reader.
Se l'utente sente "pulsante" senza capire cosa faccia il pulsante stesso, l'implementazione va rivista.
Struttura delle intestazioni errata
A volte le intestazioni vengono utilizzate puramente per scopi estetici.
Un testo diventa un H2 perché la dimensione sembra quella giusta. Un altro diventa un H4 perché si adatta al layout. Con il tempo, la struttura semantica va perduta.
Per gli utenti che utilizzano screen reader, le intestazioni possono essere un modo efficace per navigare all'interno di una pagina.
Una pagina lunga contenente articoli, termini legali, servizi o prodotti diventa molto più facile da navigare quando la struttura delle intestazioni è logica.
Come verificare
Controlla la struttura della pagina.
L'intestazione principale deve indicare chiaramente l'argomento. Le sezioni importanti devono essere organizzate in una gerarchia logica.
Non scegliere il livello di un'intestazione in base alla dimensione visiva desiderata. L'aspetto grafico può essere gestito tramite CSS. La semantica deve descrivere la struttura del contenuto.
Documenti e file scaricabili
Un sito web può avere pagine ben strutturate e fornire comunque un PDF inaccessibile proprio quando l'utente raggiunge le informazioni di cui ha bisogno.
Questo è comune nel settore pubblico, bancario, assicurativo, nell'istruzione e nella sanità.
I documenti possono contenere:
- Immagini scansionate prive di testo
- Struttura errata
- Moduli PDF difficili da compilare
- Grafici privi di alternative
- Ordine di lettura errato
- Link descritti in modo inadeguato
- Tabelle difficili da interpretare
Se un documento fa parte del servizio offerto all'utente, la sua accessibilità deve essere valutata.
Contenuti video senza sottotitoli
Il video è sempre più utilizzato per presentazioni di prodotti, tutorial, contenuti didattici e comunicazione sui social media.
Se le informazioni vengono comunicate tramite parlato, gli utenti che non possono ascoltare il contenuto necessitano di un'alternativa adeguata.
I sottotitoli devono riflettere accuratamente le informazioni parlate. La trascrizione automatica può aiutare nella produzione, ma il risultato deve essere revisionato prima della pubblicazione.
Se un video contiene informazioni importanti esclusivamente tramite contenuti visivi, potrebbe essere necessaria anche una descrizione appropriata delle informazioni visive.
Perché uno scanner non trova tutto?
La scansione automatizzata è estremamente utile. Per i siti web di grandi dimensioni, può far risparmiare molto tempo e far emergere problemi ricorrenti.
Il Wawsome Accessibility Checker può identificare molti problemi WCAG rilevabili automaticamente, tra cui testo alternativo mancante, errori di contrasto, etichette dei moduli mancanti, strutture di intestazione errate e alcuni problemi relativi alla tastiera o agli elementi interattivi.
Uno strumento può rilevare che un alt attributo esiste.
Non può determinare con certezza se quel testo spieghi effettivamente l'immagine nel contesto della pagina.
Può rilevare alcuni problemi strutturali.
Non può riprodurre appieno l'esperienza di un utente che cerca di completare un processo complesso con uno screen reader.
Ecco perché una valutazione utile dell'accessibilità combina diversi tipi di analisi.
Inizia dai flussi più importanti
Se il tuo sito web ha 5.000 pagine, controllare manualmente ogni elemento può diventare rapidamente difficile da gestire.
Inizia dai percorsi utente essenziali.
Per un eCommerce, controlla la pagina prodotto, il carrello e il checkout.
Per il settore bancario, verifica l'accesso, le transazioni e i principali servizi utilizzati dai clienti.
Per il settore sanitario, esamina la prenotazione degli appuntamenti, i moduli, l'account del paziente e l'accesso alle informazioni.
Per il settore pubblico, controlla l'invio di documenti, i moduli, i pagamenti e l'accesso alle informazioni necessarie ai cittadini.
Successivamente, estendi la valutazione al resto del sito web.
L'impatto sugli utenti dovrebbe influenzare l'ordine in cui vengono risolti i problemi.
In che modo il monitoraggio può essere d'aiuto?
Supponiamo che tu abbia completato una valutazione e che il team abbia risolto i problemi prioritari.
Due settimane dopo, viene pubblicata una nuova landing page. Il marketing carica nuove immagini. Lo sviluppo modifica il modulo principale. Vengono aggiunti altri 50 prodotti.
Il sito web è cambiato.
Il Wawsome Accessibility Monitor può monitorare costantemente il tuo sito web ed eseguire nuovamente la scansione delle pagine quando vengono rilevati aggiornamenti, aiutando a identificare i problemi rilevabili introdotti da nuovi contenuti o componenti.
Per un sito web aggiornato frequentemente, i controlli di accessibilità dovrebbero diventare parte del normale processo di gestione del sito.
Cosa fai con i problemi che riscontri?
Un report lungo può dare l'impressione che ogni problema debba essere risolto nello stesso ordine.
In pratica, dare delle priorità aiuta.
A volte dimentichiamo di porci una domanda semplice: cosa impedisce all'utente di completare la sua attività?
Un problema nella procedura di pagamento merita attenzione immediata se impedisce a un cliente di completare un ordine.
Un pulsante non accessibile in un flusso di prenotazione può impedire a un paziente di fissare un appuntamento.
Un problema di autenticazione può rendere un intero account inutilizzabile per un determinato utente.
Dopo aver valutato l'impatto, puoi esaminare la frequenza con cui si verifica il problema e quante pagine ne sono interessate.
È qui che il report inizia a diventare utile per il team di sviluppo. Le problematiche si trasformano in attività concrete da includere negli sprint di risoluzione.
Come può aiutarti Wawsome
Se non hai ancora valutato il tuo sito web, una scansione iniziale è un primo passo pratico.
Il Wawsome Accessibility Checker può identificare i problemi rilevabili automaticamente e fornire un quadro iniziale delle aree che richiedono attenzione.
Dopo la scansione, i risultati possono essere integrati con controlli manuali per i criteri che richiedono una valutazione umana.
I siti web che cambiano frequentemente possono utilizzare il Wawsome Accessibility Monitor per monitorare i problemi introdotti in un secondo momento.
Per le funzionalità fornite direttamente agli utenti, puoi anche esplorare il Wawsome Accessibility Widget.
Puoi anche esplorare la gamma completa delle funzionalità di accessibilità di Wawsome.
FAQ
Come posso verificare se il mio sito web presenta problemi di accessibilità?
Puoi iniziare con uno scanner automatico per i problemi rilevabili a livello programmatico. Prosegui con test manuali dei flussi utente principali e, dove necessario, con test tramite tastiera o tecnologie assistive.
Un punteggio può dirmi se il mio sito web è accessibile?
Un punteggio fornisce una panoramica dei criteri valutati dallo strumento. Gli strumenti automatici non possono determinare autonomamente l'accessibilità completa di un sito web.
Quali problemi di accessibilità posso identificare da solo senza competenze tecniche?
Puoi eseguire alcuni controlli semplici. Prova a navigare con la tastiera, ingrandisci la pagina, verifica che i moduli abbiano etichette chiare e controlla il contrasto del testo. Per i criteri tecnici, avrai bisogno di strumenti adeguati e di persone che conoscano le WCAG.
Perché devo ricontrollare il mio sito web dopo aver apportato le correzioni?
I siti web cambiano. Una nuova landing page, un modulo o un componente possono introdurre nuove barriere. Il monitoraggio e i nuovi test sono utili dopo ogni modifica rilevante.
Come dovrei dare priorità ai problemi riscontrati?
Inizia dalle barriere che impediscono agli utenti di completare azioni importanti. Il checkout, l'autenticazione, gli appuntamenti, i moduli e i pagamenti possono avere un impatto diretto sugli utenti. Successivamente, puoi organizzare i problemi rimanenti in base alla gravità e alla loro diffusione all'interno del sito web.
Un ottimo punto di partenza
L'accessibilità diventa molto più semplice da gestire quando puoi vedere i problemi concreti che interessano il tuo sito web.
Scansiona le pagine importanti, verifica i flussi che gli utenti devono essere in grado di completare e determina quali barriere dovrebbero essere risolte per prime.
Uno scanner aiuta a identificare i problemi rilevabili automaticamente. I test manuali completano il quadro laddove sono necessari contesto e valutazione umana.
A quel punto, avrai già qualcosa di utile per il team: problemi reali, pagine interessate e un chiaro punto di partenza per la risoluzione.