Test dell'accessibilità manuale

Nozioni di base sui test manuali

I test di accessibilità manuali utilizzano test, strumenti e tecniche visivi, cognitivi e da tastiera per trovare problemi che gli strumenti automatici non riescono a rilevare. Poiché gli strumenti automatici non coprono tutti i criteri di successo identificati nelle WCAG, è fondamentale eseguire test di accessibilità automatici e continuare a eseguire test.

Con l'avanzare della tecnologia, un numero maggiore di test potrebbe essere coperto solo da strumenti automatici, ma oggi è necessario aggiungere ai protocolli di test sia i controlli manuali sia quelli delle tecnologie per la disabilità per coprire tutti i checkpoint WCAG applicabili.

Vantaggi dei test di accessibilità manuali:

• Relativamente semplici e veloci da eseguire
• Rilevano una percentuale maggiore di problemi rispetto ai soli test automatici
• Richiedono pochi strumenti e competenze per avere successo

Svantaggi dei test di accessibilità manuali:

• Più complessi e dispendiosi in termini di tempo rispetto ai test automatici
• Potrebbe essere difficile ripeterli su larga scala
• Richiedono maggiori competenze in materia di accessibilità per eseguire i test e interpretare i risultati

Confronta gli elementi e i dettagli di accessibilità che possono essere rilevati da uno strumento automatico con quelli che non verranno rilevati.

Tipi di test manuali

Esistono molti strumenti e tecniche manuali da prendere in considerazione quando esamini la pagina web o l'app per l'accessibilità digitale. Le tre aree di interesse principali nei test manuali sono la funzionalità della tastiera, le revisioni incentrate sull'aspetto visivo e i controlli generali dei contenuti.

In questo modulo trattiamo ciascuno di questi argomenti a un livello elevato, ma i seguenti test non sono intesi come un elenco esaustivo di tutti i test manuali che puoi o devi eseguire. Ti invitiamo a iniziare con una checklist di accessibilità manuale da una fonte affidabile e a sviluppare la tua checklist di test manuali mirata 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 di supporto della tastiera. Come abbiamo appreso nel modulo sullo stato attivo della tastiera, questo influisce su tutti i tipi di utenti, inclusi gli utenti vedenti che utilizzano solo la tastiera, gli utenti di screen reader ipovedenti/ciechi e le persone che utilizzano software di riconoscimento vocale che si basano su una tecnologia che dipende anche dall'accessibilità dei contenuti tramite tastiera.

I test della tastiera rispondono a domande come:

• La pagina web o la funzionalità richiede un mouse per funzionare?
• L'ordine di tabulazione è logico e intuitivo?
• L'indicatore dello stato attivo della tastiera è sempre visibile?
• Puoi rimanere bloccato in un elemento che non dovrebbe bloccare lo stato attivo?
• Puoi navigare dietro o intorno a un elemento che dovrebbe bloccare lo stato attivo?
• Quando chiudi un elemento che ha ricevuto lo stato attivo, l'indicatore dello stato attivo è tornato in una posizione logica?

Sebbene l'impatto della funzionalità della tastiera sia enorme, la procedura di test è piuttosto semplice. Non devi fare altro che mettere da parte il mouse o installare un piccolo pacchetto JavaScript e testare il tuo sito web utilizzando solo la tastiera. I seguenti comandi sono essenziali per i 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 l'accessibilità del sito web o dell'app.

I controlli visivi possono indicare:

• Esistono problemi di contrasto di colore che uno strumento automatico non è riuscito a rilevare, ad esempio testo sopra un gradiente o un'immagine?
• Esistono elementi che sembrano intestazioni, elenchi e altri elementi strutturali, ma non sono codificati come tali?
• I link di navigazione e gli input dei moduli sono coerenti in tutto il sito web o l'app?
• Esistono lampeggi, effetti stroboscopici o animazioni che superano le raccomandazioni?
• I contenuti hanno una spaziatura corretta? Per lettere, parole, righe e paragrafi?
• Riesci a vedere tutti i contenuti utilizzando una lente di ingrandimento dello schermo 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 nella pagina. Non devi solo esaminare il testo, ma anche il contesto per assicurarti che sia comprensibile per gli altri.

I controlli dei contenuti rispondono a domande come:

• I titoli delle pagine, le intestazioni e le etichette dei moduli sono chiari e descrittivi?
• Le alternative delle immagini sono concise, accurate e utili?
• Il colore viene utilizzato da solo come unico modo per trasmettere significato o informazioni?
• I link sono descrittivi o utilizzi testo generico come "Scopri di più" o "Fai clic qui"?
• Esistono modifiche alla lingua all'interno di una pagina?
• Viene utilizzato un linguaggio semplice e tutti gli acronimi sono scritti per esteso al primo riferimento?

Alcuni controlli dei contenuti possono essere automatizzati, in parte. Ad esempio, potresti scrivere un linter JavaScript che controlla la presenza di "Fai clic qui" e ti suggerisce di apportare una modifica. Tuttavia, queste soluzioni personalizzate spesso richiedono comunque l'intervento di una persona per modificare il testo in modo che sia contestuale.

