Gestione della messa a fuoco della tastiera, ordine e visibilità

Scopo #

Lo scopo principale di questo test di accessibilità manuale è verificare meticolosamente che tutti gli elementi interattivi e le funzionalità all’interno di una piattaforma digitale siano pienamente utilizzabili tramite la sola tastiera, che il focus della tastiera si muova in un ordine logico e prevedibile e, soprattutto, che un indicatore di focus visibile e chiaramente percepibile sia costantemente presente e non oscurato. Questo test mira a confermare la conformità ai criteri di successo WCAG 2.2 2.1.1 Tastiera (A), 2.1.2 Nessuna trappola della tastiera (A), 2.4.3 Ordine del focus (A), 2.4.7 Focus visibile (AA), 2.4.11 Focus non oscurato (minimo) (AA), 2.4.12 Focus non oscurato (migliorato) (AAA), 2.4.13 Aspetto del focus (AAA) e 1.4.11 Contrasto non testuale (AA). Garantire un’accessibilità solida della tastiera e una chiara visibilità del focus è fondamentale per gli utenti che non possono usare il mouse, inclusi gli individui con disabilità motorie, gli utenti non vedenti che navigano con screen reader e gli utenti esperti che preferiscono le scorciatoie da tastiera. Senza un’adeguata gestione del focus e della visibilità, gli utenti possono non essere in grado di interagire o addirittura abbandonare determinate parti dell’interfaccia, con conseguente grave frustrazione e inaccessibilità.

Criteri WCAG coperti #

Questo test affronta specificamente i seguenti criteri di successo WCAG 2.2 relativi all’accessibilità della tastiera e alla gestione della messa a fuoco:

• 2.1.1 Tastiera – A

Questo criterio richiede che tutte le funzionalità del contenuto siano gestibili tramite un’interfaccia da tastiera, senza richiedere tempi di pressione specifici per i singoli tasti, tranne nei casi in cui la funzione sottostante richieda un input che dipenda dal percorso del movimento dell’utente e non solo dai punti finali. Ciò significa che ogni elemento interattivo (pulsanti, link, campi modulo, widget personalizzati, ecc.) deve essere raggiungibile e azionabile utilizzando esclusivamente la tastiera. Questo criterio è rilevante e viene testato nei seguenti modi:

Rilevanza/Test:
Navigheremo sistematicamente nell’intera pagina utilizzando solo input da tastiera (Tab, Maiusc + Tab, Invio, Barra spaziatrice, tasti freccia) per garantire che tutti gli elementi interattivi ricevano il focus e possano essere attivati. Questo include il controllo dei controlli personalizzati, dei contenuti caricati dinamicamente e degli elementi che diventano visibili durante l’interazione.

• 2.1.2 Nessuna trappola per tastiera – A

Questo criterio stabilisce che, se il focus della tastiera può essere spostato su un componente della pagina utilizzando un’interfaccia di tastiera, allora il focus può essere spostato da quel componente utilizzando solo un’interfaccia di tastiera e, se è necessario utilizzare più dei tasti freccia o del tasto Tab per spostare il focus, l’utente viene informato sul metodo per spostarlo. Questo impedisce agli utenti di rimanere bloccati in una particolare sezione dell’interfaccia.

Rilevanza/Test:
Questa è una parte fondamentale del test. Per ogni componente interattivo, in particolare widget complessi, finestre di dialogo modali e frame incorporati, proveremo a spostare il focus della tastiera all’interno e all’esterno del componente. Se il focus si blocca, si tratta di una trappola da tastiera. Verificheremo anche se un meccanismo di escape (ad esempio, il tasto Esc, una combinazione di tasti specifica) viene comunicato esplicitamente se la navigazione standard (Tab) è insufficiente.

• 2.4.3 Ordine di messa a fuoco – A

Questo criterio richiede che, se una pagina web può essere navigata in sequenza e le sequenze di navigazione influiscono sul significato o sul funzionamento, i componenti focalizzabili ricevano il focus in un ordine che ne preservi il significato e l’operatività. Ciò garantisce che il flusso logico dell’interazione venga mantenuto per gli utenti che utilizzano la tastiera, prevenendo confusione e inefficienza.

