Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

reading-flow

Experimental: これは実験的な機能です。

本番で使用する前にブラウザー互換性一覧表をチェックしてください。

reading-flow は CSS のプロパティで、ブロック、フレックス、グリッドの各レイアウトの子要素の読み順を変更することができます。これは、タブ操作でリンクやボタンを順に選択するといった連続的なナビゲーションを使用されている際、音声化される順序や移動先の順序に影響を与えます。

アクセシビリティ読み取り順序

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`reading-flow` 実験的	137	137			137
`flex-flow` 実験的	137	137			137
`flex-visual` 実験的	137	137			137
`grid-columns` 実験的	137	137			137
`grid-order` 実験的	137	137			137
`grid-rows` 実験的	137	137			137
`normal` 実験的	137	137			137
`source-order` 実験的	137	137			137
その他
`css.properties.reading-order` 実験的 reading-order は CSS のプロパティで、読みフローコンテナーの子要素が、その要素の兄弟要素に対して相対的に読まれる順序を変更することができることを可能にします。	137	137			137

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

CSS

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

CSS Grid-rows demo.

CSS Grid-columns demo.

CSS Flex-visual demo.