¿Qué es el atributo tabindex HTML?

Respuestas:

301

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>
Konstantin Smolyanin
fuente
2
Descubrí que eso <div tabindex>también funciona. ¿Hay alguna razón para no usar eso?
danijar
55
Usar tabindex de -1 es conveniente para cosas como omitir enlaces. Puede hacer que un elemento vincule a algo justo encima del contenido al que intenta vincular al usuario sin que se pueda acceder al elemento vinculado.
Brett
44
Vale la pena señalar, y la respuesta probablemente debería corregirse, que el valor -1no es adecuado cuando "no desea que se enfoque", sino más bien cuando desea evitar el enfoque como resultado de la navegación del teclado. El elemento aún puede enfocarse, pero no con el teclado.
amn
2
@danijar sí: es una violación de especificaciones. Por html.spec.whatwg.org/multipage/… , "El atributo tabindex, si se especifica, debe tener un valor que sea un entero válido" .
Mark Amery
¡Ese -1es el final de mi investigación para encontrar una solución para artículos que tenían una posición absoluta y se comportaban de manera divertida cuando la pestaña los enfocaba! HOorraaayyyyy.
John Mutuma el
54

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"  />
Robert
fuente
-> ¿Qué pasa si el índice de tabulación es -1? Qué significa eso?
77
@AlyssaGono parece que no has leído la respuesta con 85 votos a favor ... tabindex de -1 significa que no puedes alcanzar ese elemento presionando el botón de tabulación
John Ruddell
24

los se 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: , , , , , y . 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í.

davidcondrey
fuente
¿Qué versiones de IE y Mozilla comienzan tabindexcon 1 en lugar de 0 ?
arminrosu
-1; Esta respuesta es un poco confusa. Usted menciona que las "versiones anteriores" de IE y Firefox tienen tabulación comenzando en tabindex 1 en lugar de tabindex 0 ... ¡pero eso es lo que hacen todos los navegadores, como lo requiere la especificación! También se contradice a sí mismo, primero diciendo " tabindexcomienza en 0" pero luego dice "el orden de tabulación comenzará en el elemento al que se le asigna explícitamente el tabindexvalor más bajo por encima de 0" .
Mark Amery
18

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

Tom
fuente
66
Además, tener tabindex hace que un elemento sea seleccionable haciendo clic con el mouse. (Agrega contornos punteados, se puede :focus
diseñar
@ Pumbaa80 De todos modos, puede seleccionar cualquier elemento de entrada haciendo clic con el mouse, y lo mismo ocurre con el uso del CSS ": focus". El atributo tabindex es opcional.
Drew
66
Eso solo se aplica a los elementos de entrada. Mi comentario se aplica a cualquier tipo de elemento. Ver jsfiddle.net/XsYCj para un ejemplo.
user123444555621
8

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

Eldamir
fuente
3

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.

cherouvim
fuente
3

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í

Mulki
fuente
2

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.

Aman Dhanda
fuente
"Se accederá primero al valor más bajo". - no del todo cierto; 0 y los valores negativos tienen significados especiales.
Mark Amery
1

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.

Nesha Zoric
fuente
0

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

Kamal
fuente