Chrome 137 introduce CSS `reading-flow`: navegación por teclado siguiendo el orden visual

• A partir de Chrome 137, las nuevas propiedades CSS reading-flow y reading-order resuelven el problema de la falta de coincidencia entre el diseño visual y el orden del foco del teclado
• Los diseños existentes con flex/grid pueden hacer que el orden del DOM y el orden visual no coincidan, lo que genera confusión para los usuarios al usar herramientas de accesibilidad o navegación por teclado
• reading-flow controla el movimiento del foco según el orden del diseño visual, y reading-order permite asignar manualmente el orden de cada elemento
• Es más intuitivo y favorable para la accesibilidad que el método tradicional con tabindex, y delimita localmente la navegación dentro del diseño
• Hay varios ejemplos y prácticas disponibles en chrome.dev

---

¿Qué es reading-flow?

• Especifica en un diseño el orden en que los elementos recibirán el foco según la secuencia de navegación
• Valor predeterminado: normal → mantiene el orden existente del DOM
• Ejemplos de uso:
  • Flex: flex-visual, flex-flow
  • Grid: grid-rows, grid-columns, grid-order

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

• Permite mover el foco según la posición visual en lugar del orden del DOM

reading-order: asignación manual del orden

• Al configurar reading-flow: source-order, se puede asignar un orden numérico a cada elemento

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

• Según los valores de orden definidos, es posible ajustar la prioridad del orden de navegación

Comparación con el método tradicional de tabindex

• tabindex puede provocar problemas de inconsistencia con las herramientas de accesibilidad
• También puede generar saltos de foco por valores duplicados o entre elementos externos
• reading-flow define un alcance de foco para limitar la navegación interna y dejar clara la navegación bidireccional
• Los valores positivos de tabindex se ignoran, aunque todavía se puede configurar tabindex individualmente en los elementos internos

Resumen

• reading-flow es un enfoque moderno para definir el orden del foco centrado en el diseño
• Al hacer coincidir el orden visual y la navegación por teclado, mejora la accesibilidad y evita la confusión del usuario
• En la práctica, puede ofrecer una experiencia más predecible y consistente que el uso tradicional de tabindex