CSS の `reading-flow` プロパティで要素の読み上げ順を制御する

Flex や Grid などの CSS レイアウトを使っている場合や、ドラッグアンドドロップで自由に要素を配置できる UI を実装している場合、要素の見た目上の並び順と、DOM 上の並び順が異なることがあります。このような状態はキーボード操作やスクリーンリーダーなどの支援技術を使うユーザーにとって混乱を招く可能性があります。見た目とは異なる順番で要素にフォーカスがされるためです。

例えば、Flex コンテナ内の要素は flex-direction: column-reverse; を指定すると要素の順番を逆順にして表示できます。下記の例では、item 1、item 2、item 3 の順で DOM に配置されていますが、実際の見た目では item 3、item 2、item 1 の順で表示されます。

<div class="container">
  <div class="item">
    <button>Item 1</button>
  </div>
  <div class="item">
    <button>Item 2</button>
  </div>
  <div class="item">
    <button>Item 3</button>
  </div>
</div>
 
<style>
  .container {
    display: flex;
    flex-direction: column-reverse;
  }
  .item {
    width: 100px;
    height: 100px;
    border: 1px solid black;
  }
</style>

実際に Tab キーを押してフォーカスを移動させると、item 1 から item 2、item 3 と下から上の順でフォーカスが移動することが確認できます。

このようなアクセシビリティ上の問題が存在するため、row-reverse や column-reverse、order といった要素の表示順を制御するプロパティの使用は避けられていました。この問題を解決する手段として、reading-flow プロパティが提案されています。

reading-flow プロパティで読み上げ順を制御する

reading-flow プロパティは Flex または Grid コンテナ内の要素の読み上げ順もしくはキーボードフォーカスの順序を制御するためのプロパティです。reading-flow プロパティには以下の値が設定できます。

• auto：DOM の順序に従う（デフォルト）
• flex-visual：Flex コンテナのみで使用可能。writing-mode に従い、見た目上の順序に従う。例えば英語の場合は左から右に、アラビア語の場合は右から左に読む順序になる。
• flex-flow：Flex コンテナのみで使用可能。flex-flow プロパティの指定に従う
• grid-rows：Grid コンテナのみで使用可能。writing-mode に従い、列の見た目上の順序に従う
• grid-columns：Grid コンテナのみで使用可能。writing-mode に従い、行の見た目上の順序に従う
• grid-order：Grid コンテナのみで使用可能。order プロパティにより変更された順序に従う

記事の冒頭で紹介した Flex コンテナ内の要素の読み上げ順を制御する場合、reading-flow: flex-visual; を指定することで見た目上の順序に従って読み上げ順を制御できます。

.container {
  display: flex;
  flex-direction: column-reverse;
+ reading-flow: flex-visual;
}

item 1、item 2、item 3 の順でキーボードフォーカスが移動することが確認できます。

Grid コンテナではより複雑な並び順のレイアウトが可能ですが、同様に reading-flow: grid-row プロパティを使用して読み上げ順を制御できます。

まとめ

• Flex や Grid コンテナ内の要素の見た目上の順序と DOM 上の順序が異なる場合、アクセシビリティ上の問題が発生する可能性がある
• reading-flow プロパティは Flex または Grid コンテナ内の要素の読み上げ順もしくはキーボードフォーカスの順序を制御するためのプロパティ
• reading-flow: flex-visual; は Flex コンテナ内の要素の見た目上の順序に従って読み上げ順を制御する
• reading-flow: grid-row; は Grid コンテナ内の要素の列の見た目上の順序に従って読み上げ順を制御する

参考

• CSS Display Module Level 4
• [css-flexbox][css-grid] Providing authors with a method of opting into following the visual order, rather than logical order · Issue #7387 · w3c/csswg-drafts
• Request for developer feedback on reading-flow and elements with display: contents  |  Blog  |  Chrome for Developers
• フレックスアイテムの順序 - CSS: カスケーディングスタイルシート | MDN
• [css-flexbox][css-grid] Providing authors with a method of opting into following the visual order, rather than logical order · Issue #7387 · w3c/csswg-drafts