Chrome 137 introduit `reading-flow` en CSS : une navigation clavier qui suit l’ordre visuel

• À partir de Chrome 137, les nouvelles propriétés CSS reading-flow et reading-order résolvent le problème de décalage entre la disposition visuelle et l’ordre du focus au clavier
• Avec les layouts flex/grid existants, l’ordre du DOM peut diverger de l’ordre visuel, ce qui peut perturber les utilisateurs des outils d’accessibilité ou de la navigation au clavier
• reading-flow contrôle le déplacement du focus selon l’ordre de la disposition visuelle, et reading-order permet de définir manuellement l’ordre de chaque élément
• Plus intuitif que l’approche classique avec tabindex et plus favorable à l’accessibilité, il limite localement la navigation à l’intérieur d’une mise en page
• Divers exemples et démonstrations pratiques sont disponibles sur chrome.dev

---

Qu’est-ce que reading-flow ?

• Définit, dans une mise en page, l’ordre dans lequel les éléments reçoivent le focus selon l’ordre de navigation
• Valeur par défaut : normal → ordre du DOM inchangé
• Exemples d’utilisation :
  • Flex : flex-visual, flex-flow
  • Grid : grid-rows, grid-columns, grid-order

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

• Permet de déplacer le focus selon la position visuelle plutôt que selon l’ordre du DOM

reading-order : définir un ordre manuel

• Avec reading-flow: source-order, il est possible d’attribuer un ordre numérique à chaque élément

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

• La valeur d’ordre définie permet d’ajuster la priorité dans l’ordre de navigation

Comparaison avec l’approche classique tabindex

• tabindex peut entraîner des problèmes d’incohérence avec les outils d’accessibilité
• Il peut aussi provoquer des sauts de focus entre valeurs dupliquées ou éléments externes
• reading-flow définit une portée du focus pour limiter la navigation interne et clarifier la navigation bidirectionnelle
• Les valeurs positives de tabindex sont ignorées, mais il reste possible de définir individuellement un tabindex sur les éléments internes

Résumé

• reading-flow est une approche moderne pour définir l’ordre du focus à partir de la mise en page
• En alignant l’ordre visuel et la navigation au clavier, il améliore l’accessibilité et évite la confusion des utilisateurs
• En pratique, il offre une expérience plus prévisible et plus cohérente que tabindex