Rilevanza/Test:
Durante la navigazione da tastiera, osserveremo attentamente la sequenza in cui gli elementi ricevono il focus. L’ordine di focus dovrebbe generalmente seguire l’ordine di lettura visiva del contenuto (dall’alto verso il basso, da sinistra a destra per le lingue LTR). Interruzioni in questo ordine logico possono disorientare gli utenti che utilizzano tastiera e screen reader. Questo è particolarmente importante per i moduli, i layout multicolonna e i componenti interattivi.

• 2.4.7 Messa a fuoco visibile – AA

Questo criterio richiede che qualsiasi interfaccia utente utilizzabile tramite tastiera disponga di una modalità operativa in cui l’indicatore di focus sia visibile. Ciò significa che quando un utente scorre i contenuti con il tasto Tab, deve sempre essere presente un indicatore visivo chiaro e percepibile dell’elemento attualmente attivo.

Rilevanza/Test:
Esamineremo visivamente ogni elemento interattivo quando riceve il focus della tastiera per garantire che attorno ad esso appaia un indicatore di focus distinto e facilmente percepibile. Questo indicatore deve essere visibile su tutti i possibili sfondi su cui potrebbe apparire.

• 2.4.11 Messa a fuoco non oscurata (minimo) – AA

Questo criterio richiede che, quando un componente dell’interfaccia utente riceve il focus da tastiera, il componente non sia completamente nascosto dal contenuto creato dall’autore. Questo impedisce che intestazioni, piè di pagina o sovrapposizioni dinamiche fissi coprano l’elemento con focus o il suo indicatore.

Rilevanza/Test:
Verificheremo specificamente scenari in cui il contenuto potrebbe oscurare l’indicatore di focus, ad esempio durante lo scorrimento, l’interazione con elementi fissi o l’apertura di overlay/modali che potrebbero coprire parzialmente l’elemento con focus. L’intero componente con focus, incluso il suo indicatore, deve rimanere visibile.

• 2.4.12 Messa a fuoco non oscurata (migliorata) – AAA

Questo criterio si basa sul 2.4.11, che richiede che quando un componente dell’interfaccia utente riceve il focus da tastiera, nessuna parte del componente venga nascosta da contenuti creati dall’autore. Ciò significa che nessuna parte dell’elemento con focus o del suo indicatore deve essere oscurata, nemmeno parzialmente.

Rilevanza/Test:
Si tratta di un controllo più rigoroso rispetto alla versione 2.4.11. Verificheremo meticolosamente che nessuna parte dell’elemento evidenziato o del suo indicatore venga mai coperta da intestazioni, piè di pagina o altri contenuti creati dall’autore, nemmeno per un istante durante lo scorrimento o la visualizzazione di contenuti dinamici.

• 2.4.13 Aspetto della messa a fuoco – AAA

Questo criterio specifica requisiti più rigorosi per l’aspetto visivo dell’indicatore di messa a fuoco. Deve avere un’area minima, un contrasto sufficiente ed essere distinto dallo stato predefinito del componente.

Rilevanza/Test:
Valuteremo le proprietà visive dell’indicatore di messa a fuoco:

• Area minima: l’area dell’indicatore deve essere almeno grande quanto un perimetro del componente spesso 2px, o una linea spessa 4px lungo il lato più corto del componente, o un perimetro spesso 1px attorno al componente e una linea spessa 4px lungo il lato più corto.
• Contrasto: il rapporto di contrasto dell’indicatore deve essere almeno 3:1 con i colori dello stato non a fuoco del componente e 3:1 con i colori di sfondo adiacenti.
• Distinzione: l’indicatore non deve basarsi esclusivamente su un cambiamento di colore e deve essere chiaramente distinguibile dallo stato sfocato. Questo ne garantisce la facile individuazione.

1.4.11 Contrasto non testuale – AA

