この記事でわかること

  • 読む順について定めた、WCAGの達成基準1.3.2の内容
  • CSSのorderやrow-reverseで並べ替えると、読み上げやTabキーの順がどうなるか
  • 見た目の順にHTMLを書いて、CSSでは並べ替えない書き方
  • 並べ替えた版と、ブラウザで表示の位置・Tabキーの順を比べた結果

申し込みの流れを「1. 会員登録」「2. 講座を選ぶ」「3. 申し込む」の3枚のカードで横に並べたとします。HTMLを書き直すうちに順がずれ、CSSのorderで見た目だけ1・2・3に直すと、画面では正しく見えます。けれども、画面を読み上げて聞く人や、Tabキーで操作する人には、2・3・1の順に届きます。この記事では、見た目の順と読み上げの順をそろえる方法を、WCAG 2.2の達成基準1.3.2を軸に整理します。

当たった資料は、W3Cの達成基準1.3.2の解説(Understanding)と、技法C27、失敗例F1、達成基準2.4.3の解説で、どれも2026年11月1日に原文で確かめました。例の申し込みの流れは説明のために作った架空のもので、特定の道具や講座を勧めるための記事ではありません。

先に結論: 見た目の順にHTMLを書き、CSSでは並べ替えない

順番に意味がある部分は、見せたい順にHTMLを書きます。 CSSのorderやrow-reverseで見た目だけを入れ替えると、読み上げやTabキーの順はHTMLの順のまま残ります。画面の幅で並び方を変えるときも、HTMLの順のまま横に並べるか縦に積むかだけを切り替えます。

書き方 見た目の順 読み上げ・Tabキーの順
HTMLを1・2・3の順に書く 1・2・3 1・2・3
HTMLは2・3・1、orderで1を先頭へ 1・2・3 2・3・1
HTMLは1・2・3、row-reverseで右から並べる 左から3・2・1 1・2・3

読む順に関わる基準(1.3.2)

WCAG 2.2の達成基準1.3.2(レベルA)は、内容を示す順が意味に関わるときは、正しい読む順をプログラムで判断できるようにすることを求めています。解説では、満たさない内容は、支援技術が誤った順で読み上げたときに、利用者を混乱させることがあるとしています。

ただし、どこでも決まった順が要るわけではありません。解説は、決まった並びが求められるのは、順番が意味に関わる所だけだとしています。例として、ページの本文の部分とナビゲーションの部分の順は、意味に関わらないとしています。また、HTMLの表と番号付きのリストは意味のある順だが、番号なしのリストはそうではない、という説明もあります。

失敗例F1は、CSSで位置を変えて、内容の意味を変えてしまう作りです。支援技術は、ソースコードなどのプログラムで判断できる順をもとに、内容を正しい順で伝えます。そのため、見た目の並びがプログラムで判断できる読む順と違う意味になるなら、CSSで位置を決めることに頼らないように、としています。

Tabキーで進む順も、HTMLの順に従う

達成基準2.4.3の解説では、スクリプトやtabindexを使っていなければ、Tabキーで進む順は、部品が内容の中に現れる順になるとしています。CSSで見た目を入れ替えても、フォーカスはHTMLに書いた順に進みます。

技法C27は、ソースコードの内容の順を、見た目の順と同じにする技法です。C27では、キーボードの利用者は、ソースの順が見た目の順と合っていないと、次にフォーカスがどこへ行くかを予想しにくいとしています。読み上げを聞く人と、画面を見ている人が一緒に作業するときも、情報が違う順で現れて混乱することがある、と説明しています。

書き方の例: 申し込みの流れを、HTMLの順のまま並べる

次のHTMLは、3つの手順をHTMLでも1・2・3の順に書き、CSSでは横に並べるか縦に積むかだけを決める例です。

<ol class="steps">
  <li class="step">
    <h3>1. 会員登録</h3>
    <a href="#signup">登録の画面へ</a>
  </li>
  <li class="step">
    <h3>2. 講座を選ぶ</h3>
    <a href="#course">講座の一覧へ</a>
  </li>
  <li class="step">
    <h3>3. 申し込む</h3>
    <a href="#apply">申し込みの画面へ</a>
  </li>
