5 passaggi per progettare app pensando all'accessibilità da tastiera

Quando pensiamo all'utente “medio”, tendiamo a immaginarlo mentre utilizza un mouse o un trackpad quando è al computer. Ma cosa succederebbe se la loro opzione preferita o unica fosse usare una tastiera? Hai pensato di progettare le tue app pensando all'accessibilità da tastiera?

Ci sono molte ragioni per cui qualcuno potrebbe non voler o non essere in grado di utilizzare un mouse o un trackpad per utilizzare il proprio computer. Possono avere condizioni permanenti, croniche o temporanee che limitano la loro destrezza o il controllo muscolare, causando sensibilità ai polsi o alle mani o rendendo difficile seguire il cursore del mouse su uno schermo. Potrebbero anche essere "utenti esperti" alla ricerca di più scorciatoie per semplificare i loro flussi di lavoro. In ognuno di questi casi, le tastiere potrebbero essere il mezzo preferito o necessario di un individuo per interagire con la tecnologia.

In questo articolo imparerai le linee guida sull'accessibilità della tastiera, oltre a cinque passaggi da tenere a mente durante la progettazione di app per assicurarti che siano accessibili dalla tastiera.

Come funziona l'accessibilità da tastiera?

Se un'app è accessibile da tastiera, ciò significa che le persone hanno la possibilità di utilizzare solo una tastiera per azionare gli elementi di controllo . Gli elementi di controllo sono tutti i componenti interattivi sulla pagina, come pulsanti, collegamenti, input di moduli, video e altri contenuti interattivi.

Nozioni di base sulla navigazione da tastiera

Ecco alcuni tasti di base utilizzati per la navigazione da tastiera:

• Navigazione all'elemento di controllo successivo: Tab (o il tasto freccia destra o giù per i pulsanti di opzione correlati e selezionare le opzioni)
• Navigazione verso l'elemento di controllo precedente: Maiusc + Tab (o il tasto freccia sinistra o su per i pulsanti di opzione correlati e selezionare le opzioni)
• Facendo clic su un elemento di controllo: Invio e/o barra spaziatrice
• Navigazione tra pulsanti di opzione correlati o selezione di opzioni: Tasti freccia

Ordine di messa a fuoco

La sequenza in cui gli elementi di controllo possono rispondere agli eventi della tastiera è nota come focus order . Quando un elemento è focalizzato, puoi interagire con esso utilizzando determinati controlli da tastiera. Quando un elemento perde la messa a fuoco, diventa sfocato. I browser eseguono il rendering degli stati di attivazione predefiniti per aiutare gli utenti a tenere traccia di quale elemento è attualmente attivo.

Ti potrebbe piacere anche: Universal Design: 11 consigli pratici per rendere più accessibili i tuoi siti e le tue app.

Accessibilità da tastiera e Linee guida per l'accessibilità dei contenuti Web (WCAG)

Le Web Content Accessibility Guidelines (WCAG) delineano tre livelli di conformità—Livello A, Livello AA e Livello AAA—che sono stati adottati come standard per le leggi regionali o nazionali sull'accessibilità del web in tutto il mondo.

L'accessibilità da tastiera è uno dei criteri di successo per la conformità al Livello A. I criteri di livello A descrivono le caratteristiche indispensabili per tutti i contenuti web. Sono anche considerati i più facili da implementare.

"Anche l'accessibilità della tastiera è facile da sbagliare se non stiamo attenti."

Detto questo, anche l'accessibilità da tastiera è facile da sbagliare se non stiamo attenti. Ecco alcuni esempi di problemi comuni di accessibilità della tastiera riscontrati sul Web:

• Stati di messa a fuoco impercettibili
• Ordine di messa a fuoco errato
• Elementi interattivi che non possono ricevere lo stato attivo
• Componenti complessi che non raccolgono interazioni da tastiera

