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.

Navegadores compatibles

• (1)
• (12)
• 1,5
• ≤4

Origen

Sugerencia: Obtén más información sobre el enfoque del teclado en la Conoce el curso Accesibilidad.

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.

Nota: Siempre que sea posible, usa un elemento HTML integrado en lugar de crear tu tu propia versión personalizada. Por ejemplo, <button> ya es totalmente compatible con el teclado. Esto te ahorra tener que administrar tabindex y agregar semántica con ARIA.

¿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.

Sugerencia: Obtén información sobre las ofertas automatizadas y pruebas manuales de accesibilidad en Aprende sobre Accesibilidad.

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.

Advertencia: Si no ves un indicador de enfoque, es posible que el CSS lo haya ocultado. Cheque para :focus { outline: none; }. Puedes obtener información para solucionar este problema en nuestra guía sobre diseño del enfoque.

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.

Precaución: El polyfill inert es experimental y es posible que no funcione como se espera en todos los casos. Pruébala con cuidado antes de usarlo en producción.

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>

Nota: Los atributos role="" te permiten cambiar la semántica de un elemento, por lo que un lector de pantalla lo anuncia correctamente. Puedes obtener más información sobre ellas en nuestra sobre los conceptos básicos de los lectores de pantalla.

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.