Personal tools
Navigazione da tastiera: alcuni consigli per migliorare l'accessibilità

"tabbare" non è mai stato così bello

Jan 22, 2014

Navigazione da tastiera: alcuni consigli per migliorare l'accessibilità

Bastano pochi semplici accorgimenti per migliorare (di molto) l'accessibilità e la leggibilità di un portale. Ecco un paio di utili consigli per farlo

Lavorando spesso (se non sempre) alla creazione di portali per la Pubblica Amministrazione, un aspetto fondamentale da tenere presente è la loro accessibilità e usabilità anche da parte di utenti con disabilità.

Dopo una recente verifica di accessibilità su un portale sviluppato per un cliente, il buon @jdeyla mi ha suggerito due soluzioni proposte da un sito che si occupa proprio di accessibilità (webaim) che hanno migliorato di gran lunga l'esperienza utente nel nostro portale. Vediamo di che si tratta.

"Skip Navigation" Links

Dicesi tabbare, l'azione di premere il tasto "tab" della tastiera

Il portale in questione ha un complesso menu di navigazione in testata (realizzato con quintagroup.dropdownmenu) e gli utenti che si trovavano a navigare da tastiera erano obbligati a "tabbare" una serie infinita di volte per uscire da quel menu e arrivare finalmente al contenuto principale della pagina.
Per questo motivo è stata adottata la tecnica degli skip navigation links.

Essa consiste nel posizionare un link in cima alla pagina che permetta di saltare l'intero menu di navigazione e di posizionarsi direttamente sul contenuto principale.
Visto che il link deve essere visualizzato solamente quando si naviga da tastiera, va nascosto (agli utenti normali non serve vederlo) e reso visibile quando riceve il focus attraverso alcune semplici regole CSS.

Per approfondire i dettagli tecnici e vedere un esempio pratico, vi rimando al relativo articolo di webaim. Se provate a muovervi con il tab, infatti, vedrete il link apparire a lato della pagina.
In quell'articolo è anche presente un riferimento a un'altra risorsa con alcuni consigli su come nascondere un elemento via CSS.

C'è inoltre da tenere conto che alcuni browser (io l'ho notato con Chrome), sebbene spostino la visualizzazione della pagina nel punto giusto, non danno il focus a quell'elemento. Ciò ha lo spiacevole inconveniente che se si prova a navigare da tastiera, la navigazione riprende dall'inizio della pagina e non dal punto desiderato.

La soluzione è semplice: basta aggiungere una riga di javascript che forza il focus una volta cliccato sul relativo link.

Maggiore visibilità degli elementi con focus

focus memeMentre si naviga da tastiera, non c'è cosa più fastidiosa del non sapere in che punto della pagina è attivo il focus. Spesso lo stile applicato al focus è simile a quello del mouseover e quindi poco evidente (dopotutto, se stai puntando con il mouse, sai dove sei) o addirittura nullo.

Il secondo "trucchetto" è quindi quello di rendere il più evidente possibile l'elemento che ha ricevuto il focus, per aiutare gli utenti a orientarsi nella pagina.

Per fare questo basterebbe dare un colore di sfondo all'elemento con il focus che lo evidenzi rispetto al resto del testo.
Ma se si vuole marcare ancora di più l'elemento, si può utilizzare una semplice libreria js che crea un'utilissima animazione a ogni tab della tastiera.

Questo js funziona correttamente con i browser più moderni, ma non va su IE (8 e 9 di sicuro), in quanto utilizza un metodo (addEventListener) che non è supportato da quel browser.
Volendo, è possibile abilitare questa feature su tutti i siti in cui si naviga, installando il relativo plugin disponibile per Chrome e Safari.

In conclusione, con questi due accorgimenti è possibile migliorare di molto l'esperienza di un utente che naviga da tastiera. Considerando l'esperienza positiva, sto anche pensando di creare un prodotto per Plone che integri quella libreria javascript, magari aumentando anche la compatibilità con IE.

comments powered by Disqus