Come migliorare la navigazione da tastiera e rendere più accessibile una web app

Loock è una libreria open source che permette di realizzare facilmente un sistema di navigazione da tastiera per una web app o sito web, creando “contesti“ all’interno dei quali la navigazione degli elementi è controllata.

Also available in English.

La navigazione da tastiera è da sempre un problema.

Nello sviluppo di un’applicazione web, gli aspetti di accessibilità e in particolare della navigazione da tastiera sono tra i più sottovalutati. Al di là dell’attenzione posta da grandi aziende tech o da altre che si occupano di questo aspetto come proprio core-business, non è affatto facile trovare implementazioni convincenti.

In realtà, come vedremo, è un aspetto molto importante non solo per l’accessibilità ma in generale anche per l’usabilità di un’applicazione web.

Conoscere i propri utenti

Gli utenti alla ricerca di una buona una navigazione da tastiera possono essere divisi in due categorie:

• Quelli che ne hanno bisogno
• Quelli che la desiderano.

I primi sono utenti con disabilità, i quali in mancanza di una buona accessibilità non possono usufruire delle informazioni e delle funzionalità offerte da una pagina web; gli altri sono utenti che possono usare altre periferiche oltre alla tastiera ma preferiscono, più o meno regolarmente, utilizzare soltanto la tastiera per una migliore usabilità.

Queste due categorie hanno necessità molto differenti fra loro alle quali il sistema di navigazione da tastiera dovrebbe rispondere. In ogni caso, il primo passo per ottenere una buona navigazione da tastiera è un sistema che “blocchi” la navigazione all’interno di contesti — aree semantiche della pagina. Vediamo come.

Contesti

Provando a muoversi con l’ausilio della sola tastiera, su una pagina web qualsiasi, la prima sensazione è quella di sentirsi disorientati appena si inizia a premere “TAB”. Dopo pochi istanti è abbastanza comune non capire dove si trovi il cursore all’interno della pagina.

Alcuni siti web hanno implementato un sistema in cui al primo “TAB” la pagina mostra un bottone, che appare soltanto in tale circostanza, che permette facilmente di spostarsi in specifici contesti della pagina. Questo può essere utile per pagine web molto complesse con un alto numero di aree diverse fra loro (ad esempio un’area contenuti, un’area notifiche, ecc.).

Github.com mostra un bottone per passare facilmente all’area contenuti.

Purtroppo questo non basta per garantire all’utente un buon sistema di navigazione da tastiera; è necessario “contestualizzare” la pagina web. Questo significa fare in modo che la navigazione, all’interno dei contesti, risulti controllata e non fluisca al di fuori senza che sia l’utente a deciderlo.

I contesti rappresentano aree semanticamente contenute nella pagina. Elementi web come i menu, le “toolbar”, le barre per le notifiche e le finestre di dialogo, sono considerabili come contesti. Ogni volta che l’utente vi entra, si aspetta di navigare tra gli elementi al suo interno premendo TAB ripetutamente, senza il rischio di uscire dal contesto per un “TAB di troppo”.

Ad esempio, prendiamo il caso di un utente non vedente che vuole per prima cosa navigare tutti gli elementi all’interno di una certa area, ascoltando da uno screen reader le varie opzioni disponibili, prima di sceglierne una. Probabilmente non apprezzerà il fatto che dopo un certo numero di TAB il “focus” (l’elemento attualmente selezionato) si sposti fuori dall’area. Questo accade spesso con le finestre di dialogo nelle quali, se non è presente un sistema che blocca la navigazione, il focus può spostarsi agli strumenti e alle finestre del browser o, peggio, sotto la finestra di dialogo aperta, rendendo impossibile continuare la navigazione.

Per uscire da un contesto possiamo creare dei pulsanti ad hoc (come i bottoni “Chiudi” o “Annulla” tipici delle finestre di dialogo) e consentire lo stesso comportamento premendo il pulsante ESC.

In Chialab abbiamo realizzato una libreria open source che permette facilmente di sviluppare un sistema di navigazione da tastiera contestualizzato. Vediamo nel dettaglio cosa offre e come la si può integrare in un progetto.

Loock

Loock è stato progettato per rendere semplice sviluppare un sistema di navigazione “contestualizzato” ed organizzare le pagine web in aree semantiche. In questo modo l’utente può navigare in maniera più naturale, seguendo il flusso “semantico” degli elementi.

Senza Loock, la navigazione segue l’ordine visuale degli elementi della pagina. Per capire meglio la problematica, si provi a navigare la toolbar nell’esempio che segue. Il bottone di forma circolare “a11y” se premuto apre la toolbar. Si acquisisca il focus sulla pagina web d’esempio tramite click del mouse, per poi provare a muoversi soltanto con la tastiera.

Sistema di navigazione senza utilizzare Loock.

È chiaro che senza un sistema di contestualizzazione e di “blocco” della navigazione, quest’ultima risulta molto complessa. Si provi ora a compiere le stesse azioni nell’esempio seguente. In quest’ultimo è stato utilizzato il sistema di Loock.

Sistema di navigazione utilizzando Loock.

L’esperienza risulta completamente diversa: l’utente può navigare nei contesti senza perdere il focus nell’area, ed uscirne, in questo caso, premendo “ESC”. Se l’utente esce dall’unico contesto aperto, il sistema attuerà un “fallback” che attiverà il contesto di default, che va precedentemente definito.

Vediamo nel dettaglio come è possibile implementare un sistema di navigazione da tastiera, come quello appena visto, utilizzando Loock.

Dettagli tecnici

Loock fornisce un set di API Javascript molto semplice ed intuitivo. È importante conoscere alcuni aspetti “teorici” prima di passare all’implementazione:

• Loock si basa su contesti. Un contesto è definito da un insieme di elementi che l’utente può navigare con TAB senza perdere il focus, ed uscirne premendo ESC
• Il contesto di default è usato come contesto di “fallback” nel momento in cui l’utente esce dall’unico contesto attivo. Se nessun contesto di default viene definito, una volta usciti dal contesto attivo il flusso di navigazione si sposterà così come accadrebbe se non ci fosse Loock
• Ogni volta che si entra o si esce da un contesto, Loock emette un evento. Questo torna utile per cambiare gli elementi della GUI, ad esempio
• Bisogna “attivare” i contesti prima di utilizzarli — ma ciò non è necessario per il contesto di default.

Vediamo un po’ di codice ora. Di seguito, un’implementazione di un semplice sistema di navigazione con Loock dove vengono mostrate tutte le funzionalità fornite.

<html>
    <body>
        <nav id="navigation" aria-label="Main navigation">
            <a href="/">Home</a>
            <a href="/posts">Posts</a>
            <a href="/login">Login</a>
        </nav>
        <section id="main" aria-label="Main content">
            ...
        </section>
<script type="module">
            import Loock from '@chialab/loock';
            const loock = new Loock();
            
            // define the default context
            const mainContext = loock.createDefaultContext(document.getElementById('main'));
           
            // define one context
            const context = loock.createContext(document.getElementById('navigation'));
// listen the context events
            context.on('enter', () => {
               console.log('entered the navigation context');
               // do stuff you like
            });
            context.on('exit', () => {
               console.log('exited the navigation context');
               // do stuff you like
            });
// activate the context
            context.enter();
        </script>
    </body>
</html>

Per approfondire il sistema di Loock, è disponibile il repository open source su Github. Ogni contributo è ben accetto e ci aiuterà a rendere lo strumento migliore grazie al feedback della community Open Source.

Chialab è uno studio di design. Creiamo relazioni tra cose e persone curando strategia, progetto, software e contenuti.

https://www.chialab.it.