Test da tastiera e screen reader, passo per passo | We.Inc
Un test manuale passo per passo per ogni sito: controlli da tastiera, comandi NVDA e VoiceOver, un link per saltare al contenuto, CSS :focus-visible e una checklist da spuntare.
Per testare un sito da tastiera, metti via il mouse e usa Tab, Shift+Tab, Enter, Space e i tasti freccia per raggiungere e azionare tutto, controllando che l'anello di focus sia visibile e l'ordine abbia senso. Poi attiva uno screen reader, NVDA su Windows o VoiceOver su Mac, e verifica che titoli, link, pulsanti e campi dei moduli vengano annunciati in modo chiaro.
Criteri WCAG 2.2 coperti da questi test
Criterio
Livello
Cosa controlli
2.1.1 Tastiera
Tutto funziona senza mouse
2.1.2 Nessun blocco della tastiera
Il focus può sempre spostarsi altrove
2.4.1 Salto di blocchi
Un modo per saltare la navigazione ripetuta
2.4.3 Ordine del focus
L'ordine di tabulazione segue il senso della pagina
2.4.7 Focus visibile
AA
Vedi sempre dove si trova il focus
2.4.11 Focus non nascosto (minimo)
AA
Le barre fisse non coprono l'elemento con il focus
4.1.2 Nome, ruolo, valore
I controlli annunciano cosa sono e il loro stato
I controlli automatici trovano testi alternativi mancanti e contrasto basso, ma non possono dirti se un menu si apre con Enter o se chi usa uno screen reader capisce un modulo. Questa pagina ti guida nel controllo manuale in ordine, con un'area di prova che mostra esattamente quale elemento ha il focus e una checklist che tiene il segno.
Apri la pagina da testare in un'altra scheda. Tieni questa checklist accanto.
Esegui prima i passaggi da tastiera, spuntando ogni voce. Il contatore di avanzamento si aggiorna man mano.
Usa l'area di prova qui per esercitarti: spostati con Tab e il tracker del focus indica l'elemento che ha il focus.
Poi avvia uno screen reader con i comandi nelle tabelle e ripeti il percorso ascoltando.
Copia il codice del link per saltare al contenuto e dello stile del focus per correggere gli errori più comuni.
Testa i percorsi chiave, non ogni pagina: il menu, una ricerca, il modulo principale, il checkout o la prenotazione e qualsiasi finestra di dialogo.
Ingrandisci il browser al 200 percento mentre usi Tab. Anelli di focus e header fissi spesso si sovrappongono a dimensioni maggiori.
Se rimuovi l'outline predefinito, sostituiscilo nella stessa regola. Non lasciare mai outline: none da solo.
Usa veri elementi button e a. Un div cliccabile viene saltato da Tab e annunciato come semplice testo.
Ascolta un intero modulo con lo screen reader prima di cambiare qualcosa. Le etichette mancanti si sentono subito.
Domande frequenti
Con quale screen reader dovrei testare?
Usa quello che usano i tuoi visitatori, quando possibile. NVDA è gratuito per Windows da NV Access, e VoiceOver è integrato in ogni Mac e iPhone. Se gran parte del traffico arriva da telefoni, aggiungi un controllo con VoiceOver su iPhone o TalkBack su Android.
Come avvio e chiudo NVDA e VoiceOver?
Una volta installato, NVDA si avvia con Control+Alt+N e si chiude con Insert+Q. Su Mac, Command+F5 attiva e disattiva VoiceOver. Premere Control da solo zittisce NVDA a metà frase.
Che cos'è un link per saltare al contenuto?
È il primo link della pagina, di solito nascosto finché non riceve il focus, che porta direttamente al contenuto principale. Così chi usa la tastiera evita di attraversare con Tab tutta la navigazione in ogni pagina. Le WCAG lo indicano come una tecnica sufficiente per 2.4.1 Salto di blocchi, insieme a landmark e titoli.
Dovrei usare :focus o :focus-visible?
:focus-visible lascia decidere al browser quando un anello di focus è utile, così chi usa la tastiera lo vede mentre i clic del mouse sui pulsanti di solito non lo disegnano. Secondo MDN è ampiamente supportato da marzo 2022. Applica lo stile a :focus-visible e mantieni un anello visibile per ogni elemento interattivo.
Che cos'è un keyboard trap?
Un punto in cui il focus entra e non riesce più a uscire con la tastiera, come un player incorporato o una finestra di dialogo personalizzata che intercetta Tab. Le finestre modali devono tenere il focus all'interno mentre sono aperte, ma Escape o un pulsante di chiusura devono sempre permettere al visitatore di uscire.
Modalità navigazione e modalità focus
Gli screen reader leggono le pagine web in un buffer virtuale in cui le singole lettere fanno saltare: H per il titolo successivo, K per il link successivo in NVDA. Quando arrivi in un campo di testo, il lettore passa alla modalità focus così le lettere vengono digitate. NVDA+Space passa dall'una all'altra manualmente.
Ecco perché un widget personalizzato che reagisce solo ai tasti freccia può sembrare rotto. In modalità navigazione il lettore può consumare quei tasti prima che il tuo script li riceva, quindi usa elementi nativi o segui i pattern delle ARIA Authoring Practices.
Come dovrebbe suonare un buon risultato
Ogni controllo dovrebbe essere annunciato con un nome, un ruolo e, quando serve, uno stato: Cerca, testo modificabile; Menu, pulsante, compresso; Iscriviti, casella di controllo, non selezionata. Se manca uno dei tre, correggi il markup prima di aggiungere ARIA.
I titoli dovrebbero formare uno schema che potresti leggere come un indice. Apri l'elenco dei titoli nell'elenco elementi di NVDA o nel rotore di VoiceOver e verifica se ha senso da solo.
Annotare ciò che trovi
Scrivi ogni problema indicando la pagina, i passaggi, cosa ti aspettavi e cosa è successo, più il criterio che non viene rispettato. Questo formato permette a uno sviluppatore di riprodurlo senza tirare a indovinare.
Dopo le correzioni, ripeti il test con gli stessi passaggi. I problemi di focus in particolare tendono a ripresentarsi quando un header o una modale vengono ridisegnati.
Tasti per il test solo da tastiera
Comportamento standard della tastiera nel browser
Tasto
Cosa dovrebbe fare
Tab / Shift+Tab
Passare all'elemento focalizzabile successivo o precedente
Enter
Seguire un link o premere un pulsante
Space
Premere un pulsante, spuntare una casella, scorrere la pagina quando nulla ha il focus
Tasti freccia
Spostarsi all'interno di gruppi radio, select, menu ed elenchi di schede
Escape
Chiudere una finestra di dialogo, un menu o un popup
Comandi NVDA (Windows, layout desktop)
Il tasto NVDA è Insert per impostazione predefinita; la guida utente permette anche Caps Lock. I tasti a lettera singola funzionano in modalità navigazione.
Dalla guida utente di NVDA
Azione
Tasti
Avviare NVDA
Control+Alt+N
Interrompere la voce
Control
Leggere da qui (lettura continua)
NVDA+Down Arrow
Passare tra modalità navigazione e focus
NVDA+Space
Elenco elementi (link, titoli, landmark)
NVDA+F7
Titolo / landmark / link successivo
Campo del modulo / pulsante successivo
Tabella / elenco successivo
Chiudere NVDA
NVDA+Q
Comandi VoiceOver (Mac)
VO indica il modificatore di VoiceOver: Control e Option premuti insieme, oppure Caps Lock da solo.
Dalla guida utente di VoiceOver di Apple
Azione
Tasti
Attivare o disattivare VoiceOver
Command+F5
Aprire il rotore
VO+U
Cambiare elenco del rotore (titoli, link e altro)
Freccia sinistra o destra dentro il rotore
Spostarsi nell'elenco scelto
Freccia su o giù dentro il rotore
Correzioni per gli errori più comuni
Link per saltare al contenuto
Clicca dentro il risultato, poi premi Tab. Il link appare solo quando ha il focus, e la sua destinazione è l'elemento main.
Un anello di focus che vede solo chi usa la tastiera
Spostati con Tab sui pulsanti dentro il risultato. L'anello distanziato resta separato dal bordo del pulsante, e i clic del mouse di solito lo lasciano nascosto.
Tenere gli elementi con il focus fuori da un header fisso
scroll-padding-top riserva spazio in alto quando il browser scorre fino a un elemento con il focus o a un'ancora.
Solo tastiera
Premi Tab una volta dopo il caricamento della pagina
Appare un link per saltare al contenuto e funziona con Enter
Attraversa tutta la pagina con Tab
Ogni link, pulsante e campo viene raggiunto, nell'ordine di lettura
Osserva l'anello di focus a ogni passo
È sempre visibile e mai nascosto dietro un header fisso
Apri il menu e gli eventuali menu a tendina
Enter o Space li aprono; Escape li chiude e riporta il focus
Usa i widget personalizzati
Schede, slider e caroselli rispondono ai tasti previsti
Apri e chiudi una finestra di dialogo
Il focus entra, resta all'interno e poi torna al pulsante che l'ha aperta
Compila e invia il modulo principale
Gli errori sono raggiungibili e il focus finisce in un punto utile
Prova a restare bloccato
Nessun contenuto incorporato o widget blocca il focus
Screen reader
Ascolta il titolo della pagina e il primo titolo
Dicono in quale pagina ti trovi
Apri l'elenco dei titoli
I titoli formano uno schema sensato con un solo h1
Apri l'elenco dei landmark
Sono presenti le regioni banner, navigazione, main e footer
Scorri i link
Il testo di ogni link ha senso anche fuori contesto
Visita ogni campo del modulo
Ogni campo annuncia un'etichetta, il tipo e se è obbligatorio
Provoca un messaggio di errore e uno di conferma
Entrambi vengono annunciati senza muovere il mouse
Controlla le immagini
Le immagini informative hanno un testo alternativo; quelle decorative sono silenziose
Attiva un pulsante o una casella di controllo
Il nuovo stato, come espanso o selezionato, viene annunciato
Checklist di test
Azzera
Spunta ogni passaggio mentre testi. Le tue spunte restano solo in questa pagina.
{n} di {total} passaggi completati
Nessun elemento della pagina ha il focus
campo {t}
nessun nome accessibile
Entra nell'area con Tab per iniziare
Area di prova del focus
Spostati con Tab tra questi controlli. Il tracker indica l'elemento che ha il focus in questo momento.