Cómo controlar el enfoque con tabindex

Rob Dodson

Alexandra Klepper

Los elementos HTML estándar, como <button> o <input>, tienen accesibilidad de teclado integradas y deben usarse siempre que sea posible. Sin embargo, si necesitas compilar elementos interactivos personalizados, puedes crear el comportamiento esperado del usuario Se está agregando tabindex.

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

¿Qué es tabindex?

En la ocasión en que necesites modificar el orden de tabulación predeterminado que proporciona la app puedes usar el atributo HTML tabindex para establecer explícitamente la posición de pestaña del elemento.

tabindex se puede aplicar a cualquier elemento, aunque solo debe aplicarse a elementos interactivos 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. El uso de un tabindex superior a 0 se considera una antipatrón.

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

Una herramienta como Lighthouse es genial para detectar automáticamente ciertos aspectos de Sin embargo, algunas pruebas aún deben realizarse de forma manual por una persona.

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

Administrar el enfoque a nivel de la página

A veces, tabindex ayuda a crear una experiencia del usuario fluida. Por ejemplo: si creas una sola página robusta con diferentes secciones de contenido, en las que algunas el contenido está oculto en diferentes puntos de la carga de la página. Esto podría significar los vínculos de navegación cambian 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 Elementos personalizados.

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.

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

Inserta un elemento en el orden natural de pestañas 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 pestañas

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 natural de pestañas, pero el elemento aún puede enfocado 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 naturalmente 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 asistencia seleccionen o lean los elementos.

Evita tabindex > 0

Cualquier tabindex mayor que 0 salta al elemento al principio de la pestaña natural. en el orden personalizado. Si hay varios elementos con un tabindex mayor que 0, la pestaña orden empieza con el valor más bajo mayor que cero y va subiendo.

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

Con Lighthouse, puedes identificar elementos con un tabindex > 0. Ejecuta el Auditoría de accesibilidad (Lighthouse > Opciones > Accesibilidad) y busca resultados de "Ningún elemento tiene un valor [tabindex] superior a 0" auditoría de Cloud.

Usar "roving tabindex"

Si estás compilando un componente complejo, es posible que debas agregar teclado más allá del enfoque. Cuando sea posible, usa el elemento select integrado. Es enfocable y permite que las teclas de flecha expongan opciones seleccionables opciones de estado.

Para implementar funciones similares en tus componentes, usa una técnica conocida como "roving tabindex". El tabindex itinerante funciona estableciendo tabindex en -1 para todas las secundarias, excepto la que está activa en ese momento. Luego, el componente usa un teclado objeto de escucha de eventos para determinar qué tecla presionó el usuario.

Cuando esto sucede, el componente establece el tabindex del elemento secundario enfocado anteriormente. a -1, establece en 0 el tabindex del elemento secundario que se debe enfocar y llama a 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 al teclado

Si no estás seguro de qué nivel de compatibilidad de teclado podrían tener tus componentes personalizados, que necesitas, puedes consultar el Prácticas de creación de ARIA 1.1. En esta guía se enumeran patrones comunes de la IU e identifica qué claves que los componentes deben admitir.