Che cos'è l'attributo tabindex HTML?

A cosa serve l' tabindexattributo in HTML?

tabindexè un attributo globale responsabile di due cose:

1. imposta l'ordine degli elementi "focalizzabili" e
2. si rende elementi "attivabile" .

Nella mia mente la seconda cosa è ancora più importante della prima. Esistono pochissimi elementi che possono essere attivati ​​per impostazione predefinita (ad es. <a> e controlli modulo). Gli sviluppatori aggiungono molto spesso alcuni gestori di eventi JavaScript (come 'onclick') su elementi non focalizzabili (<div>, <span> e così via) e il modo per rendere la tua interfaccia reattiva non solo agli eventi del mouse ma anche agli eventi della tastiera (ad es. "onkeypress") significa rendere tali elementi focalizzabili. Infine, se non vuoi impostare l'ordine ma fai solo un uso focalizzabile del tuo elemento tabindex="0"su tutti questi elementi:

<div tabindex="0"></div>

Inoltre, se non si desidera che sia focalizzabile tramite il tasto Tab, utilizzare tabindex="-1". Ad esempio, il collegamento seguente non verrà focalizzato durante l'utilizzo dei tasti di tabulazione per attraversare.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Quando l'utente preme il pulsante di tabulazione, l'utente passerà attraverso il modulo nell'ordine 1, 2 e 3 come indicato nell'esempio seguente.

Per esempio:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

Il tabindexè usato per definire una sequenza che gli utenti seguono quando usano il tasto Tab per navigare attraverso una pagina. Per impostazione predefinita, l'ordine di tabulazione naturale corrisponderà all'ordine di origine nel markup.

L'attributo content tabindex consente agli autori di controllare se un elemento dovrebbe essere focalizzabile, se si suppone che sia raggiungibile usando la navigazione del focus sequenziale e quale debba essere l'ordine relativo dell'elemento ai fini della navigazione del focus sequenziale. Il nome "indice tab" deriva dall'uso comune del tasto "tab" per navigare attraverso gli elementi focalizzabili. Il termine "tabulazione" si riferisce all'avanzamento degli elementi focalizzabili che è possibile raggiungere mediante la navigazione sequenziale del focus.
Raccomandazione del W3C: HTML5
Sezione 7.4.1 Navigazione del focus sequenziale e l'attributo tabindex

I tabindexinizia da 0 o un numero intero positivo e incrementi verso l'alto. È comune vedere il valore 0 evitato perché nelle versioni precedenti di Mozilla e IE, il tabindex inizierebbe da 1, passerebbe a 2 e solo dopo 2 andrebbe a 0 e poi 3. Il valore intero massimo per tabindexè 32767. Se gli elementi hanno lo stesso, tabindextabindex corrisponderà all'ordine di origine nel markup. Un valore negativo rimuoverà l'elemento dall'indice della scheda in modo che non venga mai focalizzato.

Se un elemento viene assegnato un tabindexdi -1esso rimuoverà l'elemento e non potrà mai essere attivabile ma attenzione può essere dato per l'elemento di programmazione utilizzando element.focus().

Se si specifica l' tabindexattributo senza valore o vuoto, verrà ignorato.

Se l' disabledattributo è impostato su un elemento che ha un tabindex, l'elemento verrà ignorato.

Se una tabindex viene impostato in qualsiasi punto della pagina, indipendentemente da dove si trova rispetto al resto del codice (potrebbe essere nel piè di pagina, nell'area dei contenuti, ovunque) se esiste un definito, tabindexl'ordine delle schede inizierà dall'elemento a cui è assegnato in modo esplicito il tabindexvalore più basso sopra 0. Quindi scorrerà gli elementi definiti e solo dopo che gli tabindexelementi espliciti sono stati sottoposti a tabulazione, tornerà all'inizio del documento e seguirà l'ordine naturale di tabulazione.

Nella specifica HTML4 solo i seguenti elementi supportano l'attributo tabindex: ancora, la zona, pulsante, ingresso, oggetto, Selezionare, e textarea. Ma le specifiche HTML5, tenendo presente l'accessibilità, consentono di assegnare tutti gli elementi tabindex.

-

Per esempio

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

equivale a

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

perché indipendentemente dal fatto che siano tutti assegnati tabindex="1", seguiranno comunque lo stesso ordine, il primo è il primo e l'ultimo è l'ultimo. Questo è anche lo stesso ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

perché non è necessario definire esplicitamente tabIndex se si tratta di un comportamento predefinito. A divper impostazione predefinita non sarà attivabile, i anchortag lo saranno.

Controllo dell'ordine delle tabulazioni (premendo il tabtasto per spostare lo stato attivo) all'interno della pagina.

Riferimento: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

i valori impostati determinano l'ordine in cui il focus della tastiera si sposterà tra gli elementi sul sito Web.

Nel seguente esempio, la prima volta che premi tab, il cursore si sposterà su #foo, quindi #awesome, quindi #bar

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

Se non hai definito gli indici delle schede da nessuna parte, lo stato attivo della tastiera seguirà i tag HTML della tua pagina nell'ordine in cui sono definiti nel documento HTML.

Se esegui il tab più volte di quanto hai specificato tabindexes, lo stato attivo si sposterà come se non ci fossero tabindex, cioè nell'ordine di apparizione dei tag HTML

Può essere utilizzato per modificare la sequenza di navigazione del focus dell'elemento modulo predefinito.

Quindi se hai:

text input A

text input B

submit button C

utilizzando il tasto Tab si naviga attraverso A-> B-> C. Tabindex ti permette di cambiare quel flusso.

Normalmente, quando l'utente passa da un campo all'altro in un modulo (in un browser che consente la tabulazione, non tutti i browser lo fanno) l'ordine è l'ordine in cui i campi compaiono nel codice HTML.

Tuttavia, a volte si desidera che l'ordine delle schede scorra in modo leggermente diverso. In tal caso, è possibile numerare i campi utilizzando TABINDEX. Le schede quindi scorrono in ordine dal più basso TABINDEX al più alto.

Maggiori informazioni al riguardo sono disponibili qui w3

un'altra buona illustrazione può essere trovata qui

In parole semplici, tabindexviene utilizzato per concentrarsi su elementi. Sintassi: tabindex="numeric_value" questo numeric_valueè il peso dell'elemento. Si accederà prima a un valore inferiore.

L' attributo tabindex HTML è responsabile per indicare se un elemento è raggiungibile dalla navigazione da tastiera . Quando l'utente preme il tasto Tab, lo stato attivo viene spostato da un elemento a un altro. Utilizzando l'attributo tabindex, il flusso dell'ordine di tabulazione viene spostato.

La tabulazione tramite i controlli di solito avviene in sequenza come appaiono sul codice HTML.

Utilizzando tabindex, la tabulazione scorrerà dal controllo con il tabindex più basso al controllo con il tabindex più alto in ordine sequenziale tabindex