¿Qué es el atributo tabindex HTML?

¿Para qué se tabindexusa el atributo en HTML?

tabindexes un atributo global responsable de dos cosas:

1. establece el orden de los elementos "enfocables" y
2. que hace que los elementos "enfocable" .

En mi opinión, la segunda cosa es aún más importante que la primera. Hay muy pocos elementos que se puedan enfocar de manera predeterminada (por ejemplo, <a> y controles de formulario). Los desarrolladores a menudo agregan algunos controladores de eventos JavaScript (como 'onclick') en elementos no enfocables (<div>, <span>, etc.), y la forma de hacer que su interfaz responda no solo a los eventos del mouse sino también a los eventos del teclado (por ejemplo, 'onkeypress') es hacer que dichos elementos sean enfocables. Por último, si no desea establecer el orden pero simplemente hacer que su elemento sea enfocable, use tabindex="0"todos estos elementos:

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

Además, si no desea que se pueda enfocar con la tecla de tabulación, use tabindex="-1". Por ejemplo, el siguiente enlace no se enfocará mientras se usan las teclas de tabulación para recorrer.

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

Cuando el usuario presiona el botón de tabulación, el usuario pasará por el formulario en el orden 1, 2 y 3 como se indica en el ejemplo a continuación.

Por ejemplo:

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

los tabindexse utiliza para definir una secuencia que los usuarios siguen cuando usan la tecla Tab para navegar por una página. Por defecto, el orden de tabulación natural coincidirá con el orden de origen en el marcado.

El atributo de contenido tabindex permite a los autores controlar si se supone que un elemento puede enfocarse, si se supone que debe ser accesible usando la navegación de enfoque secuencial y cuál debe ser el orden relativo del elemento a los fines de la navegación de enfoque secuencial. El nombre "índice de tabulación" proviene del uso común de la tecla "tabulación" para navegar a través de los elementos enfocables. El término "tabulación" se refiere a avanzar a través de los elementos enfocables que se pueden alcanzar utilizando la navegación de enfoque secuencial.
Recomendación del W3C: HTML5
Sección 7.4.1 Navegación de enfoque secuencial y el atributo tabindex

Las tabindexcomienza en 0 o cualquier número entero positivo y los incrementos hacia arriba. Es común ver el valor 0 evitado porque en versiones anteriores de Mozilla e IE, el índice de tabla comenzaría en 1, pasaría a 2, y solo después de 2 iría a 0 y luego a 3. El valor entero máximo para tabindexes 32767. Si los elementos tienen lo mismo tabindex, el índice de tabulación coincidirá con el orden de origen en el marcado. Un valor negativo eliminará el elemento del índice de la pestaña para que nunca se enfoque.

Si se asigna un elemento, uno tabindexde -1ellos eliminará el elemento y nunca será enfocable, pero se puede enfocar al elemento mediante programación element.focus().

Si especifica el tabindexatributo sin valor o con un valor vacío, se ignorará.

Si el disabledatributo se establece en un elemento que tiene un tabindex, el elemento será ignorado.

Si a tabindexse establece en cualquier lugar dentro de la página, independientemente de dónde se encuentre en relación con el resto del código (podría estar en el pie de página, área de contenido, donde sea) si hay un definido tabindex, el orden de tabulación comenzará en el elemento al cual se le asigna explícitamente el tabindexvalor más bajo por encima de 0. Luego pasará por los elementos definidos y solo después de que los tabindexelementos explícitos hayan sido tabulados, volverá al comienzo del documento y seguirá el orden de tabulación natural.

En la especificación HTML4, solo los siguientes elementos admiten el atributo tabindex: ancla, zona, botón, entrada, objeto, Seleccioney textarea. Pero la especificación HTML5, teniendo en cuenta la accesibilidad, permite asignar todos los elementos tabindex.

-

Por ejemplo

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

es lo mismo que

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

porque independientemente de que estén todos asignados tabindex="1", seguirán el mismo orden, el primero es el primero y el último es el último. Esto también es lo mismo ...

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

porque no necesita definir explícitamente el tabIndex si es un comportamiento predeterminado. A divpor defecto no será enfocable, las anchoretiquetas sí.

Controlar el orden de tabulación (presionar la tabtecla para mover el foco) dentro de la página.

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

Los valores que establezca determinan el orden en que el foco del teclado se moverá entre los elementos del sitio web.

En el siguiente ejemplo, la primera vez que presiona tabulador, su cursor se moverá a #foo, luego #awesome, luego #bar

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

Si no ha definido índices de tabulación en ninguna parte, el foco del teclado seguirá las etiquetas HTML de su página en el orden en que están definidas en el documento HTML.

Si tabula más veces de las que ha especificado tabindexes, el foco se moverá como si no hubiera tabindexes, es decir, en el orden de aparición de las etiquetas HTML

Se puede usar para alterar la secuencia de navegación de enfoque del elemento de formulario predeterminado.

Entonces si tienes:

text input A

text input B

submit button C

Al usar la tecla de tabulación, navega por A-> B-> C. Tabindex le permite cambiar ese flujo.

Normalmente, cuando el usuario tabula de campo en campo en un formulario (en un navegador que permite tabular, no todos los navegadores lo hacen) el orden es el orden en que aparecen los campos en el código HTML.

Sin embargo, a veces desea que el orden de tabulación fluya un poco diferente. En ese caso, puede numerar los campos usando TABINDEX. Las pestañas fluyen en orden desde el TABINDEX más bajo al más alto.

Más información sobre esto se puede encontrar aquí w3

otra buena ilustración se puede encontrar aquí

En palabras simples, tabindexse usa para enfocarse en elementos. Sintaxis: tabindex="numeric_value" este numeric_valuees el peso del elemento. Se accederá primero al valor más bajo.

El atributo HTML tabindex es responsable de indicar si un elemento es accesible mediante la navegación del teclado . Cuando el usuario presiona la tecla Tab, el foco se desplaza de un elemento a otro. Al usar el atributo tabindex, el flujo de orden de tabulación se desplaza.

La tabulación a través de los controles generalmente ocurre secuencialmente a medida que aparecen en el código HTML.

Usando tabindex, la tabulación fluirá desde el control con el índice más bajo al control con el índice más alto en orden secuencial