Test dell'accessibilità manuale

Nozioni di base sui test manuali

I test di accessibilità manuali utilizzano test, strumenti e tecniche su tastiera, visivi e cognitivi per individuare problemi non possibili con gli strumenti automatizzati. Poiché gli strumenti automatizzati non coprono tutti i criteri di successo identificati nelle WCAG, è vitale non eseguire test automatici sull'accessibilità e poi interrompere i test.

Con i progressi della tecnologia, i soli strumenti automatici potrebbero eseguire un maggior numero di test, ma oggi è necessario aggiungere ai protocolli di test sia i controlli manuali che quelli per le tecnologie per la disabilità per coprire tutti i checkpoint 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 poche competenze per raggiungere il successo

Svantaggi dei test di accessibilità manuali:

• Più complesso e dispendioso in termini di tempo rispetto ai test automatici.
• Potrebbe essere difficile ripetere su larga scala
• Richiedono maggiori competenze di accessibilità per eseguire test e interpretare i risultati

Confrontiamo quali elementi e dettagli di accessibilità possono essere rilevati attualmente da uno strumento automatico con quelli che non verranno rilevati.

Tipi di test manuali

Quando esamini la tua pagina web o la tua app per l'accessibilità digitale, devi prendere in considerazione molti strumenti e tecniche manuali. Le tre aree principali del test manuale sono la funzionalità della tastiera, le revisioni mirate alla vista e i controlli generali dei contenuti.

In questo modulo tratteremo ciascuno di questi argomenti a livello generale, ma i seguenti test non sono intesi come un elenco esaustivo di tutti i test manuali che puoi o dovresti eseguire. Ti consigliamo di iniziare con un elenco di controllo per l'accessibilità manuale di una fonte affidabile e di sviluppare un elenco di controllo personalizzato per il test manuale in base alle esigenze specifiche del tuo team e del tuo prodotto digitale.

Controlli da tastiera

Si stima che circa il 25% di tutti i problemi di accessibilità digitale sia correlato alla mancanza di supporto per la tastiera. Come abbiamo appreso nel modulo Messa a fuoco della tastiera, la modifica interessa tutti i tipi di utenti, compresi gli utenti non vedenti con tastiera, gli utenti di screen reader ipovedenti/non vedenti e le persone che utilizzano un software di riconoscimento vocale che sfrutta una tecnologia basata sull'accessibilità dei contenuti dalla tastiera.

I test della tastiera rispondono a domande quali:

• La pagina web o la funzionalità richiede un mouse per funzionare?
• L'ordine di tabulazione è logico e intuitivo?
• L'indicatore di stato attivo della tastiera è sempre visibile?
• Riesci a rimanere bloccato in un elemento che non dovrebbe bloccare la messa a fuoco?
• Riesci a muoverti dietro o intorno a un elemento che dovrebbe catturare l'attenzione?
• Quando chiudi un elemento su cui è stato impostato lo stato attivo, l'indicatore è tornato in una posizione logica?

Anche se l'impatto delle funzionalità della tastiera è 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 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 un gradiente o un'immagine?
• Esistono elementi che assomigliano a 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 nell'app?
• Sono presenti effetti lampeggianti, stroboscopici o di animazione che superano i consigli?
• La spaziatura dei contenuti è corretta? Per lettere, parole, righe e paragrafi?
• Riesci a visualizzare 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 della pagina. Non solo dovresti esaminare il testo stesso, ma anche esaminare il contesto per assicurarti che abbia senso per gli altri.

I controlli dei contenuti rispondono a domande quali:

• I titoli delle pagine, le intestazioni e le etichette dei moduli sono chiari e descrittivi?
• Le alternative alle immagini sono concise, precise e utili?
• Il solo colore viene utilizzato come unico modo per trasmettere un significato o un'informazione?
• I link sono descrittivi o utilizza testo generico come "ulteriori informazioni" o "fai clic qui?"
• Sono state apportate modifiche alla lingua di una pagina?
• Viene utilizzato un linguaggio semplice e tutti gli acronimi vengono scritti per la prima volta in riferimento?

