Gli utenti con difficoltà visive o di mobilità utilizzano la tastiera come unico mezzo per navigare l’interfaccia utente dell’applicazione web. Ogni sito web che non fornisce una buona navigazione da tastiera non risponderà ai requisiti di accessibilità richiesti.
Attributo tabindex
Per creare i presupposti di quanto detto precedentemente è necessario impostare l’attributo tabIndex per tutti gli elementi interattivi dell’interfaccia utente, facilitando la navigazione della pagina in maniera ordinata soprattutto per chi utilizza gli screen reader.
Il concetto è quello di scorrere sequenzialmente e senza difficoltà gli elementi dinamici della pagina (forms, textarea, drop down list, voci di menù, ecc…) attraverso l’uso del tasto TAB.
Organizzare le sequenze
Prima di approcciare la parte tecnica è importante effettuare un’analisi delle parti interattive che necessitano della navigazione da tasto TAB. Se navigassimo un sito web non accessibile, ci accorgeremmo che il tasto TAB permette comunque una discreta navigazione ma lo fa in maniera disordinata e con delle regole che dipendono solo ed esclusivamente dalle convenzioni stabilite dal browser; il nostro compito è quello di creare una coerenza di navigazione.
Cosi come una piramide, è importante stabilire quali saranno gli elementi iniziali e finali navigati dal tasto TAB. Generalmente il primo elemento è il Logo o nome del sito, seguito dal menu principale e successivamente dagli elementi presenti nel contenuto della pagina (forms, link, ecc…), questo modo di lavorare permetterà all’utente di sapere esattamente ciò che sta scorrendo memorizzando le parti comuni non variabili (logo, voce di menu, link nel footer, ecc…).
Esempio di mappatura dei tasti tab
| Elemento | tabIndex | Elemento | tabIndex |
|---|---|---|---|
| Logo | 1 | Voce di menu Chi Siamo | 10 |
| Voce di menu Contatti | 20 | Voce di menu News | 30 |
| Voce di menu Dove siamo | 40 | Input field “Nome” | 100 |
| Input field “Cognome” | 101 | Input field “Testo” | 102 |
| Input field “Invia” | 110 | Link credits nel footer | 500 |
In questo esempio ho stabilito una sequenza ordinata e crescente di numeri lasciando volutamente grossi range inutilizzati per sfruttare eventuali “intromissioni” future come ad esempio l’aggiunta di una voce di menu tra chi siamo e contatti (assumerebbe tabIndex 15) oppure una sottovoce di menu cosi come di campi; in caso contrario saremmo stati costretti a rivedere l’intera mappatura del sito scalando progressivamente di un numero tutti gli oggetti.
Implementare i tabIndex nell’html
La parte tecnica è davvero molto semplice: l’attributo html tabIndex permette di gestire la navigazione sequenziale da tastiera.
Nome
Cognome
Email
Per venire in contro alle moderne esigenze di sviluppo il w3c ha permesso l’applicazione del valore -1. E’ l’ideale per chi sviluppa con tecnologie AJAX.
2 comments
frak dabetta
6 Agosto 2013 at 14:10
ottimo articolo, complimenti
Fabiana
6 Agosto 2013 at 14:12
tutto chiaro!