La gestione del focus è fondamentale per assicurare l’usabilità di un prodotto digitale e, soprattutto, la sua accessibilità. Eppure, è spesso trascurata. In questo blog post analizzeremo i problemi più comuni legati alla gestione del focus, il loro impatto su diversi tipi di utenti e come testarli.
Quando progettiamo o sviluppiamo un nuovo sito web o un’applicazione, tendiamo a prestare poca attenzione alla gestione degli elementi in focus. Perché? Perché il focus non è qualcosa che di solito vediamo. Eppure, è uno degli elementi più importanti per garantire l’usabilità e l’accessibilità di un prodotto digitale.
Parafrasando Jared Spool1, una buona gestione del focus, quando fatta bene, diventa invisibile. È solo quando è fatta male che la notiamo.
Ti è mai capitato di compilare un modulo, premere il tasto tab per passare al campo successivo e scoprire di non essere finito dove ti aspettavi? Questo è un classico esempio di cattiva gestione del focus.
In questo blog post vedremo i problemi più comuni di gestione del focus che abbiamo notato durante i nostri audit di accessibilità, il loro impatto sui diversi tipi di utenti e come verificarli.
Come nell’esempio appena citato, chiunque può incontrare problemi con il focus. Tuttavia, se navighiamo con il mouse, potremmo non accorgerci se la gestione è buona o meno.
Ci sono però gruppi specifici di persone che sono molto penalizzati da una gestione inadeguata:
Gli aspetti del focus che possono influenzare l’esperienza di navigazione di questi utenti sono:
“Ma non avevi detto che una buona gestione del focus è invisibile?”
Sì, ma il focus in sé non lo è.
Il focus è uno stato che, durante la navigazione con il mouse, tendiamo a notare solo quando stiamo digitando in un campo di un form. Lo stile di focus predefinito del browser non è esattamente il più bello del web, e per questo molti designer preferiscono rimuoverlo del tutto.
Se clicchi su un campo di testo, è ovvio che inizierai a scrivere lì. Ma se ci arrivi navigando con la tastiera? Come fai a sapere dove ti trovi?
La risposta sta nello stato di focus. Senza questo stato, chi usa la tastiera o altre tecnologie assistive non ha idea di dove si trovi nella pagina.
Per questo è fondamentale includere uno stato di focus per ogni elemento interattivo dell’interfaccia. Magari con uno stile più gradevole di quello di default (anche le persone con disabilità hanno diritto a interfacce belle!).
A questo punto, dovresti avere un’idea chiara di come funziona il focus. Se la visibilità del focus è il “tu sei qui” su una mappa, l’ordine del focus è l’elenco delle fermate della metro.
Pensala così: quando prendi la metro, guardi la mappa con le fermate. Se a Milano sali alla fermata Duomo, ti aspetti che la prossima sia San Babila. Se invece ti ritrovi da un’altra parte, rimani spiazzato.
Gli utenti che navigano con la tastiera vedono gli elementi dell’interfaccia e si aspettano che la loro navigazione segua lo stesso ordine visivo, così da poter prevedere dove atterreranno. Se l’ordine del focus è gestito male, perdono questa prevedibilità e devono procedere alla cieca finché non trovano l’elemento che cercano. Per chi usa tecnologie assistive a causa di difficoltà motorie, questo può essere un enorme ostacolo, in quanto potrebbero necessitare di molto tempo per raggiungere l’elemento di loro interessa.
Tornando all’esempio della metro, immagina di trovarti in questa situazione e di essere non vedente. Chi usa uno screen reader non può nemmeno vedere gli elementi dell’interfaccia, è quindi fondamentale che l’ordine del focus isa logico e prevedibile.
Per assicurarsi che l’ordine del focus sia corretto, esistono strumenti che mostrano la sequenza con cui gli elementi prendono il focus, così da verificare che corrisponda a ciò che ci si aspetterebbe guardando la pagina.
In Buildo per verificare l’ordine del focus utilizziamo l’estensione per Chrome Taba11y. (Se vuoi saperne di più su come testiamo l’accessibilità a Buildo, leggi il nostro case study).
Altri due errori comuni nella gestione del focus sono le keyboard trap e gli elementi nascosti ma che prendono il focus.
Una keyboard trap si verifica quando l’utente non può uscire da un elemento usando la tastiera, rimanendo intrappolato al suo interno. Questo può accadere, per esempio, con campi select mal progettati, in cui non si riesce più a uscire dal menu del componente.
Degli elementi nascosti possono prendere il focus quando sono nascosti alla vista ma presenti nella pagina, senza che il loro focus venga gestito. Quando questi elementi non visibili prendono il focus, creano confusione e interrompono la sequenza di navigazione. In questo caso, l’utente non può vedere dove si trova il focus, perché l’oggetto attivo non è visibile.
Un esempio può essere il contenuto interno ad un accordion, che acquisisce focus senza essere aperto. Un componente che richiede particolare attenzione alla gestione del focus è la modale.
Quando si sviluppa una modale, è necessario “intrappolare” il focus al suo interno (una specie di keyboard trap voluta!), impedendogli di passare ad elementi sotto l’overlay.
Questi controlli sono sufficienti per rendere un prodotto navigabile tramite tastiera o tecnologie assistive.
Ma c’è differenza tra “poter navigare” e “avere una buona user experience”. Un ulteriore ostacolo per questi utenti sono i lunghe liste di elementi interattivi che non fanno parte del contenuto principale della pagina, come menu molto estesi, menu laterali o gruppi complessi di filtri.
A nessuno piacciono i menu con diciotto voci, ma per chi deve passarli uno a uno perché non può saltare direttamente al contenuto principale, l’esperienza diventa ancora più pesante — soprattutto se questo va ripetuto a ogni pagina.
Per questo è essenziale includere un pulsante che porti l’utente direttamente al contenuto principale con un solo click.
”Oh no, ma un link sopra il menù è orrendo!
Per tua fortuna, non serve che questo link sia visibile a tutti: può comparire solo quando si naviga con la tastiera o con una tecnologia assistiva.
In alcuni casi, è utile inserire un link non solo per saltare direttamente al contenuto principale, ma anche link diretti alle varie sezioni della pagina, oppure per saltare gruppi estesi di elementi interattivi (ad esempio gallery di immagini).
In sintesi, una gestione corretta del focus è fondamentale per molti utenti che altrimenti verrebbero esclusi dalla possibilità di interagire con il tuo prodotto.
La cosa positiva è che, se i componenti e le pagine vengono configurati correttamente fin dall’inizio, non serve alcuno sforzo extra per garantire una navigazione fluida. Spesso, infatti, gli errori nascono da interventi non necessari più che dalla mancanza di intervento (ad esempio l’uso improprio dell’attributo tabindex).
Dare alla gestione del focus la giusta attenzione sin dall’inizio significa garantire un’esperienza più accessibile e usabile per tutti, indipendentemente dal modo in cui navigano.
1 “Good design, when it’s done well, becomes invisible. It’s only when it’s done poorly that we notice it” Jared Spool, approfondisci su https://www.uie.com/
Sara is a designer at Buildo, specializing in User Research and UX. Her passion for research enables her to gain a deep understanding of users' needs and translate them into intuitive and user-friendly designs.
Stai cercando un partner affidabile per sviluppare la tua soluzione software su misura? Ci piacerebbe sapere di più sul tuo progetto.