Questo criterio stabilisce che la presentazione visiva dei componenti dell’interfaccia utente e degli oggetti grafici abbia un rapporto di contrasto di almeno 3:1 rispetto ai colori adiacenti. Questo si applica anche all’indicatore di messa a fuoco, garantendo che abbia un contrasto sufficiente per essere percepito.

Rilevanza/Test:
Valuteremo visivamente il contrasto dell’indicatore di messa a fuoco rispetto all’elemento che delinea e allo sfondo circostante. Per i contorni di messa a fuoco predefiniti dei browser più comuni (ad esempio, l’anello blu), questo valore è solitamente rispettato, ma gli stili di messa a fuoco personalizzati devono essere verificati per garantire che rispettino il rapporto di contrasto 3:1.

Ambiente di prova #

Questo test richiede un approccio incentrato sulla tastiera e l’uso attivo di tecnologie assistive su vari dispositivi.

Desktop #

• Sistemi operativi: Windows (ultime due versioni), macOS (ultime due versioni).
• Browser: ultime versioni stabili di Chrome, Firefox, Edge, Safari.
• Metodi di input: tastiera standard (metodo di input principale per tutte le interazioni), mouse standard (per osservare visivamente lo stato di messa a fuoco, se necessario).
• Tecnologie assistive: lettore di schermo (ad esempio, NVDA, JAWS su Windows; VoiceOver su macOS) per confermare le modifiche di messa a fuoco annunciate e i ruoli degli elementi.

Cellulari e tablet #

• Sistemi operativi: iOS (ultime due versioni), Android (ultime due versioni).
• Browser: browser predefiniti (Safari su iOS, Chrome su Android).
• Metodi di input:
  • Tastiera su schermo (per la navigazione di base tramite schede, se disponibile, anche se spesso limitata).
  • Tastiera fisica esterna (USB o Bluetooth) collegata al dispositivo (fondamentale per test completi su dispositivi mobili/tablet).
  • Touchscreen (per il caricamento iniziale della pagina, ma tutte le interazioni per il test stesso dovrebbero avvenire solo tramite tastiera).
• Tecnologie assistive: lettori di schermo integrati (VoiceOver su iOS, TalkBack su Android) per verificare gli annunci di messa a fuoco.
• Orientamento: modalità verticale e orizzontale (per garantire l’adattamento della navigazione tramite tastiera).

Preparazione al test #

Prima di iniziare il test manuale, assicurarsi di aver completato i seguenti passaggi:

1. Identifica tutti gli elementi interattivi:
   Elencare sistematicamente ogni singolo componente interattivo sulla piattaforma con cui un utente potrebbe potenzialmente interagire e che dovrebbe essere attivabile tramite tastiera. Questo include, a titolo esemplificativo ma non esaustivo:
2. Disabilitare l’uso del mouse (disciplina mentale):
   Per tutta la durata del “Processo di test passo-passo”, impegnatevi a utilizzare solo la tastiera per la navigazione e l’interazione. Resistete alla tentazione di usare il mouse, anche per semplici clic.
3. Disabilitare l’uso del mouse (disciplina mentale):
   Per tutta la durata del “Processo di test passo-passo”, impegnatevi a utilizzare solo la tastiera per la navigazione e l’interazione. Resistete alla tentazione di usare il mouse, anche per semplici clic.
4. Familiarizzare con i comandi da tastiera:
   Assicurarsi di avere familiarità con i comandi di navigazione più comuni da tastiera:
   • Tab: sposta lo stato attivo in avanti, all’elemento interattivo successivo.
   • Maiusc + Tab: sposta lo stato attivo all’elemento interattivo precedente.
   • Invio/Barra spaziatrice: attiva i pulsanti o i link evidenziati; attiva le caselle di controllo; attiva i menu a discesa.
   • Tasti freccia: consentono di navigare all’interno di componenti complessi (ad esempio gruppi di pulsanti di scelta, voci di menu, cursori, contenuti all’interno di una finestra modale dopo che ha ricevuto il focus iniziale).
   • Esc: spesso utilizzato per chiudere le finestre modali o ignorare i pop-up.
