Linee GuidaLa corretta sequenza dei contenuti garantisce che le informazioni siano presentate in modo logico e prevedibile. Insieme a un focus chiaramente visibile, consente all’utente di sapere in ogni momento dove si trova nella pagina e quale sia il passaggio successivo. Ciò migliora la comprensione dei contenuti, riduce lo sforzo durante l’utilizzo e contribuisce a una migliore esperienza utente per tutti.
Esempio di focus visibile su una pagina web:
Per quali utenti sono particolarmente importanti un ordine corretto e un focus visibile?
Un ordine chiaro dei contenuti e un focus visibile sono fondamentali per:
- persone con disabilità visive che utilizzano lettori di schermo,
- utenti che navigano sul web tramite tastiera o dispositivi alternativi,
- persone con difficoltà di concentrazione o disabilità cognitive.
Allo stesso tempo, una progettazione di questo tipo è utile anche al pubblico più ampio, poiché rende l’utilizzo dei siti web più chiaro, prevedibile e meno disorientante, soprattutto in presenza di contenuti lunghi, moduli o procedure più complesse.
Come verificare se l’ordine dei contenuti è corretto?
Per verificare che l’ordine dei contenuti sia corretto, navighiamo nella pagina web utilizzando il tasto Tab e osserviamo se il focus si sposta in una direzione logica e prevedibile (dall’alto verso il basso e da sinistra verso destra). Possiamo inoltre utilizzare un lettore di schermo, che legge i contenuti secondo la sequenza definita nella struttura e nel codice sorgente della pagina.
Esempio di ordine non corretto degli elementi, che procede da destra verso sinistra:
Esempio di ordine corretto dei contenuti su una pagina web:
Come verificare se il focus è sufficientemente visibile?
Durante la verifica dell’ordine logico dei contenuti osserviamo anche se il focus è indicato in modo chiaro e inequivocabile su tutti gli elementi interattivi. Prestiamo particolare attenzione al fatto che, durante la navigazione da tastiera, sia sempre evidente quale elemento è attualmente attivo.
Esempio di focus chiaramente visibile su una pagina web:
Come funziona nella pratica?
Nonostante il rispetto dei requisiti tecnici, nella pratica il focus è spesso ancora poco evidente. È quindi importante considerare, oltre alla conformità formale, anche l’effettiva esperienza dell’utente e garantire che il focus sia chiaramente visibile, comprensibile e facile da seguire per tutti gli utenti.
Esempio di focus poco visibile su una pagina web, sebbene conforme alle linee guida per l’accessibilità:
Non è raro che su una pagina web il focus non sia affatto visibile. In questo caso, un utente che utilizza la tastiera non può determinare quale elemento sia attualmente attivo.
Esempio in cui gli elementi interattivi non presentano un focus visibile:
Come verificare l’accessibilità dell’ordine e del focus?
Durante la verifica possiamo porci le seguenti domande:
- Il focus si sposta secondo una sequenza logica?
- L’ordine segue la struttura visiva e dei contenuti della pagina?
- Il focus attuale è sempre chiaramente visibile?
- Il focus rimane visibile anche quando la pagina viene ingrandita?
- È possibile individuare facilmente quale elemento sia attualmente attivo?
- Il focus rimane visibile e non viene coperto da altri elementi della pagina?
Collegamento con le linee guida per l’accessibilità (WCAG)
L’ambito relativo al corretto ordine dei contenuti e alla visibilità del focus riguarda i seguenti criteri di successo WCAG:
- 2.4.3 Ordine del focus
- 2.4.7 Focus visibile
- 2.4.11 Focus non oscurato (minimo)
Questi criteri garantiscono che gli utenti possano navigare nella pagina web secondo una sequenza logica e prevedibile e che l’elemento attualmente selezionato sia sempre chiaramente visibile.
In questo modo consentono una migliore comprensione dei contenuti, facilitano l’orientamento nella pagina e garantiscono un utilizzo equo del web soprattutto agli utenti che utilizzano la tastiera e i lettori di schermo, migliorando al tempo stesso la chiarezza generale e l’esperienza utente per tutti.