Focus Order
Ordem do foco
A ordem do foco é o caminho que o foco do teclado segue através de uma página. Deve coincidir com a ordem de leitura e de tarefas.
Outro exemplo
No checkout, Tab move pelos detalhes de contato, envio, pagamento, revisão e depois "Fazer pedido." Um painel de cupom não pula à frente. Quando o diálogo de endereço fecha, o foco retorna para o botão que o abriu.
Partes principais
- 01ponto de entrada
- 02paradas sequenciais
- 03Retorno do foco
Use-o quando
Mantenha a ordem do DOM igual à ordem de leitura e de tarefas. Mova o foco você mesmo apenas quando a interação mudar de contexto.
Não o use quando
Evite valores positivos de tabindex. Não use ordenação em CSS quando isso fizer com que os caminhos visuais e de teclado sejam diferentes.
Nome usado no código
DOM order + tabindex=0/-1 + deliberate focus restoration Antes de lançar
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 Ordem do foco (Focus Order). User context: No checkout, Tab move pelos detalhes de contato, envio, pagamento, revisão e depois "Fazer pedido." Um painel de cupom não pula à frente. Quando o diálogo de endereço fecha, o foco retorna para o botão que o abriu. Recommended pattern: Ordem do foco (Focus Order). Why it fits: Mantenha a ordem do DOM igual à ordem de leitura e de tarefas. Mova o foco você mesmo apenas quando a interação mudar de contexto. Do not use it when: Evite valores positivos de tabindex. Não use ordenação em CSS quando isso fizer com que os caminhos visuais e de teclado sejam diferentes. 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): O padrão cobre apenas o escopo listado. Ele não escolhe o estilo visual, decisão do produto ou exemplo de Vibulary. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Conferir este pedido
Review how Ordem do foco (Focus Order) is used now. Definition: A ordem do foco é o caminho que o foco do teclado segue através de uma página. Deve coincidir com a ordem de leitura e de tarefas. 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.