5. Comprendere lo stile dell’indicatore di messa a fuoco:
   Osserva lo stile predefinito dell’indicatore di messa a fuoco della piattaforma (ad esempio, colore, spessore, tipo di contorno). Nota eventuali stili di messa a fuoco personalizzati che sovrascrivono quelli predefiniti del browser.
6. Familiarizzare con i criteri WCAG:
   Rileggere e interiorizzare i requisiti specifici delle WCAG 2.1.1, 2.1.2, 2.4.3, 2.4.7, 2.4.11, 2.4.12, 2.4.13 e 1.4.11.
7. Cancella cache/cookie del browser:
   Per garantire un ambiente di test pulito, cancellare la cache e i cookie del browser secondo necessità.

Processo di test passo dopo passo #

Eseguire i seguenti passaggi per ogni elemento interattivo e sezione della piattaforma identificati, sia su desktop che su dispositivi mobili/tablet (con una tastiera esterna). Documentare meticolosamente le osservazioni.

PASSO 1 – Procedura generale per l’operatività della tastiera (WCAG 2.1.1) #

Navigazione sequenziale: #

• Iniziare dall’inizio della pagina (ad esempio, dopo il caricamento, premere Tab una volta).
• Premere continuamente il tasto Tab per spostare lo stato attivo su tutti gli elementi interattivi della pagina.
• Caso di prova:
  tutti gli elementi interattivi della pagina (link, pulsanti, campi modulo, widget personalizzati, controlli multimediali) ricevono lo stato attivo della tastiera?
• Caso di prova:
  per ogni elemento evidenziato, è possibile attivarlo o manipolarlo utilizzando i comandi standard della tastiera (Invio, barra spaziatrice, tasti freccia)?
• Caso di prova:
  se un elemento è interattivo (ad esempio, un menu a discesa personalizzato), anche gli elementi interni (ad esempio, le opzioni del menu a discesa) diventano attivabili e gestibili tramite tastiera una volta attivato il controllo principale?
• Caso di prova:
  è possibile spostare lo stato attivo indietro utilizzando Maiusc + Tab attraverso tutti gli elementi in ordine inverso?
• Caso di prova (lettore dello schermo):
  quando il focus si sposta, il lettore dello schermo annuncia correttamente il nome, il ruolo e lo stato dell’elemento?

PASSO 2 – Procedura generale per la visibilità del focus (WCAG 2.4.7, 2.4.11, 1.4.11, 2.4.12 AAA, 2.4.13 AAA) #

Presenza dell’indicatore di messa a fuoco visiva (WCAG 2.4.7 AA): #

• Mentre scorri con il tasto Tab ogni elemento interattivo, osserva attentamente l’aspetto visivo dell’indicatore di messa a fuoco.
• Caso di prova:
  viene visualizzato un indicatore visivo distinto di messa a fuoco attorno a ogni elemento attivabile tramite tastiera quando riceve il focus?
• Caso di prova:
  l’indicatore di messa a fuoco è chiaramente percepibile e ovvio? È distinto dallo stato predefinito dell’elemento e da altri segnali visivi? (ad esempio, non solo un leggero cambiamento di colore su uno sfondo che presenta già un contrasto scarso).
• Caso di prova:
  l’indicatore di messa a fuoco è coerente nello stile e nel comportamento sull’intera piattaforma?

Contrasto dell’indicatore di messa a fuoco (WCAG 1.4.11 AA e 2.4.13 AAA): #

• Per elementi con stili di messa a fuoco personalizzati o elementi che appaiono su sfondi diversi:
• Caso di prova (AA):
  l’indicatore di messa a fuoco (ad esempio, il colore del contorno, del bagliore o la modifica dello sfondo) ha un rapporto di contrasto di almeno 3:1 rispetto allo stato predefinito dell’elemento e rispetto ai colori di sfondo adiacenti? (È accettabile una stima visiva; per controlli precisi, è possibile utilizzare strumenti di analisi del contrasto dei colori).
