La gestione del focus è fondamentale per assicurare l'usabilità di un prodotto digitale e, soprattutto, la sua accessibilità. Eppure è spesso trascurata. Analizziamo i problemi più comuni legati alla gestione del focus, il loro impatto sui diversi tipi di utenti e come testarli.
Sara Bianchini Quando progettiamo e sviluppiamo un nuovo sito web o un’applicazione prestiamo poca attenzione alla gestione degli elementi in focus. Perché? Perché il focus non è qualcosa che vediamo in modo esplicito. Eppure è uno degli elementi più importanti per garantire l’usabilità e, soprattutto, 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 form, premere Tab per passare al campo successivo e scoprire di non essere finito dove ti aspettavi? È un classico esempio di cattiva gestione del focus.
In questo articolo vediamo i problemi più comuni di gestione del focus che abbiamo notato durante i nostri accessibility assessment, il loro impatto sui diversi tipi di utenti e come verificarli.
Come nell’esempio precedente, chiunque può incontrare problemi con il focus. Se però navighiamo con il mouse, non sempre ci accorgiamo se la gestione del focus è buona o scadente.
Ci sono comunque gruppi specifici di persone molto più penalizzati da una gestione inadeguata del focus:
Io quando il touchpad non funziona e trovo una keyboard trap
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, navigando con il mouse, tendiamo a notare solo quando stiamo scrivendo in un campo di un form. Lo stile di focus predefinito non è il più bello del web, e per questo molti designer scelgono semplicemente di eliminarlo.
Se hai cliccato su un campo di un form è ovvio che scriverai lì. Ma se ci sei arrivato navigando con il tasto Tab della tastiera? Come fai a sapere dove ti trovi?
La risposta sta nello stato di focus. Senza questo stato, chi naviga con la tastiera o con altre tecnologie assistive non ha idea di dove si trovi nella pagina.
Per questo includere uno stato di focus per ogni elemento interattivo dell’interfaccia è fondamentale. Magari con uno stile più gradevole di quello predefinito (anche le persone con disabilità hanno diritto a interfacce belle!).
Lo stile del focus nel design system Bento DS
A questo punto dovresti avere un’idea chiara di come funziona il focus. Se la visibilità del focus è il segnaposto “tu sei qui” su una mappa, l’ordine del focus è l’elenco delle fermate della metro.
Pensala così: quando arrivi in metro guardi la mappa con l’elenco delle fermate. Se sei a Milano e sali alla fermata Duomo, ti aspetti che la prossima sia San Babila. Se invece ti ritrovassi da un’altra parte, resteresti giustamente spiazzato.
Gli utenti che navigano da tastiera vedono gli elementi dell’interfaccia e si aspettano quindi che la navigazione segua lo stesso ordine, così da poter prevedere dove atterreranno. Se l’ordine del focus è gestito male, perdono questa prevedibilità: devono procedere avanti sperando di arrivare prima o poi sull’elemento che cercano. Per chi usa la tastiera questa esperienza può essere frustrante, ma per chi usa tecnologie assistive a causa di difficoltà motorie è un ostacolo reale, che può richiedere molto tempo per raggiungere l’elemento di interesse.
Tornando all’esempio della metro, immagina che accada e di avere una disabilità visiva. Chi naviga con uno screen reader non ha nemmeno la possibilità di vedere gli elementi dell’interfaccia nella pagina: per queste persone è quindi ancora più indispensabile che l’ordine del focus segua una sequenza logica e prevedibile.
Per assicurarsi che l’ordine del focus sia corretto esistono strumenti che mostrano la sequenza con cui gli elementi dell’interfaccia prendono il focus. Questo permette di verificare che l’ordine corrisponda a quello che ci si aspetterebbe guardando la sequenza mostrata dallo strumento.
In Buildo usiamo Taba11y, un’estensione per Chrome, per verificare l’ordine del focus. (Se vuoi saperne di più su come testiamo l’accessibilità in Buildo, leggi il nostro case study).
L’estensione Taba11y usata sul sito di Buildo
Altri due errori comuni nella gestione dell’ordine del focus sono le keyboard trap e gli elementi nascosti che possono ricevere il focus.
Una keyboard trap si verifica quando l’utente non riesce a spostarsi via da un elemento specifico usando la tastiera, restando di fatto intrappolato al suo interno. Può succedere, per esempio, con campi select mal progettati, in cui l’utente non riesce più a uscire dal menu del componente.
Gli elementi nascosti che possono ricevere il focus sono elementi non visibili ma comunque focalizzabili , e generano confusione interrompendo la sequenza di navigazione. In questo caso l’utente non riesce a vedere dove si trova il focus, perché l’oggetto attivo non è visibile: non sa quindi dove si trova nell’interfaccia né come uscirne. Un esempio di elementi nascosti che possono ricevere il focus per errore è il contenuto interno a un accordion.
Un componente che pone potenziali problemi di gestione del focus è la modale. Quando si sviluppa una modale bisogna ricordarsi di “intrappolare” il focus al suo interno (una keyboard trap al contrario!), impedendogli di spostarsi sugli elementi che si trovano sotto l’overlay.
Qui il focus è sul campo di testo sotto la modale, quindi è impossibile proseguire
Questi controlli sono sufficienti a rendere il prodotto navigabile per chi usa la tastiera o le tecnologie assistive (invece di lasciare tanti poveri utenti a vagare persi nei tunnel della metro…).
C’è però una differenza tra “poter navigare” e “avere una buona user experience”. Per questa categoria di utenti esiste un altro ostacolo: i gruppi estesi di elementi interattivi che non sono il contenuto principale della pagina. Parlo di menu sovraccarichi, menu laterali o gruppi di filtri molto ampi.
Dato per scontato che a nessuno piacciono i menu con diciotto voci, possono risultare ancora meno attraenti per chi deve percorrerli uno per uno perché non può semplicemente scorrere fino al contenuto principale. È particolarmente noioso se questo va ripetuto per ogni pagina visitata.
Per questo è essenziale includere una scorciatoia che porti l’utente al contenuto principale della pagina con un solo click.
“Oh no, ma a me un link sopra il menu non piace!”
Il tanto vituperato skip link
Per tua fortuna questo link non deve essere visibile a tutti! La funzionalità deve essere disponibile per gli utenti che ne hanno bisogno, comparendo solo quando si naviga da tastiera o con una tecnologia assistiva.
A proposito: a volte può essere utile che questa funzionalità non offra solo una scorciatoia al contenuto principale, ma anche link alle varie sezioni che compongono la pagina, soprattutto se è piuttosto estesa. Questa strategia porta subito l’utente al contenuto che gli interessa.
Il sito di AgID mostra il link solo quando si naviga da tastiera
In conclusione, una corretta gestione del focus è essenziale per molti utenti, che altrimenti sarebbero completamente esclusi dalla possibilità di interagire con il tuo prodotto.
La cosa positiva della gestione del focus è che, se componenti e pagine sono impostati correttamente dall’inizio, non serve alcuno sforzo aggiuntivo per garantire un’esperienza di navigazione fluida. Spesso, infatti, gli errori nascono da interventi non necessari più che dalla loro assenza (per esempio l’uso improprio dell’attributo tabindex).
Dando alla gestione del focus l’attenzione che merita sin dall’inizio, puoi garantire un’esperienza più accessibile e usabile a tutti i tuoi utenti, indipendentemente dalle loro abilità.
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.
Ogni mese scegliamo articoli utili ma anche idee fresche e stimolanti. Proprio quello che vorremmo trovare noi in una newsletter!
