Chrome 137 introduz o CSS `reading-flow`: navegação por teclado seguindo a ordem visual

• A partir do Chrome 137, as novas propriedades CSS reading-flow e reading-order resolvem o problema da incompatibilidade entre o layout visual e a ordem de foco do teclado
• Os layouts flex/grid existentes podem ter desalinhamento entre a ordem do DOM e a ordem visual, causando confusão para usuários de ferramentas de acessibilidade ou navegação por teclado
• reading-flow controla a movimentação do foco com base na ordem visual do layout, e reading-order permite definir manualmente a ordem de cada item
• Mais intuitivo e melhor para acessibilidade do que a abordagem tradicional com tabindex, delimitando localmente o escopo da navegação dentro do layout
• Vários exemplos e exercícios práticos estão disponíveis em chrome.dev

---

O que é reading-flow?

• Em um layout, define a ordem em que os elementos recebem foco conforme a sequência de navegação
• Valor padrão: normal → mantém a ordem existente do DOM
• Exemplos de uso:
  • Flex: flex-visual, flex-flow
  • Grid: grid-rows, grid-columns, grid-order

  .box {  
    reading-flow: flex-visual;  
  }  
  

• Permite mover o foco com base na posição visual, e não na ordem do DOM

reading-order: definição manual da ordem

• Ao definir reading-flow: source-order, é possível atribuir uma ordem numérica a cada item

  .wrapper {  
    reading-flow: source-order;  
  }  
  .top {  
    reading-order: -1;  
  }  
  

• Com base nos valores definidos, é possível ajustar a prioridade da ordem de navegação

Comparação com a abordagem tradicional de tabindex

• tabindex pode causar problemas de inconsistência com ferramentas de acessibilidade
• Também pode gerar saltos de foco entre valores duplicados ou elementos externos
• reading-flow define um escopo de foco para limitar a navegação interna e deixar clara a navegação bidirecional
• Valores positivos de tabindex são ignorados, enquanto os elementos internos ainda podem ter tabindex definido individualmente

Resumo

• reading-flow é uma abordagem moderna para definir a ordem de foco com base no layout
• Ao alinhar ordem visual e navegação por teclado, melhora a acessibilidade e evita confusão para o usuário
• Na prática, oferece uma experiência mais previsível e consistente do que o tabindex tradicional