• Caso di prova (AAA – 2.4.13 Contrasto):
  l’indicatore di messa a fuoco ha un rapporto di contrasto di almeno 3:1 con i colori dello stato non a fuoco del componente? (Questo è più restrittivo rispetto alla versione 1.4.11, garantendo che la modifica stessa sia ad alto contrasto).

Aspetto focale (WCAG 2.4.13 AAA): #

• Caso di prova (area):
  l’area dell’indicatore di messa a fuoco soddisfa i requisiti minimi di dimensione? (ad esempio, almeno un perimetro spesso 2 px attorno al componente o una linea spessa 4 px lungo il lato più corto del componente). Effettuare una stima visiva o utilizzare gli strumenti di sviluppo per la misurazione.
• Caso di prova (distinzione):
  l’indicatore di messa a fuoco non si basa esclusivamente su un cambiamento di colore? È chiaramente distinguibile dallo stato non a fuoco attraverso un cambiamento di forma, dimensione, spessore o una combinazione di proprietà? (ad esempio, un semplice cambiamento di colore senza contorno è un fallimento in questo caso).

Messa a fuoco non oscurata (WCAG 2.4.11 AA e 2.4.12 AAA): #

• Esplora la pagina, concentrandoti in particolar modo sulle aree con intestazioni/piè di pagina fissi, barre laterali o contenuti che appaiono dinamicamente (ad esempio, pop-up, finestre modali, avvisi).
• Caso di test (AA – Scorrimento):
  scorrere la pagina mentre si passa da un elemento all’altro con il tasto Tab. L’elemento attivo o il suo indicatore vengono mai completamente nascosti o oscurati da un’intestazione, un piè di pagina o un altro elemento a posizione fissa? L’intero elemento attivo, incluso il suo indicatore, deve rimanere visibile sullo schermo.
• Caso di prova (AAA – Nessun oscuramento parziale):
  per 2.4.12, verificare meticolosamente che nessuna parte dell’elemento evidenziato o del suo indicatore venga mai nascosta o oscurata da contenuti creati dall’autore (ad esempio, anche un piccolo angolo del contorno evidenziato non deve essere coperto da un’intestazione fissa).
• Caso di test (sovrapposizioni/finestre modali):
  quando si apre una finestra di dialogo o una sovrapposizione modale, oscura l’indicatore di focus degli elementi sottostanti se il focus è ancora sulla pagina principale? Quando il focus si sposta sulla finestra modale, l’elemento con focus all’interno della finestra modale è completamente visibile e non nascosto dagli elementi dell’interfaccia utente della finestra modale? (Valido sia per AA che per AAA).
• Caso di prova (contenuto dinamico):
  se viene visualizzato nuovo contenuto (ad esempio, suggerimenti di ricerca, messaggi di errore), questo copre mai l’elemento attualmente selezionato? (Si applica sia ad AA che ad AAA).

PASSO 3 – Procedura generale per la trappola della tastiera (WCAG 2.1.2) #

Metti alla prova la messa a fuoco dentro e fuori: #

Per ogni elemento o sezione interattiva che può ricevere lo stato attivo della tastiera:

• Utilizzare Tab o altri comandi da tastiera per spostare lo stato attivo sull’elemento/sezione.
• Subito dopo, prova a spostare lo stato attivo fuori da quell’elemento/sezione usando Tab e Maiusc + Tab.
• Caso di prova:
  il focus si sposta correttamente sull’elemento logico successivo (utilizzando Tab) e sull’elemento logico precedente (utilizzando Maiusc + Tab) senza bloccarsi?

Scenari di trappola specifici:

• Finestre modali/Pop-up:
  quando si apre una finestra di dialogo modale, il focus si sposta automaticamente sulla finestra? Una volta all’interno, è possibile usare il tasto Tab per scorrere tutti gli elementi interattivi all’interno della finestra? È quindi possibile usare Maiusc + Tab per navigare indietro? Quando la finestra modale viene chiusa (ad esempio, tramite un pulsante di chiusura o il tasto Esc), il focus torna all’elemento che ha avviato la finestra modale? Il focus non può spostarsi al di fuori della finestra modale attiva, spostandosi sugli elementi della pagina di sfondo mentre la finestra modale è aperta?
