Focus Order
Orden de enfoque
El orden de enfoque es la ruta que sigue el enfoque del teclado a través de una página. Debe coincidir con el orden de lectura y de tareas.
Otro ejemplo
En el pago, Tab se mueve por los detalles de contacto, envío, pago, revisión y luego «Realizar pedido». Un panel de cupones no se salta. Cuando se cierra el cuadro de dirección, el foco vuelve al botón que lo abrió.
Partes principales
- 01punto de entrada
- 02paradas secuenciales
- 03Retorno del enfoque
Úsalo cuando
Mantener el orden del DOM igual que el orden de lectura y de tareas. Mueve el enfoque tú mismo solo cuando la interacción cambie de contexto.
No lo uses cuando
Evita valores positivos de tabindex. No uses ordenación en CSS cuando haga que los caminos visual y de teclado difieran.
Nombre usado en código
DOM order + tabindex=0/-1 + deliberate focus restoration Antes de lanzarlo
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Orden de enfoque (Focus Order). User context: En el pago, Tab se mueve por los detalles de contacto, envío, pago, revisión y luego «Realizar pedido». Un panel de cupones no se salta. Cuando se cierra el cuadro de dirección, el foco vuelve al botón que lo abrió. Recommended pattern: Orden de enfoque (Focus Order). Why it fits: Mantener el orden del DOM igual que el orden de lectura y de tareas. Mueve el enfoque tú mismo solo cuando la interacción cambie de contexto. Do not use it when: Evita valores positivos de tabindex. No uses ordenación en CSS cuando haga que los caminos visual y de teclado difieran. 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): El estándar cubre únicamente el alcance listado. No elige el estilo visual, la decisión del producto ni el ejemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Orden de enfoque (Focus Order) is used now. Definition: El orden de enfoque es la ruta que sigue el enfoque del teclado a través de una página. Debe coincidir con el orden de lectura y de tareas. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.