Chrome 137でCSS `reading-flow` を導入: 視覚的順序に従うキーボードナビゲーション

• Chrome 137から新たに導入された CSS reading-flow と reading-order プロパティ は、視覚的レイアウトとキーボードフォーカス順序が一致しない問題を解決する
• 従来のflex/gridレイアウトでは DOM順序と視覚的順序がずれることがあり、支援技術やキーボード操作時にユーザーの混乱を招いていた
• reading-flow は視覚的レイアウト順を基準にフォーカス移動を制御し、reading-order は項目ごとの手動順序指定を可能にする
• 従来のtabindex方式より直感的でアクセシビリティに有利で、レイアウト内部のナビゲーションをローカルにスコープ化する
• さまざまな例やハンズオンは chrome.dev で提供されている

---

reading-flow とは?

• レイアウト内で要素が ナビゲーション順に従ってフォーカスを受ける順序を指定する
• デフォルト値: normal → 従来どおりDOM順序そのまま
• 使用例:
  • Flex: flex-visual, flex-flow
  • Grid: grid-rows, grid-columns, grid-order

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

• DOM順序ではなく 視覚的位置ベースでフォーカス移動が可能

reading-order: 手動の順序指定

• reading-flow: source-order を設定すると、各項目に 数値の順序を付与可能

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

• 指定した順序値に応じて ナビゲーション順序の優先度を調整可能

従来の tabindex 方式との比較

• tabindex は支援技術との 不一致の問題が生じるおそれがある
• 重複値や外部要素間での フォーカスジャンプ問題が発生する
• reading-flow はフォーカススコープを定義して 内部ナビゲーションを制限し、双方向ナビゲーションを明確にする
• 正の tabindex は 無視されるが、内部要素には引き続き個別に tabindex を設定できる

まとめ

• reading-flow は レイアウト中心のフォーカス順序指定のための最新アプローチ
• 視覚的な秩序とキーボードナビゲーションの一致により、アクセシビリティ向上とユーザーの混乱防止を実現
• 実務で適用する際、従来の tabindex よりも 予測可能で一貫した体験を提供する