Indice

tabindex: attributo HTML

L' attributo tabindex indica che il suo elemento può essere focalizzato e dove partecipa alla navigazione sequenziale da tastiera (di solito con la chiave, da cui il nome).

Accetta un intero come valore, con risultati diversi a seconda del valore dell'intero:

  • Un valore negativo (di solito tabindex="-1") significa che l'elemento non è raggiungibile tramite la navigazione sequenziale da tastiera, ma potrebbe essere focalizzato con JavaScript o visivamente facendo clic con il mouse. È principalmente utile creare widget accessibili con JavaScript.
  • tabindex="0" significa che l'elemento deve essere attivabile nella navigazione sequenziale da tastiera, dopo che tutti i valori tabindex positivi e il suo ordine sono definiti dall'ordine di origine del documento.
  • Un valore positivo significa che l'elemento deve essere attivabile nella navigazione sequenziale da tastiera, con il suo ordine definito dal valore del numero. Cioè, tabindex="4" è focalizzato prima tabindex="5" e tabindex="0", ma dopo tabindex="3". Se più elementi condividono lo stesso tabindexvalore positivo, il loro ordine rispetto all'altro segue la loro posizione nell'origine del documento. Il valore massimo per tabindexè 32767. Se non specificato, assume il valore predefinito 0.

Se imposti l'attributo tabindex su un <div>, il suo contenuto figlio non può essere fatto scorrere con i tasti freccia a meno che non imposti tabindexanche il contenuto.

Problemi di accessibilità

Evitare di utilizzare l'attributo tabindex insieme a contenuti non interattivi per rendere attivabile tramite l'input da tastiera qualcosa che deve essere interattivo. Un esempio potrebbe essere l'utilizzo di un elemento <div> per descrivere un pulsante, invece dell'elemento <button>.

I componenti interattivi creati utilizzando elementi non interattivi non sono elencati nell'albero di accessibilità . Ciò impedisce alla tecnologia assistiva di essere in grado di navigare e manipolare quei componenti. Il contenuto dovrebbe essere descritto semanticamente utilizzando invece elementi interattivi ( <a>, <button>, <details>, <input>, <select>, <textarea>, ecc.). Questi elementi hanno ruoli e stati incorporati che comunicano lo stato all'accessibilità che altrimenti dovrebbe essere gestita da ARIA .