¿Para qué sirve tabindex = "- 1" en bootstrap?

100

¿Para qué sirve el tabindexatributo en Bootstrap 3?

Su documentación no dice nada sobre ellos aunque los usan prácticamente en todos los modales.

Solo encontré esto con respecto a su uso, que realmente no dice mucho

Información sobre herramientas accesible para usuarios de teclados y tecnologías de asistencia

Para los usuarios que navegan con un teclado y, en particular, los usuarios de tecnologías de asistencia, solo deben agregar información sobre herramientas a los elementos que se pueden enfocar con el teclado, como vínculos, controles de formulario o cualquier elemento arbitrario con un atributo tabindex = "0".

Y descubrí que no puedo presionar escpara ocultar un modal si el tabindexatributo no lo es-1 .

Álvaro
fuente

Respuestas:

159

El tabindexatributo define explícitamente el orden de navegación para los elementos enfocables (generalmente enlaces y controles de formulario) dentro de una página. También se puede utilizar para definir si los elementos deben ser enfocables o no.

[Ambos] tabindex="0"y tabindex="-1"tienen un significado especial y proporcionan una funcionalidad distinta en HTML. Un valor de 0indica que el elemento debe colocarse en el orden de navegación predeterminado. Esto permite que elementos que no son de forma nativa enfocable (tales como <div>, <span>, y<p> ) para recibir el foco del teclado. Por supuesto, generalmente se deben usar enlaces y controles de formulario para todos los elementos interactivos, pero esto permite que otros elementos sean enfocables y activen la interacción.

Un tabindex="-1"valor elimina el elemento del flujo de navegación predeterminado (es decir, un usuario no puede tabularlo), pero le permite recibir el enfoque programático , lo que significa que el enfoque se puede configurar desde un enlace o con secuencias de comandos. ** Esto puede ser muy útil para elementos a los que no se les debe asignar pestañas, pero que pueden necesitar tener el foco establecido en ellos .

Un buen ejemplo es una ventana de diálogo modal : cuando se abre, el foco debe establecerse en el diálogo para que un lector de pantalla comience a leer y el teclado comience a navegar dentro del diálogo. Debido a que el cuadro de diálogo (probablemente solo un <div>elemento) no se puede enfocar de forma predeterminada, asignarlo tabindex="-1"permite establecer el enfoque con secuencias de comandos cuando se presenta.

Un valor de -1también puede ser útil en widgets y menús complejos que utilizan teclas de flecha u otras teclas de método abreviado para garantizar que solo un elemento dentro del widget sea navegable con la tecla de tabulación, pero aún así permitir que el foco se establezca en otros componentes dentro del widget.

Fuente: http://webaim.org/techniques/keyboard/tabindex

Es por eso que necesita tabindex="-1"en el modal <div>, para que los usuarios puedan acceder a atajos de teclado y mouse comunes. Espero que ayude.

Kyle Anderson
fuente
1
El atributo es parte de HTML, no tiene nada que ver con Bootstrap específicamente.
Lutz Prechelt
8
Sí, eso es exactamente lo que se dice aquí, que es una "funcionalidad distinta en HTML" y no es algo que ver con Bootstrap.
Kyle Anderson
1
Para poder enfocarse en un <div> con JavaScript, el atributo tabindex DEBE estar definido en este elemento (cualquier valor como tabindex = -1). Si tabindex no está presente en el div, el enfoque no funcionará. Esta es la razón por la que BS agrega tabindex = -1 al div modal. Consulte developer.mozilla.org/en-US/docs/Web/Accessibility/… : si tabindex no está presente, el enfocable con JS seguirá la convención de la plataforma del elemento (sí para controles de formulario, enlaces, etc.). Esto significa que <div> no es focuable si tabindex no está presente.
Canada Wan
Vale la pena agregar que los elementos con tabindex = "- 1" también se pueden enfocar haciendo clic en ellos.
Black Mantha
13

El atributo tabindex está asociado con HTML , no es específico de Bootstrap.

Esta propiedad es responsable de indicar si se puede acceder a un elemento mediante la navegación del teclado.

Debe estar atento a tres escenarios diferentes:

  1. Cuando se agrega tabindex = "0"a un elemento, esto significa que se puede acceder a él mediante la navegación del teclado, pero el orden está definido por el orden de origen de los documentos.

  2. Cuando se agrega un valor positivo al atributo tabindex (por ejemplo tabindex = "1", tabindex = "2"), se puede acceder a esos elementos mediante la navegación del teclado y el orden se define por el valor del atributo.

  3. Cuando se agrega un valor negativo a tabindex (generalmente tabindex="-1"), significa que el elemento no es accesible mediante la navegación del teclado, pero se puede enfocar usando la función de enfoque en JS.

Nesha Zoric
fuente