Fortunatamente, ci sono molte tecniche che possiamo usare per tenere a mente gli utenti di tastiera ed evitare di commettere questi errori nelle nostre app.

5 passaggi per la creazione di app accessibili da tastiera

1. Progettare interazioni intuitive

Quando eseguiamo il rendering di elementi di controllo semplici senza comportamenti personalizzati, di solito possiamo sfruttare le loro funzionalità di accessibilità da tastiera integrate. Tuttavia, se non conosciamo i comportamenti standard della tastiera associati a pulsanti, collegamenti o input, potremmo inavvertitamente creare esperienze confuse per gli utenti della tastiera.

"Se non conosciamo i comportamenti standard della tastiera associati a pulsanti, collegamenti o input, potremmo inavvertitamente creare esperienze confuse per gli utenti della tastiera."

Ad esempio, gli sviluppatori a volte usano i CSS per nascondere i pulsanti di opzione HTML nativi a favore di elementi visivi più stilizzati. Non è ovvio che gli input siano pulsanti di opzione dietro le quinte, quindi gli utenti della tastiera potrebbero non rendersi conto che dovrebbero usare i tasti freccia, non il tasto Tab, per spostare lo stato attivo tra le opzioni correlate.

Per evitare questo problema, dovremmo visualizzare qualcosa che assomigli almeno all'elemento HTML nativo per fornire indicazioni visive a chiunque desideri o abbia bisogno di interagire con esso utilizzando una tastiera.

2. Crea la tua app in modo che una tastiera possa fare tutto ciò che può fare un mouse

Fai attenzione agli elementi che non sono dotati di funzionalità di accessibilità della tastiera integrate. Elementi di layout, elenchi, tabelle, intestazioni, paragrafi e tag HTML non semantici non supportano le scorciatoie da tastiera per impostazione predefinita. Eppure, vengono spesso utilizzati per creare componenti più complessi, come schede, elenchi di trascinamento della selezione o modali.

JavaScript ci consente di aggiungere listener di eventi che fanno rispondere gli elementi non di controllo ai clic o ai gesti del mouse. In React, ad esempio, possiamo utilizzare l'elica onClick per aggiungere interattività a un elemento di una voce di elenco.

Ogni volta che aggiungiamo interattività a elementi non di controllo, dobbiamo impostare il loro attributo tabIndex su 0 . Ciò consentirà all'elemento di ricevere il focus nell'ordine di focus corretto quando viene premuto il tasto Tab. Abbiamo anche bisogno di implementare gestori di eventi keypress o keydown per registrare i "clic" tramite il tasto Invio e/o la barra spaziatrice (è possibile fare clic sui collegamenti utilizzando entrambi, mentre i pulsanti supportano solo il tasto Invio).

Possiamo evitare parte di questo lavoro extra utilizzando invece controlli come tag di ancoraggio o elementi pulsante. Possiamo sempre utilizzare i CSS per sovrascrivere gli stili predefiniti di link e pulsanti e fare in modo che l'elemento interattivo si estenda per l'intera larghezza del suo genitore non interattivo per massimizzare l'area di destinazione.

Indipendentemente dal fatto che utilizziamo elementi di controllo per funzionalità non native, potremmo comunque aver bisogno di aggiungere listener di eventi per i tasti freccia (per navigare tra le schede in un componente scheda) o il tasto Esc (per chiudere una sovrapposizione) per rendere il nostro componente 100 percentuale di tastiera accessibile.

Se implementiamo comportamenti della tastiera non standard per un componente più complesso, è utile fornire istruzioni visibili che descrivano i controlli della tastiera che le persone possono utilizzare per interagire con il componente.

3. Fai il lavoro extra quando sovrascrivi l'ordine di messa a fuoco predefinito

