はじめに
みなさんは、視覚的な要素の順序とDOMの順序が一致するように、GridやFlexで、アイテムの順序を制御するプロパティは使わないようにしていたとおもいます。
しかし、Chrome 137以降では、reading-flowとreading-orderというプロパティが使えるようになり、DOMの読み上げ順やフォーカス順がコントロールできるようになりました。
そのため、この記事ではreading-flowとreading-orderについて紹介します。
reading-flow とは
reading-flowは、reading-flowを指定したコンテナ内の要素の読み上げ順やキーボードフォーカスの順序を制御するためのプロパティです。
指定できる値は以下の通りです。
-
normal
- DOMの順序通り（デフォルト）
-
flex-visual
-
writing-modeに従い、見た目上の順序に従う - flexの時に使用できる
-
-
flex-flow
-
flex-flowプロパティに従う - flexの時に使用できる
-
-
grid-rows
-
writing-modeに従い、行の見た目上の順序に従う - gridの時に使用できる
-
-
grid-columns
-
writing-modeに従い、列の見た目上の順序に従う - gridの時に使用できる
-
-
grid-order
-
orderプロパティで変更された順に従う - gridの時に使用できる
-
Flexのサンプル
以下のサンプルは、Chrome 137以降のバージョンで確認してください 🙏
See the Pen
CSS reading-order by degudegu2510 | Qiita (@degudegu2510)
on CodePen.
このサンプルは、flex-direction: row-reverse; で、表示順番が右から左に表示されるようにし、Orderで、２の要素をorder: 1;で、左側に変更しています。
-
defaultの読み上げ順・フォーカス順
- DOMの順番通りになるため、
1 → 2 → 3となる
- DOMの順番通りになるため、
-
flex-visualの読み上げ順・フォーカス順
-
writing-mode通りになるため、2 → 3 → 1となる
-
-
flex-flowの読み上げ順・フォーカス順
-
flex-direction: row-reverse;が指定されているため、1 → 3 → 2となる
-
Gridのサンプル
以下のサンプルは、Chrome 137以降のバージョンで確認してください 🙏
See the Pen
CSS reading-order – flex by degudegu2510 | Qiita (@degudegu2510)
on CodePen.
このサンプルは、grid-area で、レイアウトして、
orderで、1 → 3 → 2 → 4に変更しています。
-
defaultの読み上げ順・フォーカス順
- DOMの順番通りになるため、
1 → 2 → 3 → 4となる
- DOMの順番通りになるため、
-
grid-rowsの読み上げ順・フォーカス順
-
writing-mode通りに従って、行の見た目の順序になるため、1 → 4 → 2 → 3となる
-
-
grid-columnsの読み上げ順・フォーカス順
-
writing-mode通りに従って、列の見た目の順序になるため、1 → 4 → 3 → 2となる
-
-
grid-orderの読み上げ順・フォーカス順
-
order通りに従って、1 → 3 → 2 → 4となる
-
reading-order とは
reading-orderは、reading-flow プロパティで設定された順序を上書きして、アイテムの順番を制御するためのプロパティです。
指定できる値は
また、reading-order: -1 を指定すると、reading-flow プロパティで設定された順序を上書きして、一番先に読み上げ、フォーカスされます。
reading-orderのサンプル
以下のサンプルは、Chrome 137以降のバージョンで確認してください 🙏
See the Pen
CSS reading-order – flex by degudegu2510 | Qiita (@degudegu2510)
on CodePen.
このサンプルは、flex-direction: row-reverse; で、表示順番が右から左に表示されるようにし、Orderで、２の要素をorder: 1;で左側に変更し、reading-flow: flex-visual;を指定しているため、読み上げ順・フォーカス順は、2 → 3 → 1 なるのですが、3の要素にreading-order: -1を指定しているため、3 → 2 →1になっています。
まとめ
この記事では、CSSで読み上げ順をコントロールする方法を紹介しました。
ぜひこの記事を参考に、読み上げ順も制御して、アクセシビリティにも適したWebサイトを作ってみてください
最後まで読んでくださってありがとうございます！
普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。
Views: 0
