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

  • 投稿日
  • 著者 くまだ
  • カテゴリー Web制作

どうも、くまだです。

CSSのreading-flowプロパティについて。

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

reading-flowプロパティとは、reading-flowを指定した要素内の読み上げ順やフォーカス順を制御するプロパティです。

コードは以下になります。

  <div class="container">
    <button class="box">1</button>
    <button class="box">2</button>
    <button class="box">3</button>
  </div>

.container {
    padding: 200px;
    display: flex;
    gap: 10px;
    reading-flow: flex-visual;
}

.box {
    background-color: orange;
    width: 100px;
    height: 100px;
}

.box:nth-child(1){
    order: 2;
}

HTMLでは1→2→3の順ですが、CSSのorderプロパティで順番を変えています。

reading-flow:  flex-visual;を指定すると、writing-modeに従い、見た目通りの順番になります。フォーカスを当てると、見た目通り2→3→1になります。

デフォルトがreading-flow:nomarl;で、この場合は1→2→3の順にフォーカスが当たります。

flexboxを使用する場合は以下のものが使用できます。

  • flex-visual：writing-modeに従い、見た目通りの順序に従う。
  • flex-flow：flex-flowプロパティに従う。

Gridレイアウトの場合でも使用できます。

  <div class="container">
    <button class="box">1</button>
    <button class="box">2</button>
    <button class="box">3</button>
    <button class="box">4</button>
    <button class="box">5</button>
    <button class="box">6</button>
  </div>

.container {
    padding: 200px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, 1fr);
    reading-flow: grid-order;
}

.box {
    background-color: orange;
    width: 100px;
    height: 100px;
}

.box:nth-child(1) {
    order: 2;
}
.box:nth-child(5) {
    order: 4;
}

reading-flow: grid-order;を指定するとorder順になるので、2→3→4→6→1→5になります。

Gridを使用する場合は以下のものが使用できます。

  • grid-rows：writing-modeに従い、行の見た目通りの順序に従う。
  • grid-column：writing-modeに従い、列の見た目通りの順序に従う。
  • grid-order：orderプロパティで変更された順に従う。

2025年7月時点ではChromeとEdgeで使えます。

ここまで読んでくださりありがとうございました。

CSS

この記事を書いた人

くまだ

記事一覧