Los elementos HTML estándar, como <button> o <input>, tienen integrada la accesibilidad de teclado y se deben usar siempre que sea posible. Sin embargo, si necesitas compilar elementos interactivos personalizados, puedes crear el comportamiento del usuario esperado 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 entenderlo sin agregarle enfoque.
¿Qué es tabindex?
Si necesitas modificar el orden de tabulación predeterminado que proporcionan los elementos integrados, puedes usar el atributo HTML tabindex para establecer de manera explícita la posición de pestaña de un 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 otra manera no podría enfocarse en el orden de tabulación y quitar elementos de ese orden. Por ejemplo:
tabindex="0": Inserta un elemento en el orden natural de pestañas. Para enfocar el elemento, presiona Tab, y el elemento se puede enfocar llamando al método focus().
tabindex="-1": Quita un elemento del orden natural de pestañas, pero el elemento aún puede enfocarse llamando a su método focus().
tabindex="5": Cualquier tabindex superior a 0 coloca ese elemento al principio del orden natural de pestañas. Si hay varios elementos con un índice de tabulación mayor que 0, el orden de tabulación comienza desde el valor más bajo que sea superior a cero y asciende. El uso de un tabindex superior a 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, una persona debe realizar algunas pruebas de forma manual.
Intenta presionar la tecla Tab para navegar por tu sitio. ¿Puedes acceder a
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 sólida con diferentes secciones de contenido, en la que parte del contenido se oculta en distintos puntos de la carga de la página. Esto podría significar que los vínculos de navegación cambien el contenido visible sin que se actualice la página.
En este caso, identifica el área de contenido seleccionada, asígnale un elemento tabindex de -1 y llama a su método focus. Esto garantiza que el contenido no aparezca
en el orden natural de pestañas. Esta técnica, llamada administración de foco, mantiene el contexto percibido del usuario en sincronización con el contenido visual del sitio.
Cómo administrar el enfoque en los componentes
En algunos casos, también debes administrar el enfoque en el nivel de control, como con los elementos personalizados.
Saber qué comportamientos del teclado implementar puede ser difícil. En la guía Prácticas de creación de aplicaciones de Internet enriquecidas accesibles (ARIA), se enumeran los tipos de componentes y las 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 aún se puede enfocar llamando al 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 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 evita que las tecnologías de accesibilidad seleccionen o lean los elementos.
Evita tabindex > 0
Cualquier tabindex superior a 0 salta al elemento al principio del orden natural de pestañas. Si hay varios elementos con un tabindex mayor que 0, el orden de tabulación comienza desde el valor más bajo mayor que cero y avanza hacia arriba.
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 de DOM, no de tabulación. Si necesitas que un elemento aparezca antes en el orden de tabulación, debes moverlo a un lugar anterior del 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 "Ningún elemento tiene un valor de [tabindex] mayor que 0".
Usar "roving tabindex"
Si estás compilando un componente complejo, es posible que debas agregar compatibilidad con el 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 adicionales.
Para implementar funciones similares en tus propios componentes, puedes usar una técnica conocida como "tabindex itinerante". El tabindex itinerante funciona estableciendo tabindex en -1 para todos los elementos secundarios, excepto el que está activo actualmente. Luego, el componente usa un objeto de escucha de eventos del teclado para determinar qué tecla presionó el usuario.
Cuando esto sucede, el componente establece en -1 el tabindex del elemento secundario enfocado anteriormente, establece en 0 el tabindex del elemento secundario que se debe enfocar 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 al teclado
Si no estás seguro de qué nivel de compatibilidad de 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 los patrones comunes de la IU y se identifican las claves que tus componentes deben admitir.