• <iframe> incorporati:
  se la pagina contiene un <iframe> con contenuto interattivo, è possibile usare il tasto Tab per entrare nel contenuto dell’iframe? È possibile uscire dall'<iframe> e tornare alla pagina padre? (Questo è un punto debole comune).
• Widget complessi:
  per i componenti personalizzati (ad esempio, selettori di data, menu a discesa a selezione multipla, cursori), assicurarsi che una volta che il focus è all’interno del widget, tutte le sue parti siano navigabili e che quindi sia possibile uscire dall’intero widget utilizzando la navigazione tramite schede standard.
• Contenuto dinamico:
  se viene visualizzato un nuovo contenuto (ad esempio, una sezione espandibile, risultati di ricerca), la messa a fuoco viene gestita correttamente quando viene visualizzato ed è possibile entrare e uscire dal nuovo contenuto?
• Informazioni su Trap Escape:
  il focus si sposta correttamente sull’elemento logico successivo (utilizzando Tab) e sull’elemento logico precedente (utilizzando Maiusc + Tab) senza bloccarsi?

PASSO 4 – Procedura generale per l’ordine di messa a fuoco (WCAG 2.4.3) #

Flusso visivo logico:

• Mentre scorri la pagina con il tasto Tab, osserva visivamente la sequenza di messa a fuoco.
• Caso di prova:
  il focus della tastiera si sposta in un ordine logico che generalmente segue il layout visivo della pagina (ad esempio, da sinistra a destra, dall’alto verso il basso per la maggior parte delle lingue occidentali)?
• Caso di prova:
  per i moduli, lo stato attivo si sposta da un campo del modulo al successivo nella sequenza di input prevista?
• Caso di prova:
  per i menu di navigazione, lo stato attivo si sposta tra le voci di menu in un ordine logico?
• Caso di prova:
  quando si apre una nuova sezione di contenuto o una finestra modale, l’attenzione passa immediatamente all’elemento interattivo più rilevante all’interno del nuovo contenuto e poi procede logicamente?
• Caso di prova:
  gli elementi interattivi raggruppati visivamente ricevono anche attenzione in una sequenza logica all’interno di quel gruppo?
• Caso di prova:
  ci sono “salti” significativi o sequenze illogiche in cui il focus salta elementi, torna indietro inaspettatamente o salta a una parte visivamente distante della pagina?

Scenari specifici da testare #

• Navigazione globale/Intestazioni/Piè di pagina:
  assicurarsi che tutti i link e i pulsanti in queste aree fisse/persistenti siano accessibili tramite tastiera, abbiano un focus visibile e non siano oscurati durante lo scorrimento (verificando sia 2.4.11 AA che 2.4.12 AAA).
• Moduli con campi condizionali:
  se i campi di input vengono visualizzati/scompaiono in base alle selezioni, assicurarsi che l’attenzione si sposti logicamente sui nuovi campi e che i campi esistenti mantengano l’ordine corretto.
• Suggerimenti automatici/Risultati di ricerca:
  quando digiti in una casella di ricerca, se viene visualizzato un elenco di suggerimenti, assicurati che il focus possa spostarsi sui suggerimenti, quindi tornare all’input e uscire dall’intero componente di ricerca. Controlla che il focus sia visibile e non oscurato.
• Lettori multimediali:
  assicurarsi che tutti i controlli multimediali (riproduzione, pausa, volume, schermo intero) siano accessibili tramite tastiera, abbiano indicatori di messa a fuoco chiari che soddisfino i criteri AAA e non siano nascosti dal contenuto video stesso.
• Tabelle dati con intestazioni ordinabili:
  assicurarsi che le intestazioni ordinabili siano attivabili e gestibili tramite tastiera e che il loro indicatore di messa a fuoco sia chiaro e soddisfi i criteri di aspetto AAA.