</ol>

<style>
  /* order や row-reverse は使わない。狭い画面では HTML の順に縦へ積む */
  .steps { display: flex; flex-direction: column; gap: 16px; padding: 0; list-style: none; }
  .step { padding: 16px; border: 1px solid #ccc; }
  /* 601px 以上の幅では、同じ順のまま横に並べる */
  @media (min-width: 601px) {
    .steps { flex-direction: row; }
    .step { flex: 1; }
  }
</style>

手順の順番そのものに意味があるので、番号付きのリスト(ol)で書いています。見た目の調整は、余白や枠線などの並びに関わらない所にとどめます。

手順: 自分のページの並び順を確かめる

  1. 順番に意味がある所を探す: 手順・料金の段階・記事の本文など、入れ替えると意味が変わる部分を拾います
  2. CSSの並べ替えを探す: CSSの中のorder、row-reverse、column-reverse、grid-areaなどで場所を決めている所を見ます
  3. 見た目とHTMLの順を比べる: 画面で見える順と、ブラウザの開発者ツールで見たHTMLの要素の順が合っているかを比べます
  4. Tabキーで進める: ページの最初からTabキーで進め、フォーカスが見た目の順に動くかを見ます
  5. HTMLの順を直す: 食い違っていたら、要素を見せたい順に書き直し、並べ替えのCSSを外します

技法C27の確かめ方も、画面で見える順と、DOMを見られる道具で見た要素の順が合っているかを比べるものです。開発者ツールは、多くのブラウザでF12キーか、ブラウザの設定から開けると説明しています。

試した結果

上のHTMLと、HTMLを2・3・1の順に書いて1のカードにorder: -1を付けた版、HTMLは1・2・3のまま並びにrow-reverseを付けた版を用意しました。3つとも作業用のPCの中だけで表示できるようにして、画面を出さずに動かすChromeで読み込み、カードの表示の位置、Tabキーで進む順、ブラウザが支援技術に渡す情報(アクセシビリティツリー)の順を比べました。

  • 上のHTMLでは、カードは左から1・2・3の順に並び、Tabキーも「登録の画面へ」「講座の一覧へ」「申し込みの画面へ」の順に進みました
  • orderの版では、見た目は左から1・2・3でしたが、Tabキーは2・3・1のカードのリンクの順に進みました。アクセシビリティツリーの順も2・3・1でした
  • row-reverseの版では、カードは左から3・2・1に並び、Tabキーは右端の1から左へ進みました
  • 上のHTMLを幅375pxで開くと、カードは上から1・2・3の順に積まれ、Tabキーの順も同じでした
  • orderの版でCSSを外して表示すると、カードは2・3・1の順に並び、HTMLの順がそのまま出ました

確かめた環境は、作業用のMacで画面を出さずに動かしたGoogle Chrome 156です。スクリーンリーダーで実際に読み上げさせる確認はしておらず、ブラウザが渡す情報の順までを見ています。

自分で直すか、相談するかの判断

目安は、「並べ替えのCSSを外して、HTMLの順を入れ替えるだけで済むか」です。自分で書いたテンプレートやページなら、要素を見せたい順に書き直せば直せます。

テーマやページを組み立てる道具が、自動で順を入れ替えている場合は、設定で並びを変えられるかを先に調べます。変えられない場合は、その道具を提供している会社や、サイトの制作を頼んだ人に、並びの直し方を聞きます。学びながら直したいときは、Webデザインの講座で質問できる時間に、自分のページの順を見てもらうのも一つの方法です。

つまずきやすいところ

まとめ

  • 順番に意味がある部分は、見せたい順にHTMLを書きます
  • CSSのorderやrow-reverseで見た目だけを入れ替えても、読み上げとTabキーの順はHTMLの順のままです
  • 画面の幅での切り替えは、HTMLの順のまま横に並べるか縦に積むかだけにします
  • 画面で見える順とHTMLの順を比べ、Tabキーで最初から進めて確かめます