Roving tabindex
Índice de pestaña móvil
El índice de pestaña móvil da un solo punto de Tabulación al grupo. Las teclas de flecha mueven luego el enfoque entre los elementos dentro del grupo.
one tabindex=0 + remaining tabindex=-1 + arrow key swaps the active itemtabindex=0Cursiva-1Enlace-1Citar-1focus() + swap tabindexone tabindex=0 + remaining tabindex=-1 + arrow key swaps the active itemA11YOtro ejemplo
Una barra de herramientas comienza con Negrita en tabindex 0. Los otros botones usan -1. Flecha derecha mueve 0 a Cursiva.
Partes principales
- 01Widget compuesto
- 02Una sola parada de tabulación
- 03elementos inactivos
- 04regla de tecla de flecha
- 05Elemento activo actualizado
- 06Salida de pestaña
Úsalo cuando
Úsalo para widgets compuestos con comportamiento documentado de teclas de flecha. Mantén exactamente un elemento en el orden normal de Tab.
No lo uses cuando
No lo uses para enlaces no relacionados o toda la página. No dejes dos elementos con tabindex 0.
Nombre usado en código
one tabindex=0 + remaining tabindex=-1 + arrow key swaps the active item Antes de lanzarlo
Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery.
Outcome: Complete the task with Índice de pestaña móvil (Roving tabindex). User context: Una barra de herramientas comienza con Negrita en tabindex 0. Los otros botones usan -1. Flecha derecha mueve 0 a Cursiva. Recommended pattern: Índice de pestaña móvil (Roving tabindex). Why it fits: Úsalo para widgets compuestos con comportamiento documentado de teclas de flecha. Mantén exactamente un elemento en el orden normal de Tab. Do not use it when: No lo uses para enlaces no relacionados o toda la página. No dejes dos elementos con tabindex 0. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Es oficial para esa fuente. Otras plataformas o equipos pueden usar el término de otra manera. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Índice de pestaña móvil (Roving tabindex) is used now. Definition: El índice de pestaña móvil da un solo punto de Tabulación al grupo. Las teclas de flecha mueven luego el enfoque entre los elementos dentro del grupo. Release checks: Give assistive tools the control’s name (accessible name), purpose (role), value, and state. Check keyboard use, visible focus, target size, disabled and busy states, feedback, and recovery. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.