Alcuni controlli dei contenuti possono essere in parte automatizzati. Ad esempio, potresti scrivere un linter di JavaScript che verifichi "Fai clic qui" e ti suggerisca di apportare una modifica. Tuttavia, queste soluzioni personalizzate spesso richiedono ancora una persona per modificare il testo in modo che sia contestuale.

Demo: test manuale

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

Passaggio 1

Nella nostra demo CodePen aggiornata sono applicati tutti gli aggiornamenti automatici dell'accessibilità.

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

Passaggio 2

Avvia la procedura di test manuale mettendo da parte il mouse o il trackpad e spostati nel DOM in alto e in basso utilizzando esclusivamente la tastiera.

Problema 1: indicatore di messa a fuoco visibile

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

  :focus {
    outline: none;
  }

Risolviamo il problema.

Come hai appreso nel modulo relativo all'elemento attivo sulla tastiera, devi rimuovere questa riga di codice per consentire ai browser web di aggiungere un elemento attivo visibile agli utenti. Puoi fare un passo in più e creare un indicatore di concentrazione adatto all'estetica del tuo prodotto digitale.

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

Problema 2: ordine di priorità

Dopo aver modificato l'indicatore di stato attivo e averlo visibile, assicurati di scorrere la pagina. Tieni presente che, nel frattempo, tieni presente che il campo di immissione del modulo utilizzato per iscriverti alla newsletter non viene evidenziato. È 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.

Dal momento che vorremmo che le persone utilizzassero questo campo per iscriversi alla nostra newsletter, tutto ciò che dobbiamo fare è rimuovere il tabindex negativo o impostarlo su zero per consentire all'input di diventare di nuovo attivabile dalla 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

Mentre eseguivi i test della tastiera scorrendo verso l'alto e verso il basso la pagina dimostrativa, avrai probabilmente notato che la tastiera si concentrava su tre link visivamente nascosti nei paragrafi relativi alle diverse condizioni mediche.

Affinché la nostra pagina sia accessibile, i link devono risaltare 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 risolverebbe il problema di accessibilità, ma potrebbe non soddisfare l'estetica generale del progetto che speri di 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.

Osservando la demo utilizzando uno strumento per il controllo del contrasto dei link, noterai che il colore del 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 anche soddisfare il requisito di contrasto di colore di 3:1 rispetto al testo circostante.

Un'opzione consiste nel modificare il colore del link in modo che corrisponda a quello degli altri elementi della pagina. Tuttavia, se modifichi il colore del link in verde, è necessario modificare anche il corpo del testo per soddisfare i requisiti generali in materia di contrasto di colore tra tutti e tre gli elementi: link, sfondo e testo circostante.

Problema 4: contrasto di colore dell'icona

Un altro problema che non deriva dal contrasto di colore è rappresentato dalle icone dei social media. Nel modulo Colore e contrasto hai appreso che le icone essenziali devono avere 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 colore di 3:1, le icone dei social media vengono cambiate in un grigio più scuro.

Problema 5: layout dei contenuti

Se osservi il layout del contenuto del paragrafo, il testo è completamente giustificato. Come hai imparato nel modulo Tipografia, si creano "fiumi dello spazio", che potrebbero rendere il testo difficile da leggere per alcuni utenti.

p.bullet {
   text-align: justify;
}

Risolviamo il problema.

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

p.bullet {
   text-align: left;
}

Passaggio 4

Una volta identificati e risolti tutti i problemi di accessibilità manuali descritti nei passaggi precedenti, la pagina dovrebbe essere simile al nostro screenshot.

È possibile che nei controlli manuali troverai più problemi di accessibilità di quelli trattati in questo modulo. Parleremo di molti di questi problemi nel prossimo modulo.

Passaggio successivo

Complimenti! Hai completato i moduli di test automatici e manuali. Puoi visualizzare la nostra versione aggiornata di CodePen, a cui sono state applicate tutte le correzioni di accessibilità manuali e automatiche.

Ora, passa all'ultimo modulo di test incentrato sui test di tecnologie assistive.

Verifica la tua comprensione

Verifica le tue conoscenze dei test di accessibilità manuali