Test dell'accessibilità manuale

Nozioni di base sui test manuali

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

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

Vantaggi dei test di accessibilità manuali:

• Abbastanza semplice e veloce da eseguire
• Rilevare una percentuale maggiore di problemi rispetto ai soli test automatici
• Pochi strumenti e competenze necessari per avere successo

Svantaggi dei test di accessibilità manuali:

• Più complessi e dispendiosi in termini di tempo rispetto ai test automatici
• Potrebbe essere difficile da ripetere 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 tua pagina web o la tua app per l'accessibilità digitale. Le tre aree di interesse principali nei test manuali sono la funzionalità della tastiera, le revisioni incentrate sulla visualizzazione e i controlli generali dei contenuti.

In questo modulo trattiamo ciascuno di questi argomenti a un livello generale, ma i test seguenti non intendono essere un elenco esaustivo di tutti i test manuali che puoi o devi eseguire. Ti consigliamo di iniziare con un elenco di controllo manuale dell'accessibilità di una fonte affidabile e di sviluppare il tuo elenco di controllo dei test manuali mirati 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 a una mancanza di supporto della tastiera. Come abbiamo appreso nel modulo selezione della tastiera, questo influisce su tutti i tipi di utenti, inclusi gli utenti vedenti che utilizzano solo la tastiera, gli utenti ipovedenti/non vedenti che utilizzano screen reader e le persone che utilizzano software di riconoscimento vocale che si basano su tecnologie che dipendono anche dall'accessibilità dei contenuti tramite tastiera.

I test della tastiera rispondono a domande come:

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

Sebbene l'impatto della funzionalità della tastiera sia enorme, la procedura di test è piuttosto semplice. Tutto ciò che devi fare è 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 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 l'accessibilità del sito web o dell'app.

I controlli visivi possono indicarti:

• Esistono problemi di contrasto di colore che uno strumento automatico non è riuscito a rilevare, ad esempio testo sopra una sfumatura o un'immagine?
• Sono presenti 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?
• Sono presenti lampeggi, effetti stroboscopici o animazioni che superano le raccomandazioni?
• I contenuti hanno una spaziatura adeguata? 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 presenti nella pagina. Non devi solo esaminare il testo in sé, ma anche il contesto per assicurarti che abbia senso per gli altri.

I controlli dei contenuti rispondono a domande come:

• I titoli, le intestazioni e le etichette dei moduli delle pagine sono chiari e descrittivi?
• Le alternative alle 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 un testo generico come "Scopri di più" o "Fai clic qui"?
• Sono state apportate modifiche alla lingua all'interno di una pagina?
• È stato utilizzato un linguaggio semplice e tutti gli acronimi sono stati 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 ancora l'intervento umano 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 risolto otto diversi tipi di problemi. Ora siamo pronti per eseguire controlli manuali per vedere se possiamo scoprire altri problemi di accessibilità.

Passaggio 1

La nostra demo di CodePen aggiornata include tutti gli aggiornamenti automatici dell'accessibilità.

Visualizzalo in modalità di debug per procedere con i test successivi. Questo è 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 manuale mettendo da parte il mouse o il trackpad e spostandoti su e giù nel DOM utilizzando solo la tastiera.

Problema 1: indicatore di stato attivo visibile

Dovresti notare subito il primo problema della tastiera, o meglio, non dovresti notarlo, perché l'indicatore di messa a fuoco visibile è stato rimosso. Quando scansioni il CSS nella demo, dovresti trovare il temuto "outline: none" aggiunto al codice sorgente.

  :focus {
    outline: none;
  }

Risolviamo il problema.

Come hai appreso nel modulo Focus della 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 avanti e creare un indicatore dello stato attivo con uno stile che si adatti all'estetica del tuo prodotto digitale.

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

Problema 2: ordine di messa a fuoco

Dopo aver modificato l'indicatore di messa a fuoco e averlo reso visibile, assicurati di spostarti tra gli elementi della pagina con il tasto Tab. In questo modo, noterai che il campo di immissione del modulo utilizzato per l'iscrizione alla newsletter non riceve la selezione. È stato rimosso dall'ordine di messa a fuoco naturale da un tabindex negativo.

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

Risolviamo il problema.

Poiché vorremmo che gli utenti utilizzassero questo campo per iscriversi alla nostra newsletter, tutto ciò che dobbiamo fare è rimuovere il tabindex negativo o impostarlo su zero per consentire di nuovo la selezione dell'input tramite tastiera.

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

Passaggio 3

Una volta controllato lo stato attivo della tastiera, passiamo ai controlli visivi e dei contenuti.

Problema 3: contrasto cromatico dei link

Mentre eseguivi i test della tastiera spostandoti su e giù nella pagina demo, probabilmente avrai notato che la tastiera si concentra su tre link nascosti visivamente nei paragrafi sulle diverse condizioni mediche.

Per rendere accessibile la nostra pagina, i link devono distinguersi dal testo circostante e includere una modifica dello stile non a colori 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, il problema di accessibilità verrebbe risolto, ma potrebbe non essere in linea con l'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 che per il testo.

Se esamini la demo utilizzando uno strumento di controllo del contrasto dei link, vedrai che il colore del link soddisfa il requisito di contrasto cromatico 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 cromatico di 3:1 rispetto al testo circostante.

Una possibilità è quella di modificare il colore del link in modo che corrisponda agli altri elementi della pagina. Tuttavia, se modifichi il colore del link in verde, anche il corpo del testo deve essere modificato per soddisfare i requisiti generali di contrasto cromatico tra tutti e tre gli elementi: link, sfondo e testo circostante.

Problema 4: contrasto di colore delle icone

Un altro problema di contrasto cromatico mancante riguarda le icone dei social media. Nel modulo colore e contrasto, hai imparato 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 cromatico 3:1, le icone dei social media vengono cambiate in un grigio più scuro.

Problema 5: layout dei contenuti

Se osservi il layout dei contenuti del paragrafo, il testo è completamente giustificato. Come hai imparato nel modulo Tipografia, questo crea "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 predefinito per i browser è a sinistra. 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

Una volta identificati e risolti tutti i problemi di accessibilità manuale descritti nei passaggi precedenti, la pagina dovrebbe avere un aspetto simile a quello dello screenshot.

È possibile che tu rilevi più problemi di accessibilità nei tuoi controlli manuali rispetto a quelli trattati in questo modulo. Scopriremo molti di questi problemi nel modulo successivo.

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.

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