Analisi della navigazione con tastiera nel sito UK Parliament
Amo quando trovo soluzioni che migliorano l’accessibilità nella navigazione. Ha a che fare con vari aspetti come:
- Architettura dei percorsi
- Tab-index (e quindi ordine nel DOM)
- Skip Link
- E anche un bel po’ di creatività
Atterraggio sul sito
Facciamo un esperimento! Andiamo sul sito web UK Parliament e proviamo a navigare con la sola tastiera. Ricordo che la navigazione con tastiera è uno dei requisiti più importanti per l’accessibilità digitale.
Tab 1: Skip link
All’inizio incontriamo lo Skip Link, la scorciatoia utile per saltare direttamente al contenuto principale. Molto bene, perché la mancanza di Skip Link è uno degli errori più frequenti.
Tab 2: Logo
Poi c’è il logo con link alla homepage. È in alto a sinistra, quindi l’aspettativa è rispettata. Visto che siamo in homepage, sarebbe stato meglio non avere il link alla stessa pagina.
Tab 3: Primo link nel menu
Arriviamo al primo link del menu principale. Procediamo oltre. Non possiamo usare le frecce per spostarci tra i link, ma è ottimo perché usiamo i Tab.
Tab 4: Prossimo link nel menu
Eccoci al secondo link nel menu. Apriamo il sottomenu.
Tab 5: Sottomenu
Si apre il sottomenu. Niente è in focus quindi usiamo ancora il Tab. E qui succede qualcosa di interessante.
Tab 6: Skip Link per cambiare link di navigazione
Troviamo un altro Skip Link interno per spostarci tra i link del menu.
Tab 7: Chiudi menu
Usando ancora il Tab possiamo chiudere il sottomenu, ma sembra che il sottomenu sia staccato dal menu principale.
Analisi del codice
Analizzando l’HTML possiamo vedere che i sottomenu sono posizionati in DIV separati dalla lista UL del menu principale. Questo suggerisce alcuni ragionamenti.
Cose positive e negative
Cose che mi sono piaciute
- Uso di HTML semantico nel DOM;
- Informazioni aggiuntive per migliorare la navigazione accessibile;
- Scorciatoie Skip Link aggiuntive.
Cose che mi sono piaciute meno
- Se chiudiamo il sottomenu finiamo FUORI dal menu proprio perché i DIV del sottomenu sono staccati e, nel DOM, si trovano dopo la lista UL del menu. Purtroppo è un difetto importante, soprattutto per chi usa Screen Reader.
Com’è andata? Vi è piaciuto questo esperimento? L’accessibilità è fatta di equilibrio, di progettazione e di tentativi. L’importante è andare nella direzione giusta. Buon anno di tentativi!
Come possiamo aiutarti?
Sono Nicola Mascotto di Flying Chair. Realizzo siti WordPress e grafiche digitali per piccole/medie aziende, associazioni e persone autonome.
Caso studio sulla navigazione con tastiera
Breve analisi del sito UK Parliament per capire come funziona la navigazione con tastiera, utile per chi non può usare il mouse.
