Los elementos HTML estándar, como <button> o <input>, tienen accesibilidad de teclado integrada de forma gratuita. Sin embargo, si compilas componentes interactivos personalizados, usa el atributo tabindex para asegurarte de que se pueda acceder a ellos con el teclado.
Verifica si se puede acceder a los controles con el teclado
Una herramienta como Lighthouse es excelente para detectar ciertos problemas de accesibilidad, pero solo una persona puede probar algunas opciones.
Intenta presionar la tecla Tab para navegar por tu sitio. ¿Puedes llegar a todos los
controles interactivos de la página? De lo contrario, es posible que debas usar tabindex para mejorar la capacidad de enfoque de esos controles.
Cómo insertar un elemento en el orden de tabulación
Inserta un elemento en el orden natural de tabulación 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 natural de tabulación, pero aún se puede enfocar llamando a su método focus().
Ten en cuenta que 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 ese orden.
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, lo que evita que las tecnologías de accesibilidad seleccionen o lean los elementos.
Evita tabindex > 0
Cualquier tabindex mayor que 0 salta el elemento al principio del orden de tabulación natural. 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 del DOM, no con 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.
Lighthouse facilita la identificación de elementos con un tabindex > 0. Ejecuta la auditoría de accesibilidad (Lighthouse > Options > Accessibility) y busca los resultados de la auditoría "Ningún elemento tiene un valor [tabindex] superior a 0".
Crea componentes accesibles con "tabindex itinerante"
Si compilas un componente complejo, es posible que debas agregar compatibilidad adicional con el teclado más allá del enfoque. Considera el elemento select integrado. Es enfocable y puedes usar las teclas de flecha para exponer funciones adicionales (las opciones seleccionables).
Para implementar una funcionalidad similar en tus propios componentes, usa una técnica conocida como "tabindex itinerante". El tabindex itinerante funciona estableciendo tabindex en -1 para todos los elementos secundarios, excepto para el que está activo en ese momento. 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 el tabindex del elemento secundario enfocado anteriormente en -1, el 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 al teclado
Si no estás seguro de 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 práctica, se enumeran los patrones comunes de la IU y se identifican las claves que deben admitir tus componentes.