Demo: test manuale

Finora abbiamo eseguito test automatici sulla nostra pagina web demo e abbiamo trovato e corretto otto tipi di problemi diversi. Ora siamo pronti a eseguire controlli manuali per vedere se riusciamo a scoprire altri problemi di accessibilità.

Passaggio 1

La nostra demo CodePen aggiornata include tutti gli aggiornamenti di accessibilità automatica.

Visualizzala in modalità di debug per procedere con i test successivi. Questo passaggio è importante perché rimuove il <iframe> che circonda la pagina web demo, che potrebbe interferire con alcuni strumenti di test. Scopri di più sulla modalità di debug di CodePen.

Passaggio 2

Inizia la procedura di test manuali mettendo da parte il mouse o il trackpad e navigando su e giù nel DOM utilizzando solo la tastiera.

Problema 1: indicatore dello stato attivo visibile

Dovresti vedere subito il primo problema della tastiera, o meglio non dovresti vederlo, perché l'indicatore dello stato attivo visibile è stato rimosso. Quando esamini il CSS nella demo, dovresti trovare il temuto "outline: none" aggiunto al codebase.

  :focus {
    outline: none;
  }

Risolviamo il problema.

Come hai appreso nel modulo sullo stato attivo della tastiera, devi rimuovere questa riga di codice per consentire ai browser web di aggiungere uno stato attivo visibile per gli utenti. Puoi fare un passo in più e creare un indicatore dello stato attivo con uno stile che soddisfi l'estetica del tuo prodotto digitale.

:focus {
  outline: 3px dotted #008576;
}

Problema 2: ordine dello stato attivo

Dopo aver modificato l'indicatore dello stato attivo e averlo reso visibile, assicurati di scorrere la pagina con il tasto Tab. In questo modo, dovresti notare che il campo di immissione del modulo utilizzato per iscriversi alla newsletter non riceve lo stato attivo. È stato rimosso dall'ordine dello stato attivo naturale da un tabindex negativo.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" tabindex="-1" required>

Risolviamo il problema.

Poiché vogliamo che le persone utilizzino questo campo per iscriversi alla nostra newsletter, non dobbiamo fare altro che rimuovere il tabindex negativo o impostarlo su zero per consentire all'input di diventare di nuovo attivabile tramite tastiera.

<input type="email" placeholder="Enter your e-mail address" aria-hidden="true" required>

Passaggio 3

Dopo aver controllato lo stato attivo della tastiera, passiamo ai controlli visivi e dei contenuti.

Problema 3: contrasto di colore dei link

Durante i test della tastiera scorrendo la pagina demo con il tasto Tab, probabilmente hai notato che la tastiera si è concentrata su tre link nascosti visivamente nei paragrafi sulle diverse patologie.

Affinché la nostra pagina sia accessibile, i link devono distinguersi dal testo circostante e includere una modifica dello 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 farli risaltare. In questo modo si risolverebbe il problema di accessibilità, ma potrebbe non essere adatto all'estetica generale del design che vuoi ottenere.

Se scegli di non aggiungere una sottolineatura, dovrai modificare i colori in modo da soddisfare i requisiti sia per lo sfondo sia per il testo.

Quando esamini la demo utilizzando uno strumento di controllo del contrasto dei link, vedrai che il colore dei link soddisfa il requisito di contrasto di colore di 4,5:1 tra il testo di dimensioni normali e lo sfondo. Tuttavia, i link non sottolineati devono soddisfare anche un requisito di contrasto di colore di 3:1 rispetto al testo circostante.

Un'opzione è modificare il colore dei link in modo che corrisponda agli altri elementi della pagina. Tuttavia, se modifichi il colore dei link in verde, devi modificare anche il corpo del testo 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 su colore e contrasto, hai appreso che le icone essenziali devono soddisfare un contrasto di colore di 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 colore di 3:1, le icone dei social media vengono modificate in un grigio più scuro.

Problema 5: layout dei contenuti

Se esamini il layout dei contenuti del paragrafo, il testo è giustificato. Come hai appreso nel modulo Tipografia, in questo modo si creano "fiumi di spazio", che potrebbero rendere difficile la lettura del testo per alcuni utenti.

p.bullet {
   text-align: justify;
}

Risolviamo il problema.

Per reimpostare l'allineamento del testo nella demo, puoi aggiornare il codice a text-align: left; o rimuovere completamente la riga dal CSS, poiché l'allineamento a sinistra è quello predefinito per i browser. Assicurati di testare il codice, nel caso in cui altri stili ereditati rimuovano l'allineamento del testo predefinito.

p.bullet {
   text-align: left;
}

Passaggio 4

Dopo aver identificato e corretto tutti i problemi di accessibilità manuale descritti nei passaggi precedenti, la pagina dovrebbe essere simile alla nostra schermata.

È possibile che tu possa 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 sui test automatici e manuali. Puoi visualizzare il nostro CodePen aggiornato, a cui sono state applicate tutte le correzioni di accessibilità automatiche e manuali.

Ora passa all'ultimo modulo di test incentrato sui test delle tecnologie per la disabilità.