Navigazione da tastiera con l’attributo tabIndex

Navigazione da tastiera con l’attributo tabIndex

1295
2
CONDIVIDI

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.

In sostanza: l’attributo tabIndex definisce una priorità di navigazione tra le parti interattive del sito stabilendo una coerenza tra gli elementi.

Implementare i tabIndex nell’html

La parte tecnica è davvero molto semplice: l’attributo html tabIndex permette di gestire la navigazione sequenziale da tastiera.

<ul class="menu">
   <li><a href="home.php" tabindex="10">Home page</a></li>
   <li><a href="chi_siamo.php" tabindex="20">Chi siamo</a></li>
   <li><a href="news.php" tabindex="30">News</a></li>
   <li><a href="dove_siamo.php" tabindex="40">Dove siamo</a></li>
   <li><a href="contatti.php" tabindex="50">Contatti</a></li>
</ul>
<p>Nome <input type="text" name="nome" id="nome" tabindex="100" /></p>
<p>Cognome<input type="text" name="cognome" id="cognome" tabindex="101" /></p>
<p>Email <input type="text" name="email" id="email" tabindex="102" /></p>
<input type="submit" name="invia" id="invia" tabindex="110" /></p>
TabIndex e chiamate asincrone
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.

  • frak dabetta

    ottimo articolo, complimenti

  • Fabiana

    tutto chiaro!