Navigazione e struttura
Un sito navigabile solo con il mouse esclude automaticamente chi non può usarlo. Persone con disabilità motorie, utenti che usano la tastiera o software di assistenza dipendono da una struttura logica e coerente per muoversi nel sito.
Chi viene escluso?
Disabilità motorie
Non possono usare il mouse, navigano solo con tastiera o controllo vocale.
Utenti screen reader
Si muovono attraverso la struttura dei titoli. Se è disorganizzata, si perdono.
Disabilità cognitive
Hanno bisogno di una struttura prevedibile e coerente per orientarsi
Errori più comuni
Menu accessibile solo con hover
Si apre solo passando il mouse sopra.
Nessun indicatore di focus
Non si vede dove si trova il cursore mentre si naviga con Tab.
Ordine Tab casuale
Premendo Tab, il focus salta in modo imprevedibile.
Struttura titoli disorganizzata
H1, H2, H3 usati a caso per lo stile,
non per la gerarchia.
Nessun skip link
Chi usa la tastiera deve scorrere tutto il menu ad ogni pagina.
Come correggerli
Menu navigabile da tastiera
Menu apribile con tasto Invio o Spazio da tastiera.
Focus indicator visibile
Aggiungi sempre un bordo visibile sull’elemento selezionato con Tab.
Ordine Tab logico
Il focus deve seguire l’ordine visivo della pagina.
Gerarchia titoli corretta
Usa i titoli per la struttura. Un H1 per pagina, H2 per le sezioni principali, H3 per le sottosezioni.
Skip link
Aggiungi un link nascosto all’inizio della pagina che permette di saltare al contenuto principale.
Fashion e-commerce
Filtri navigabili da tastiera
I filtri per taglia, colore e categoria devono essere completamente usabili senza mouse.
Mega menu accessibili
I menu con molte categorie devono avere una struttura logica navigabile con Tab senza perdersi.
Breadcrumb sempre presente
Nelle pagine categoria e prodotto, mostra sempre il percorso.
Esempio: Home → Donna → Blazer
Wishlist e confronto prodotti
Devono essere raggiungibili da tastiera, non solo con il mouse