【CSS】CSSで読み上げ順をコントロールする方法

はじめに

みなさんは、視覚的な要素の順序と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となる
• 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となる
• 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 プロパティで設定された順序を上書きして、アイテムの順番を制御するためのプロパティです。

指定できる値は <integer>値 になります。
また、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)のフォローをお願いします。