【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のサンプル

:::note warn
以下のサンプルは、Chrome 137以降のバージョンで確認してください 🙏
:::


<p class="codepen" data-height="400" data-default-tab="result" data-slug-hash="wBavBzZ" data-pen-title="CSS reading-order" data-editable="true" data-user="degudegu2510" style="height: 400px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/degudegu2510/pen/wBavBzZ">
  CSS reading-order</a> by degudegu2510 | Qiita (<a href="https://codepen.io/degudegu2510">@degudegu2510</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>


このサンプルは、`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のサンプル
:::note warn
以下のサンプルは、Chrome 137以降のバージョンで確認してください 🙏
:::

<p class="codepen" data-height="700" data-default-tab="result" data-slug-hash="Pwqoqgp" data-pen-title="CSS reading-order - flex" data-editable="true" data-user="degudegu2510" style="height: 700px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/degudegu2510/pen/Pwqoqgp">
  CSS reading-order - flex</a> by degudegu2510 | Qiita (<a href="https://codepen.io/degudegu2510">@degudegu2510</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

このサンプルは、`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のサンプル
:::note warn
以下のサンプルは、Chrome 137以降のバージョンで確認してください 🙏
:::
<p class="codepen" data-height="300" data-default-tab="result" data-slug-hash="ZYGEbxg" data-pen-title="CSS reading-order - flex" data-editable="true" data-user="degudegu2510" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/degudegu2510/pen/ZYGEbxg">
  CSS reading-order - flex</a> by degudegu2510 | Qiita (<a href="https://codepen.io/degudegu2510">@degudegu2510</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://public.codepenassets.com/embed/index.js"></script>

このサンプルは、`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)のフォローをお願いします。

https://twitter.com/degudegu2510