¿Cuál es la tabindex atributo en Bootstrap 3 para?

Su documentación no dice nada acerca de ellos a pesar de que el uso de ellos prácticamente en todos los verbos modales.

Sólo he de encontrar esto en cuanto a su uso, que en realidad no dicen mucho

Accesible la información sobre herramientas para teclado y asistencia a los usuarios de tecnología

Para los usuarios navegar con un teclado, y en particular a los usuarios de las tecnologías de asistencia, sólo debe agregar información sobre herramientas para teclado-seleccionable de elementos, tales como enlaces, controles de formulario, o cualquier elemento con un tabindex=»0″ atributo.

Y me enteré de No puede presionar esc para ocultar un modal si el tabindex, el atributo no es -1.

InformationsquelleAutor Alvaro | 2015-10-02

2 Comentarios

  1. 123

    La tabindex atributo define explícitamente el orden de navegación para seleccionable de elementos (normalmente los enlaces y controles de formulario) dentro de una página. También puede ser usado para definir si los elementos deben ser seleccionable o no.

    [Ambos] tabindex="0" y tabindex="-1" tienen un significado especial y ofrecer distintas funciones en HTML. Un valor de 0 indica que el elemento debe ser colocado por defecto en el orden de navegación. Esto permite que los elementos que no son de forma nativa seleccionable (como <div>, <span>, y <p>) para recibir el foco del teclado. Por supuesto, uno debe generalmente el uso de enlaces y controles de formulario para todos los elementos interactivos, pero esto no permite que otros elementos para ser seleccionable y el gatillo de la interacción.

    Un tabindex="-1" valor quita el elemento de la navegación por defecto el flujo de (es decir, un usuario no se ficha a ella), pero le permite recibir enfoque de la programación de, lo que significa que puede ser establecido a partir de un enlace o con secuencias de comandos.** Esto puede ser muy útil para los elementos que no se deben tabular, pero que puede necesitar un enfoque conjunto para ellos.

    Un buen ejemplo es una ventana de diálogo modal – cuando se abre, el enfoque debería estar establecida en el cuadro de diálogo de modo que un lector de pantalla comenzará lectura y el teclado comenzará navegar en el cuadro de diálogo. Porque el diálogo (probablemente sólo un <div> elemento) no es seleccionable por defecto, asignándole tabindex="-1" permite enfocar conjunto con las secuencias de comandos cuando se presenta.

    Un valor de -1 también puede ser útil en el complejo de los widgets y menús que utilizar las teclas de flecha o otras teclas de acceso directo para asegurarse de que sólo un elemento dentro del widget es navegable con la tecla tab, pero aún así permitir que el enfoque se establece en otros componentes dentro del widget.

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

    Esta es la razón por la que usted necesita tabindex="-1" en el modal <div>, por lo que los usuarios pueden tener acceso común ratón y atajos de teclado. Espero que ayude.

    • El atributo es la parte de HTML, no tiene nada que ver con Bootstrap específicamente.
    • Sí, eso es exactamente lo que se dice aquí, que es un «distintas funciones en HTML» y no algo que ver con Bootstrap.
    • Para ser capaz de concentrarse en una <div> con JavaScript, el atributo tabindex DEBE estar definido en este elemento (cualquiera de los valores tales como tabindex=-1). Si tabindex no está presente en el div, centrándose no funcionará. Esta es la razón por la BS añade tabindex=-1 a la modal div. Consulte developer.mozilla.org/en-US/docs/Web/Accessibility/…: si tabindex no está presente, la seleccionable con JS se siga la plataforma de convenio del elemento (sí para los controles de formulario, enlaces, etc.). Esto significa <div> no es focuable si tabindex no está presente.
  2. 7

    La tabindex atributo se asocia con HTML, no es específica de Bootstrap.

    Esta propiedad es responsable de indicar si un elemento es accesible por teclado de navegación.

    Usted necesita mirar hacia fuera para tres escenarios diferentes:

    1. Cuando la adición de tabindex = "0" a un elemento que esto significa es accesible por la navegación mediante el teclado pero el orden se define por los documentos de la orden de origen.

    2. Cuando la adición de un valor positivo para el atributo tabindex (por ejemplo tabindex = "1", tabindex = "2") los elementos son accesibles mediante el teclado de navegación y el orden se define por el valor del atributo.

    3. Cuando la adición de un valor negativo a tabindex (generalmente tabindex="-1") significa que el elemento es no se puede llegar por la navegación mediante el teclado, pero puede ser enfocado de usar el enfoque de la función en JS.

Dejar respuesta

Please enter your comment!
Please enter your name here