reading-flow

概要

reading-flowは、FlexboxやGridレイアウトで視覚的な順序とDOMの順序が異なる場合に、読み上げやフォーカスナビゲーションの順序を制御するCSSプロパティです。orderプロパティやGridの配置でDOMと異なる順序で表示される要素の、論理的な読み取り順序を保証します。アクセシビリティとビジュアルデザインの両立において重要な役割を果たします。

対応ブラウザ

基本構文

.grid-container {
  display: grid;
  reading-flow: grid-rows;
}

実務での使いどころ

• Gridレイアウトの読み上げ順序制御

  CSSグリッドで視覚的に並べ替えた要素の読み上げ順序を、ユーザーが期待する論理的な順序に合わせます。

注意点

アクセシビリティ

• DOMの順序と視覚的な順序が一致しない場合、reading-flowを設定してスクリーンリーダーやキーボードナビゲーションの体験を改善してください。

参考リンク

• MDN Web Docs — reading-flow