Gestionar tabindex dinámico en widgets
Permita que las teclas de flecha se desplacen dentro de un control compuesto.
Gestionar tabindex dinámico en widgets es una lección gratuita de Web Accessibility Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Web Accessibility Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Web Accessibility Academy incluye 4 lecciones en total.
Un solo punto para todo un widget
En una barra de herramientas o un grupo de botones de opción, Tab debería llegar al widget una sola vez, no a cada elemento. Roving tabindex es el patrón que lo hace posible.
La idea principal
En cada momento, exactamente un elemento tiene tabindex="0". Todos los demás tienen tabindex="-1", de modo que Tab entra al grupo por un único punto.
Configuración inicial
Al cargar, asigne tabindex="0" al primer elemento o al elemento seleccionado y establezca tabindex="-1" en el resto. Ese es el estado de reposo del grupo.
<button tabindex="0">Bold</button>
<button tabindex="-1">Italic</button>Las teclas de flecha permiten moverse dentro
Una vez dentro, el usuario se mueve entre los elementos con las teclas de flecha, no con Tab. Tab sigue sirviendo para salir de todo el widget.
El paso de roving
Al pulsar una flecha, debe hacer dos cosas: establecer -1 en el elemento anterior y 0 en el nuevo; después, llamar a focus() sobre este último. 🧭
old.tabIndex = -1;
next.tabIndex = 0;
next.focus();Por qué solo debe haber un cero
Mantener un único tabindex="0" significa que Tab siempre lleva al elemento que el usuario utilizó por última vez, por lo que volver al widget resulta natural.
Siga el patrón de APG
La ARIA Authoring Practices Guide especifica las teclas exactas para cada widget. Siga su mapa de teclado en lugar de inventar uno.
Desplazamiento circular opcional
Muchos widgets hacen que el movimiento con las flechas sea circular: al pulsar la flecha derecha sobre el último elemento, se vuelve al primero. Consulte la APG para saber si su patrón debe ser circular.
También Home y End
Los widgets compuestos suelen añadir Home y End para saltar al primer y al último elemento, un pequeño detalle que agiliza la navegación.
Roving frente a aria-activedescendant
Roving tabindex mueve el foco real del DOM. La alternativa, aria-activedescendant, mantiene el foco en un contenedor y apunta a un elemento activo virtual.
Pruebe el ciclo completo
Entre con Tab, recorra todos los elementos con las flechas, salga de nuevo con Tab y vuelva a entrar con Tab para confirmar que el foco regresa al último elemento utilizado.
Comprobación rápida
En una barra de herramientas con roving tabindex, ¿cuántos elementos tienen tabindex="0" en un momento dado?
Repaso
Ha dominado roving tabindex: un elemento tiene 0, el resto -1, las teclas de flecha desplazan el 0 entre ellos y Tab pasa por delante de todo el widget. 🚀
Preguntas frecuentes
¿La lección «Gestionar tabindex dinámico en widgets» es gratis?
Sí — el texto completo de «Gestionar tabindex dinámico en widgets» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Web Accessibility Academy, actualiza a CoddyKit PRO. El curso de Web Accessibility Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Gestionar tabindex dinámico en widgets»?
Permita que las teclas de flecha se desplacen dentro de un control compuesto. Practicas Web Accessibility Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Web Accessibility Academy?
No se requiere experiencia previa. Web Accessibility Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Gestionar tabindex dinámico en widgets»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Web Accessibility Academy?
Sí. Cada lección de Web Accessibility Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- tabindex 0, -1 y nunca positivo
- Mover el foco después de una acción
- Devolver el foco al cerrar una capa
- Gestionar tabindex dinámico en widgets