Cómo usar tabindex

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney
Alexandra Klepper
Alexandra Klepper

El orden de tabulación predeterminado que proporciona la posición del DOM de los elementos HTML semánticos es el siguiente: conveniente, pero es posible que, en ocasiones, debas modificar el orden de tabulación. Para mudanza en el HTML es ideal, pero puede que no sea factible. En estos casos, Puedes usar el atributo HTML tabindex para configurar explícitamente la pestaña de un elemento posición.

Navegadores compatibles

  • 1
  • 12
  • 1.5
  • ≤4

Origen

tabindex se puede aplicar a cualquier elemento, aunque no es necesariamente útil en todos los elementos y toma un rango de valores enteros. Con tabindex, puedes especificar un orden explícito para los elementos de página enfocables insertar un elemento que de otro modo no podría enfocarse en el orden de tabulación y quitar los elementos del orden de tabulación. Por ejemplo:

tabindex="0": Inserta un elemento en el orden natural de pestañas. El elemento puede Para enfocar el elemento, presiona Tab, y el elemento se puede enfocar llamando su método focus()

tabindex="-1": Quita un elemento del orden natural de pestañas, pero el elemento aún puede enfocarse llamando al método focus().

tabindex="5": Cualquier tabindex superior a 0 coloca ese elemento en primer plano. del orden natural de tabulación. Si hay varios elementos con un tabindex mayor que 0, el orden de tabulación empieza desde el valor más bajo que sea superior a cero y va subiendo.

Esto es especialmente cierto para los elementos que no son de entrada, como encabezados, imágenes o artículos títulos. Cuando sea posible, es mejor ordenar el código fuente de manera que la secuencia del DOM proporcione una un orden de tabulación lógico. Si usas tabindex, restríngelo al modo interactivo personalizado. controles como botones, pestañas, menús desplegables y campos de texto; es decir, los elementos al que el usuario puede esperar proporcionar una entrada.

Solo agrega tabindex al contenido interactivo. Incluso si el contenido es importante, como una imagen clave, los usuarios de lectores de pantalla pueden entenderlo sin agregar enfoque.

Administrar el enfoque a nivel de la página

A veces, tabindex es necesario para brindar una experiencia del usuario fluida. Por ejemplo: si creas una sola página robusta con diferentes secciones de contenido, en las que no todo el contenido es visible de forma simultánea. Esto podría implicar vínculos de navegación cambiar el contenido visible, sin tener que actualizar la página.

En este caso, identifica el área de contenido seleccionada y asígnale una tabindex de -1 y llama a su método focus. Esto garantiza que el contenido no aparezca en el orden natural de tabulación. Esta técnica, llamada administración de foco, mantiene la el contexto percibido por el usuario en sincronización con el contenido visual del sitio.

Cómo administrar el enfoque en los componentes

En algunos casos, también deberás administrar el foco a nivel de control, por ejemplo, con componentes personalizados.

Por ejemplo, el elemento select puede recibir un enfoque básico, pero una vez allí, puedes usar las teclas de flecha para ver opciones adicionales seleccionables. Si creas un elemento select personalizado, es importante replicarlo. de modo que los usuarios del teclado aún puedan interactuar con tu control.

Saber qué comportamientos del teclado implementar puede ser difícil. El Autoridad de Aplicaciones de Internet enriquecidas accesibles (ARIA) Prácticas enumera los tipos de componentes y los tipos de acciones de teclado que admiten.

Quizás estás trabajando en elementos personalizados que parecerse a un conjunto de botones de selección, pero con tu aspecto único de el comportamiento de los usuarios.

<radio-group>
    <radio-button>Water</radio-button>
    <radio-button>Coffee</radio-button>
    <radio-button>Tea</radio-button>
    <radio-button>Cola</radio-button>
    <radio-button>Ginger Ale</radio-button>
</radio-group>

Para determinar qué compatibilidad de teclado necesitan, consulta el Prácticas de creación de ARIA de la guía de YouTube. La sección 2 contiene una lista de patrones de diseño, que incluyen de características para las radios grupos, el componente existente que más coincide con tu nuevo elemento.

Uno de los comportamientos comunes del teclado que debería son las teclas de flecha hacia arriba/abajo/izquierda/derecha. Para agregar este comportamiento a la nueva utilizamos una técnica llamada tabindex itinerante.

El tabindex itinerante funciona estableciendo tabindex en -1 para todos los elementos secundarios, excepto para activo actualmente.

<radio-group>
  <radio-button tabindex="0">Water</radio-button>
  <radio-button tabindex="-1">Coffee</radio-button>
  <radio-button tabindex="-1">Tea</radio-button>
  <radio-button tabindex="-1">Cola</radio-button>
  <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

El componente usa un objeto de escucha de eventos de teclado para determinar qué tecla presiones del usuario; cuando esto sucede, establece la categoría de servicio del elemento tabindex en -1, establece en 0 el tabindex del elemento secundario que se debe enfocar y llama a enfoque en él.

<radio-group>
    <!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
    <radio-button tabindex="-1">Water</radio-button>
    <radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
    <radio-button tabindex="-1">Tea</radio-button>
    <radio-button tabindex="-1">Cola</radio-button>
    <radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>

Cuando el usuario llega al último (o el primero, según la dirección en la que moviendo el foco), el foco se vuelve a girar hacia el primero (o el último) hijo o hija.

Prueba el siguiente ejemplo. Examina el elemento en el Herramientas para desarrolladores para observar el desplazamiento del tabindex de un botón de selección a otro.

Trampas de teclado y modales

Es mejor evitar administrar el enfoque de forma manual, ya que puede conducir a situaciones complicadas. Por ejemplo, un widget de Autocomplete que intenta administrar el enfoque y captura el comportamiento de la pestaña, pero impide que el usuario la abandone hasta que termine. Esto se denomina trampa de teclado y puede ser muy frustrante para el usuario.

La sección 2.1.2 de las WCAG establece que el foco del teclado nunca debe bloquearse o atrapados en un elemento de página en particular. El usuario debe poder navegar hacia y desde todos los elementos de página usando solo el teclado.

La excepción a esta regla son los modales. Sin embargo, debes evitar el uso tabindex cuando se crea una ventana modal Con inert, puedes hacer lo siguiente: garantizar que los usuarios no puedan interactuar accidentalmente con un elemento (una trampa del teclado). Usa la <dialog>. que está inerte de forma predeterminada, para crear un modal para los usuarios y, al mismo tiempo, bloquear y las pestañas fuera de la ventana modal. Esto permite que el usuario se enfoque en un la selección requerida.