Cómo controlar el enfoque con tabindex

Rob Dodson

Alexandra Klepper

Los elementos HTML estándar, como <button> o <input>, tienen accesibilidad con el teclado integrada y se deben usar siempre que sea posible. Sin embargo, si necesitas crear elementos interactivos personalizados, puedes agregar tabindex para crear el comportamiento del usuario esperado.

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

¿Qué es tabindex?

En caso de que necesites modificar el orden de tabulación predeterminado que proporcionan los elementos integrados, puedes usar el atributo HTML tabindex para establecer de forma explícita la posición de tabulación de un elemento.

tabindex se puede aplicar a cualquier elemento, aunque solo se debe aplicar a elementos interactivos y admite un rango de valores enteros. Con tabindex, puedes especificar un orden explícito para los elementos de la página enfocables, insertar un elemento que, de otro modo, no se podría enfocar en el orden de tabulación y quitar elementos del orden de tabulación. Por ejemplo:

tabindex="0": Inserta un elemento en el orden de tabulación natural. Se puede enfocar el elemento presionando Tab o llamando a su método focus().

tabindex="-1": Quita un elemento del orden de tabulación natural, pero el elemento aún se puede enfocar llamando a su método focus().

tabindex="5": Cualquier tabindex mayor que 0 lleva ese elemento al frente del orden de tabulación natural. Si hay varios elementos con un tabindex mayor que 0, el orden de tabulación comienza con el valor más bajo que sea mayor que cero y aumenta progresivamente. Usar un tabindex mayor que 0 se considera un antipatrón.

Asegúrate de que se pueda acceder a los controles con el teclado

Una herramienta como Lighthouse es excelente para detectar automáticamente ciertos problemas de accesibilidad. Sin embargo, algunas pruebas deben realizarse manualmente.

Intenta presionar la tecla Tab para navegar por tu sitio. ¿Puedes alcanzar todos los controles interactivos de la página? De lo contrario, es posible que debas usar tabindex para mejorar el enfoque de esos controles.

Administra el enfoque a nivel de la página

A veces, tabindex ayuda a crear una experiencia del usuario fluida. Por ejemplo, si compilas una página única sólida con diferentes secciones de contenido, en la que parte del contenido está oculto en diferentes puntos de la carga de la página. Esto podría significar que los vínculos de navegación cambian el contenido visible sin que se actualice la página.

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

Administra el enfoque en los componentes

En algunos casos, también debes administrar el enfoque a nivel del control, como con los elementos personalizados.

Puede ser difícil saber qué comportamientos del teclado implementar. En la guía de Prácticas de creación de aplicaciones de Internet enriquecidas y accesibles (ARIA), se enumeran los tipos de componentes y los tipos de acciones del teclado que admiten.

Cómo insertar un elemento en el orden de tabulación

Inserta un elemento en el orden de tabulación natural con tabindex="0". Por ejemplo:

<div tabindex="0">Focus me with the TAB key</div>

Para enfocar un elemento, presiona la tecla Tab o llama al método focus() del elemento.

Cómo quitar un elemento del orden de tabulación

Quita un elemento con tabindex="-1". Por ejemplo:

<button tabindex="-1">Can't reach me with the TAB key!</button>

Esto quita un elemento del orden de tabulación natural, pero el elemento aún se puede enfocar llamando a su método focus().

Aplicar tabindex="-1" a un elemento no afecta a sus elementos secundarios. Si están en el orden de tabulación de forma natural o debido a un valor de tabindex, permanecerán en el orden de tabulación. Para quitar un elemento y todos sus elementos secundarios del orden de tabulación, considera usar el polyfill inert de WICG. El polyfill emula el comportamiento de un atributo inert propuesto, que impide que las tecnologías de accesibilidad seleccionen o lean elementos.

Evita tabindex > 0

Cualquier valor de tabindex mayor que 0 hace que el elemento salte al principio del orden de tabulación natural. Si hay varios elementos con un valor de tabindex superior a 0, el orden de tabulación comienza con el valor más bajo superior a cero y aumenta progresivamente.

Usar un tabindex mayor que 0 se considera un antipatrón porque los lectores de pantalla navegan por la página en orden del DOM, no en orden de tabulación. Si necesitas que un elemento aparezca antes en el orden de tabulación, debes moverlo a un lugar anterior en el DOM.

Con Lighthouse, puedes identificar elementos con un tabindex > 0. Ejecuta la auditoría de accesibilidad (Lighthouse > Opciones > Accesibilidad) y busca los resultados de la auditoría "No hay ningún elemento con un valor de [tabindex] superior a 0".

Usar "tabindex itinerante"

Si compilas un componente complejo, es posible que debas agregar compatibilidad adicional con el teclado más allá del enfoque. Cuando sea posible, usa el elemento select integrado. Se puede enfocar y permite que las teclas de flecha expongan opciones seleccionables adicionales.

Para implementar funciones similares en tus propios componentes, puedes usar una técnica conocida como "tabindex itinerante". El tabindex itinerante funciona configurando tabindex en -1 para todos los elementos secundarios, excepto el que está activo actualmente. Luego, el componente usa un objeto de escucha de eventos de teclado para determinar qué tecla presionó el usuario.

Cuando esto sucede, el componente establece el valor tabindex del elemento secundario enfocado anteriormente en -1, establece el valor tabindex del elemento secundario que se enfocará en 0 y llama al método focus() en él.

Antes

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="0">Redo</button>
  <button tabindex="-1">Cut</button>
</div>

Después

<div role="toolbar">
  <button tabindex="-1">Undo</button>
  <button tabindex="-1">Redo</button>
  <button tabindex="0">Cut</button>
</div>

Recetas de acceso con el teclado

Si no sabes qué nivel de compatibilidad con el teclado podrían necesitar tus componentes personalizados, puedes consultar las Prácticas de creación de ARIA 1.1. En esta guía, se enumeran patrones de IU comunes y se identifican las teclas que deben admitir tus componentes.