• Caroselli/cursori:
  tutti i controlli di navigazione (frecce, punti) e tutti gli elementi interattivi all’interno degli elementi del carosello devono essere accessibili tramite tastiera con focus visibile che soddisfi i criteri di aspetto AAA.
• Messaggi di errore/notifiche:
  se i messaggi di errore vengono visualizzati in modo dinamico, assicurarsi che tutti i pulsanti “chiudi” al loro interno siano accessibili tramite tastiera e abbiano un chiaro indicatore di messa a fuoco che soddisfi i criteri di aspetto AAA.
• Menu/barre laterali off-canvas:
  quando si apre un menu off-canvas, assicurarsi che la messa a fuoco sia gestita correttamente (si sposta nel menu, scorre all’interno del menu e torna al trigger alla chiusura) e che il menu stesso abbia un chiaro indicatore di messa a fuoco che soddisfi i criteri di aspetto AAA.

Identificazione dei problemi #

Durante il processo di test, identificare e documentare eventuali deviazioni dal comportamento previsto in base alle WCAG 2.1.1, 2.1.2, 2.4.3, 2.4.7, 2.4.11, 2.4.12, 2.4.13 e 1.4.11. Esempi di problemi comuni includono:

• Inoperabilità della tastiera (errore WCAG 2.1.1):
• Trappola della tastiera (errore WCAG 2.1.2):
  • Lo stato attivo rimane bloccato all’interno di una finestra di dialogo modale, impedendo la navigazione verso i contenuti in background o la possibilità di chiudere la finestra modale.
  • Il focus entra in un <iframe> ma non può tornare alla pagina padre.
  • La messa a fuoco rimane bloccata all’interno di un widget personalizzato complesso o di un ciclo infinito di elementi su cui è possibile concentrarsi.
  • Non vengono fornite istruzioni chiare quando è necessaria una chiave speciale per uscire da un componente.
• Ordine di messa a fuoco illogico (fallimento WCAG 2.4.3):
  • L’attenzione salta in modo irregolare sulla pagina, senza seguire l’ordine di lettura visiva.
  • In un layout a più colonne, lo stato attivo salta orizzontalmente avanti e indietro tra le colonne anziché completare una colonna prima di passare a quella successiva.
  • In un modulo, lo stato attivo passa da un campo di input all’altro in una sequenza imprevedibile.
  • Il focus salta gli elementi interattivi importanti nella sequenza logica.
• Indicatore di messa a fuoco mancante (errore WCAG 2.4.7 AA):
  un elemento interattivo riceve il focus della tastiera, ma non viene visualizzato alcun indicatore visivo attorno ad esso.
• Indicatore di messa a fuoco scarsamente percepibile (WCAG 2.4.7 AA, errore 1.4.11 AA):
  l’indicatore di messa a fuoco è presente ma troppo sottile, troppo trasparente o ha un contrasto insufficiente (inferiore a 3:1) rispetto allo sfondo o all’elemento stesso, rendendolo difficile da distinguere.
• Indicatore di messa a fuoco oscurato (errore WCAG 2.4.11 AA):
  l’elemento con messa a fuoco o il suo indicatore di messa a fuoco sono parzialmente o completamente nascosti da altri contenuti (ad esempio, intestazioni/piè di pagina fissi, sovrapposizioni dinamiche, un widget di chat).
• Indicatore di messa a fuoco parzialmente oscurato (errore WCAG 2.4.12 AAA):
  qualsiasi parte dell’elemento evidenziato o del suo indicatore è nascosta dal contenuto creato dall’autore, anche se non completamente oscurata.
• Area dell’indicatore di messa a fuoco troppo piccola (errore WCAG 2.4.13 AAA):
  l’area dell’indicatore di messa a fuoco è inferiore al minimo specificato (ad esempio, inferiore a un perimetro di 2 px o a 4 px sul lato più corto).
• Indicatore di messa a fuoco non distinto (errore WCAG 2.4.13 AAA):
  l’indicatore di messa a fuoco si basa esclusivamente su un cambiamento di colore o non è chiaramente distinguibile dallo stato non a fuoco.