L'ordine di attivazione è un altro requisito WCAG strettamente correlato all'accessibilità da tastiera. Per soddisfare i criteri di livello A, l'ordine del focus deve essere coerente con la sequenza visiva degli elementi interattivi sulla pagina. Gli utenti della tastiera dovrebbero essere in grado di navigare attraverso gli elementi di controllo sullo schermo dall'alto verso il basso e nella stessa direzione orizzontale del contenuto del testo (da sinistra a destra o da destra a sinistra).

Il modo più semplice per soddisfare questi criteri è lasciare l'ordine di focus predefinito, che è determinato dalla sequenza in cui gli elementi sono disposti nel markup , così com'è. Corriamo il rischio di non soddisfare questi criteri quando introduciamo discrepanze tra l'ordine visivo degli elementi di controllo e il modo in cui sono disposti nel codice sorgente.

Potrebbe piacerti anche: Creazione di una navigazione breadcrumb accessibile con Liquid e Shopify.

Se usiamo lo screenshot sopra come esempio, supponiamo di volere che la scheda "Aggiorna tag" cambi posizione con la scheda "Aggiorna descrizione" quando si sovrappongono per finestre più strette. Se le carte vengono visualizzate come elementi flessibili, potremmo prendere in considerazione l'utilizzo della proprietà CSS order per modificare la loro sequenza in corrispondenza di un punto di interruzione specifico.

Sebbene la proprietà order influisca sulla sequenza visiva degli elementi flessibili, non aggiorna la loro disposizione nel codice sorgente. Di conseguenza, quando un utente preme il tasto Tab per spostarsi tra i pulsanti, il pulsante "Aggiorna tag" continuerà a ricevere lo stato attivo prima di "Aggiorna descrizione", anche se vengono visualizzati in ordine inverso sullo schermo. Ciò fa sì che l'attenzione si sposti inaspettatamente su e giù per la pagina, creando un'esperienza disorientante per l'utente.

Un modo per evitare questo problema è eseguire il rendering di due versioni delle schede nel markup: una nell'ordine previsto per larghezze di visualizzazione più ampie e un'altra nell'ordine desiderato per larghezze di visualizzazione più strette. Possiamo usare la proprietà display per passare da uno all'altro in determinati punti di interruzione.

Se non vogliamo mantenere due versioni nel markup, dovremo utilizzare JavaScript per aggiornare gli attributi tabIndex delle schede man mano che si impilano sulla pagina. A seconda del numero di elementi di controllo che stiamo rendendo, questo approccio potrebbe essere più difficile da ottenere rispetto al mantenimento di versioni diverse delle carte nel markup.

4. Quando si personalizzano gli stati di messa a fuoco, progettare per gli utenti che ne hanno più bisogno

I browser usano la proprietà CSS outline per rendere una sorta di indicazione visiva che un elemento è a fuoco. Gli stati di attivazione hanno lo scopo di aiutare gli utenti a identificare quale elemento registrerà gli eventi della tastiera mentre navigano nella pagina con una tastiera.

È molto comune per designer e sviluppatori sostituire gli stati di attivazione predefiniti resi dai browser. Ciò potrebbe comportare l'aggiornamento del outline predefinito o la sua rimozione completa e la sua sostituzione con un'altra proprietà CSS, ad esempio background , border , box-shadow , color o transform .

Ti potrebbe piacere anche: Creazione di un'impaginazione accessibile con Liquid.

Tuttavia, decidiamo di rendere gli stati di attivazione personalizzati nelle nostre app, dobbiamo assicurarci che soddisfino i seguenti requisiti di accessibilità:

