Nozioni di base sui test manuali
I test di accessibilità manuali utilizzano test basati su tastiera, visivi e cognitivi, strumenti e tecniche per individuare problemi incapaci con gli strumenti automatizzati. Come automazione non coprono tutti i criteri di successo identificati nelle WCAG, è fondamentale non eseguire test automatici di accessibilità e poi interrompere i test.
Con i progressi della tecnologia, un numero maggiore di test potrebbe essere gestito solo con strumenti automatizzati, ma oggi è necessario aggiungere ai protocolli di test sia i controlli manuali che quelli delle tecnologie per la disabilità per coprire tutti i checkpoint delle WCAG applicabili.
Vantaggi dei test di accessibilità manuali:
- Esecuzione ragionevolmente semplice e veloce
- Individuare una percentuale più alta di problemi rispetto ai soli test automatici
- Pochi strumenti e competenze necessarie per il successo
Svantaggi dei test di accessibilità manuali:
- Più complesso e richiede più tempo rispetto ai test automatici
- Può essere difficile da ripetere su larga scala
- Sono necessarie maggiori competenze di accessibilità per eseguire test e interpretare i risultati
Confrontiamo quali elementi di accessibilità e dettagli attualmente possono essere rilevati da uno strumento automatico, rispetto a quelli che non verranno rilevati.
Tipi di test manuali
Ci sono molti strumenti e tecniche manuali da considerare quando si esamina pagina web o app per l'accessibilità digitale. Le tre principali aree di interesse i test manuali riguardano funzionalità della tastiera, revisioni visive e controlli generali dei contenuti.
Tratteremo ciascuno di questi argomenti in modo generale in questo modulo, ma i seguenti test non intendono essere un elenco esaustivo di tutti i test manuali che puoi o che dovresti eseguire. Ti invitiamo a iniziare con un elenco di controllo per l'accessibilità manuale da una fonte attendibile e sviluppa un elenco di controllo specifico per il test manuale per le esigenze specifiche del tuo prodotto digitale e del tuo team.
Controlli della tastiera
Si stima che circa il 25% di tutti i problemi di accessibilità digitale sia correlato alla mancanza del supporto della tastiera. Come abbiamo appreso nel modulo Messa a fuoco della tastiera, il problema riguarda tutti i tipi di utenti, inclusi gli utenti che usano solo la tastiera, gli utenti ipovedenti o ciechi con screen reader e le persone che utilizzano software di riconoscimento vocale che sfrutta una tecnologia basata sul fatto che anche i contenuti sono accessibili dalla tastiera.
I test della tastiera rispondono a domande come:
- Per funzionare, la pagina web o la funzionalità richiede un mouse?
- L'ordine di tabulazione è logico e intuitivo?
- L'indicatore dello stato attivo della tastiera è sempre visibile?
- Riesci a rimanere bloccati in un elemento che non deve bloccare lo stato attivo?
- Riesci a muoverti dietro o intorno a un elemento che dovrebbe impostare lo stato attivo?
- Quando si chiude un elemento che ha ricevuto lo stato attivo, l'indicatore dello stato attivo è tornato in una posizione logica?
L'impatto della funzionalità della tastiera è enorme, ma la procedura di test è piuttosto semplice. È sufficiente mettere il mouse o installare un piccolo pacchetto JavaScript e testare il sito web utilizzando solo la tastiera. I seguenti comandi sono essenziali per il test della tastiera.
Controlli visivi
I controlli visivi si concentrano sugli elementi visivi della pagina e utilizzano strumenti come l'ingrandimento dello schermo o lo zoom del browser per esaminare il sito web o l'app per verificarne l'accessibilità.
I controlli visivi possono indicare:
- Esistono problemi di contrasto di colore che uno strumento automatico non è riuscito a rilevare, ad esempio il testo sopra una sfumatura o un'immagine?
- Esistono elementi che hanno l'aspetto di intestazioni, elenchi e altri elementi strutturali, ma che non sono codificati come tali?
- I link di navigazione e gli input dei moduli sono coerenti in tutto il sito web o nell'app?
- Sono presenti animazioni lampeggianti, stroboscopiche o superiori rispetto a quanto consigliato?
- I contenuti presentano una spaziatura adeguata? Per lettere, parole, righe e paragrafi?
- Riesci a vedere tutti i contenuti utilizzando una lente d'ingrandimento o lo zoom del browser?
Controlli dei contenuti
A differenza dei test visivi che si concentrano su layout, movimento e colori, i controlli dei contenuti si concentrano sulle parole presenti nella pagina. Non solo dovresti esaminare il testo stesso, ma dovresti anche rivedere il contesto per assicurarti che abbia senso per gli altri.
Le verifiche dei contenuti rispondono a domande quali:
- Titoli di pagina, intestazioni ed etichette dei moduli sono chiari e descrittivi?
- Le alternative alle immagini sono concise, accurate e utili?
- Il colore viene usato da solo come unico modo per trasmettere significato o informazioni?
- I link sono descrittivi o utilizzi testo generico, ad esempio "scopri di più" o "fai clic qui?"
- Sono state apportate modifiche alla lingua di una pagina?
- Viene utilizzato un linguaggio normale e tutti gli acronimi sono già scritti quando viene fatto riferimento per la prima volta?
Alcuni controlli dei contenuti, in parte, possono essere automatizzati. Ad esempio, potresti scrivere un linter JavaScript che verifichi "Fai clic qui" e ti suggerisce di apportare una modifica. Tuttavia, queste soluzioni personalizzate spesso hanno comunque bisogno di un essere umano per modificare il testo in qualcosa di contestuale.
Demo: test manuale
Finora, abbiamo eseguito test automatici sulla nostra pagina web dimostrativa e abbiamo individuato e risolto otto diversi tipi di problemi. Ora siamo pronti a eseguire controlli manuali per vedere se riusciamo a rilevare altri problemi di accessibilità.
Passaggio 1
La nostra demo di CodePen aggiornata ha tutto degli aggiornamenti automatici dell'accessibilità applicati.
Visualizzala in modalità di debug per procedere con
i prossimi test. Questo è importante, poiché rimuove il parametro <iframe> che circonda il componente
una pagina web demo, che potrebbe interferire con alcuni strumenti di test. Scopri di più su
Modalità di debug di CodePen.
Passaggio 2
Avvia il processo di test manuale mettendo da parte il mouse o il trackpad e spostati su e giù nel DOM utilizzando solo la tastiera.
Problema 1: indicatore visibile del focus
Il primo problema con la tastiera dovrebbe essere visualizzato immediatamente (o meglio non dovrebbe essere visibile) perché l'indicatore dello stato attivo visibile è stato rimosso. Quando scansioni il CSS nella demo, dovresti vedere il temuto "outline: none" aggiunto al codebase.
:focus {
outline: none;
}
Risolviamo il problema.
Come hai appreso nel modulo Stato attivo sulla tastiera, devi rimuovere questa riga di codice per consentire ai browser web di aggiungere un focus visibile per gli utenti. Puoi fare un ulteriore passo e creare un indicatore di messa a fuoco in stile che rispecchi l'estetica del tuo prodotto digitale.
:focus {
outline: 3px dotted #008576;
}
Problema 2: imposta lo stato attivo sull'ordine
Quando hai modificato l'indicatore di stato attivo e diventa visibile, assicurati di usare il tasto Tab attraverso la pagina. Dovresti notare che il campo di immissione del modulo utilizzato per iscriversi alla newsletter non riceve attenzione. È stato rimosso dall'ordine di priorità naturale in base a un tabindex negativo.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>
Poiché vorremmo che gli utenti utilizzassero questo campo per iscriversi alla nostra newsletter, è sufficiente rimuovere il tabindex negativo o impostarlo su zero per consentire all'input di riattivare lo stato attivo della tastiera.
<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>
Passaggio 3
Una volta selezionato lo stato attivo della tastiera, passiamo ai controlli visivi e dei contenuti.
Problema 3: contrasto di colore dei link
Man mano che eseguivi i test della tastiera usando il tasto Tab verso l'alto e verso il basso nella pagina demo, avrai notato che la tastiera si concentrava su tre link visivamente nascosti nella paragrafi sulle diverse patologie.
Affinché la nostra pagina sia accessibile, i link devono distinguersi dal testo circostante e includere una modifica di stile non di colore al passaggio del mouse e allo stato attivo della tastiera.
Risolviamo il problema.
Una soluzione rapida è aggiungere una sottolineatura ai link all'interno dei paragrafi per metterli in risalto. Questo potrebbe risolvere il problema di accessibilità, ma potrebbe non essere adatto all'estetica generale che speri di raggiungere.
Se scegli di non aggiungere una sottolineatura, dovrai modificare i colori in modo da soddisfare i requisiti sia per lo sfondo che per il testo.
Quando esamini la demo utilizzando uno strumento di controllo del contrasto dei link, noterai che il colore del link soddisfa il requisito di contrasto di 4,5:1 tra il testo di dimensioni normali e lo sfondo. Tuttavia, i link non sottolineati devono anche soddisfare un requisito di contrasto di colore 3:1 rispetto al testo circostante.
Un'opzione è cambiare il colore del link in modo che corrisponda agli altri elementi della pagina. Tuttavia, se cambi il colore del link in verde, anche il corpo del testo deve essere modificato per soddisfare i requisiti generali di contrasto di colore tra tutti e tre gli elementi: link, sfondo e testo circostante.
Problema 4: contrasto di colore delle icone
Un altro problema di contrasto di colore mancante sono le icone dei social media. Nel modulo Colore e contrasto, hai appreso che le icone essenziali devono presentare un contrasto di colore 3:1 rispetto allo sfondo. Tuttavia, nella demo, le icone dei social media hanno un rapporto di contrasto di 1,3:1.
Risolviamo il problema.
Per soddisfare i requisiti di contrasto di 3:1, le icone dei social media diventano di colore grigio più scuro.
Problema 5: layout dei contenuti
Se osservi il layout dei contenuti del paragrafo, il testo è completamente giustificato. Come hai appreso Modulo Tipografia, questo crea "fiumi di spazio", il che potrebbe complicare il testo per alcuni che gli utenti possano leggere.
p.bullet {
text-align: justify;
}
Per reimpostare l'allineamento del testo nella demo, puoi aggiornare il codice in
text-align: left; o rimuovere completamente la riga dal CSS, dato che a sinistra è il
allineamento predefinito per i browser. Assicurati di testare il codice, nel caso in cui
Gli stili ereditati eliminano l'allineamento predefinito del testo.
p.bullet {
text-align: left;
}
Passaggio 4
Una volta identificati e risolti tutti i problemi di accessibilità manuale descritti nei passaggi precedenti, la pagina dovrebbe essere simile al nostro screenshot.
Potresti trovare più problemi di accessibilità nei controlli manuali rispetto a quelli trattati in questo modulo. Scopriremo molti di questi problemi nel prossimo modulo.
Passaggio successivo
Complimenti! Hai completato i moduli di test automatici e manuali. Puoi visualizzare il nostro CodePen aggiornato, a cui sono state applicate tutte le correzioni di accessibilità automatiche e manuali.
Passiamo all'ultimo modulo di test incentrato test tecnologici assistivi.
Verifica le tue conoscenze
Verifica le tue conoscenze dei test di accessibilità manuali
Quali elementi devono soddisfare gli standard di contrasto di colore WCAG?