• Contrasto dell’indicatore di messa a fuoco troppo basso (errore WCAG 2.4.13 AAA):
  il rapporto di contrasto dell’indicatore di messa a fuoco è inferiore a 3:1 con lo stato non a fuoco del componente.
• Elementi interattivi nascosti nell’ordine di tabulazione:
  elementi nascosti visivamente (ad esempio, display: none; che non sono gestiti correttamente con visibility: hidden; o aria-hidden=”true”) ma che ricevono comunque il focus, causando confusione per gli utenti di tastiera e screen reader.
• Tabulazioni ridondanti:
  lo stesso elemento interattivo può essere messo a fuoco più volte nell’ordine di tabulazione.
• Attivazione solo tramite script:
  gli elementi possono essere attivati ​​solo tramite un clic del mouse (ad esempio, un clic su un div) e non tramite Invio o barra spaziatrice quando sono attivati.

Classificazione di gravità #

Assegnare un livello di gravità a ciascun problema identificato in base al suo impatto sull’accessibilità dell’utente:

• Critico:
  è presente un blocco della tastiera (errore WCAG 2.1.2) che impedisce completamente agli utenti di procedere o uscire da una sezione dell’interfaccia, oppure le funzionalità principali sono completamente inaccessibili tramite tastiera. Ciò rappresenta un ostacolo diretto e significativo alle attività essenziali. Inoltre, la completa assenza di qualsiasi indicatore visivo di focus sugli elementi interattivi critici può essere critica se rende l’interfaccia inutilizzabile per gli utenti vedenti che utilizzano la tastiera.
• Alto:
  Parti significative delle funzionalità della piattaforma non sono utilizzabili tramite tastiera (fallimento WCAG 2.1.1) oppure l’ordine di focus è gravemente illogico nei flussi di lavoro chiave, causando notevole confusione e inefficienza. Gli indicatori di focus sono presenti ma gravemente carenti in termini di percezione (fallimento 2.4.7 AA) o sono spesso oscurati (fallimento 2.4.11 AA), rendendo la navigazione estremamente difficoltosa. (Violazione diretta dei criteri di Livello A o AA con impatto significativo).
• Medio:
  causa un moderato disagio o frustrazione agli utenti della tastiera. Alcuni elementi interattivi sono difficili da utilizzare, ma non impossibili, oppure l’ordine di messa a fuoco presenta sporadiche e minori incongruenze. Gli indicatori di messa a fuoco potrebbero essere occasionalmente oscurati (non conformi alla norma 2.4.12 AAA) o avere un contrasto non ottimale (non conformi alla norma 2.4.13 AAA per il contrasto), ma sono generalmente presenti. Problemi di aspetto dell’indicatore di messa a fuoco che non soddisfano la norma 2.4.13 AAA ma non lo rendono completamente impercettibile.
• Basso:
  Problemi minori con la navigazione da tastiera, l’ordine di messa a fuoco o lo stile dell’indicatore di messa a fuoco che causano lievi inconvenienti ma non ostacolano in modo significativo la funzionalità o la comprensione. (ad esempio, un elemento decorativo nell’ordine di tabulazione, un salto di messa a fuoco leggermente non ottimale ma comunque logico, piccole incongruenze visive nell’indicatore di messa a fuoco che sono comunque ben al di sopra delle soglie AA).

Nota finale #

Un’accessibilità solida tramite tastiera, che comprenda una gestione precisa della messa a fuoco, un ordine logico di messa a fuoco, la completa assenza di ostacoli sulla tastiera e indicatori di messa a fuoco costantemente visibili, è un pilastro di un’esperienza digitale inclusiva. Questo test manuale è indispensabile per scoprire le barriere sottili ma critiche che gli strumenti automatizzati spesso non rilevano, poiché richiedono l’interazione umana e un giudizio visivo sfumato. Affrontando meticolosamente questi aspetti, i team possono garantire che le loro piattaforme siano completamente navigabili e utilizzabili da tutti gli utenti, consentendo a chi si affida esclusivamente all’interazione tramite tastiera di interagire senza problemi con contenuti e funzionalità digitali.