• Contrasto cromatico sufficiente: dovrebbe esserci abbastanza contrasto tra il nostro stato di messa a fuoco e i colori che lo circondano in modo che gli utenti ipovedenti possano facilmente tenere traccia di quale elemento è attualmente a fuoco.
• I cambiamenti di colore sono abbinati ad altri indicatori visivi: la modifica del colore del bordo, del carattere o dello sfondo di un elemento potrebbe non essere visibile agli utenti con daltonismo. Dovrebbe essere abbinato ad altre modifiche visive che non richiedono agli utenti di essere in grado di distinguere i colori. Ciò vale anche per gli stati di passaggio del mouse e di errore che comportano cambiamenti di colore.
• Visibile nei temi a contrasto elevato: alcune proprietà CSS, tra cui background e box-shadow , vengono ignorate quando la modalità a contrasto elevato è abilitata sui dispositivi Windows. Anche i cambiamenti di colore potrebbero non essere registrati, motivo per cui è doppiamente importante fare affidamento su indicatori aggiuntivi che siano percepibili da persone che necessitano di maggiore contrasto tra i colori di sfondo e quelli di primo piano.

Sebbene sia accettabile eseguire l'override della proprietà outline predefinita, non rimuovere mai gli stati di attivazione predefiniti senza fornire una sostituzione.

5. Fornire scorciatoie per gli utenti della tastiera

Se qualcuno utilizza un mouse per navigare in una pagina Web, può scorrere oltre il contenuto dell'intestazione estraneo quando la pagina viene caricata per raggiungere le informazioni che sta cercando. Il processo non è così semplificato per gli utenti di tastiera, che potrebbero dover scorrere più collegamenti di navigazione o qualsiasi altro elemento di controllo che precede il contenuto principale della pagina.

In qualità di sviluppatori, possiamo fornire un "collegamento per saltare" nella parte superiore di ogni pagina della nostra app per consentire agli utenti della tastiera di ignorare gli elementi di controllo che precedono il contenuto principale della pagina. Il link di salto è in genere nascosto alla vista fino a quando non riceve lo stato attivo. Non è visibile alle persone che utilizzano un mouse per interagire con la tua app, ma sarà il primo elemento a ricevere il focus per coloro che utilizzano una tastiera.

Quando si fa clic sul collegamento, lo stato attivo si sposta sul contenitore di contenuto principale e gli utenti della tastiera possono iniziare immediatamente a scorrere i principali elementi di controllo su una pagina.

Gli skip link sono più che comode scorciatoie. Sono un esempio di blocchi di bypass, che devono soddisfare gli standard WCAG di livello A.

Testa spesso la tua app diventando tu stesso un utente della tastiera

Testare l'accessibilità della tastiera ha una curva di apprendimento relativamente più bassa per le persone che non sono abituate a utilizzare tecnologie o dispositivi assistivi. Tutto ciò di cui hai bisogno è l'accesso a una tastiera, la familiarità con i comportamenti standard della tastiera e l'accesso alla modalità a contrasto elevato di Windows (acquisendo un dispositivo Windows o installando una macchina virtuale).

Ecco alcune domande da tenere a mente mentre testiamo la nostra app per l'accessibilità da tastiera:

• Posso usare la mia tastiera per interagire con qualsiasi cosa che risponda ai clic e ai gesti del mouse?
• Qualcuno saprà come interagire con questo elemento quando riceve il focus?
• L'ordine del focus corrisponde alla sequenza visiva degli elementi interattivi sulla pagina?
• Posso tenere traccia di quale elemento è attualmente a fuoco, anche se richiedo un contrasto maggiore tra i colori?
• Posso accedere facilmente al contenuto principale della pagina?

Rispondere "sì" a tutte queste domande non richiede molto sforzo e può avere effetti positivi per gli utenti in qualsiasi circostanza: che abbiano una disabilità fisica, siano alla ricerca di modi per risparmiare tempo o debbano utilizzare il computer con una mano.

I test di accessibilità sono una componente cruciale dello sviluppo delle app. Nello specifico, l'accessibilità da tastiera è importante tanto quanto fornire testo alternativo per le persone che utilizzano lettori di schermo o didascalie per le persone che non possono ascoltare i contenuti audio. Alla fine della giornata, la possibilità di utilizzare un mouse non dovrebbe essere richiesta per utilizzare un'app se desideri che la tua app sia completamente accessibile.