WCAG 1.3.2: 意味のある順序

WCAG 1.3.2 は、コンテンツの順序がその意味に影響する場合、その順序が支援技術によって正しく提示できるよう、プログラムによって判別可能でなければならないと定めています。この基準を満たさないと、スクリーンリーダー利用者やその他の支援技術の利用者は、コンテンツを混乱した、あるいは意味をなさない順序で受け取ってしまいます。

このルールが意味すること

WCAG 達成基準 1.3.2 — 意味のある順序（レベル A）は次のように定めています。「コンテンツの提示順序がその意味に影響を与える場合、正しい読み上げ順序をプログラムによって判別できる。」 平たく言えば、ページ上のコンテンツの視覚的な並び順に意味がある場合 — 手順のステップ、会話スレッド、入力欄とペアになったフォームラベル、番号付きリストなど — その意味のある順序が支援技術に正しく伝わるよう、DOM の順序も同じ並びを反映していなければならない、ということです。

重要なフレーズは 「順序が意味に影響する場合」 です。ページ上のすべての並び順の決定が対象になるわけではありません。たとえば、関連性のないロゴを並べただけの装飾的なリストには、連続的な意味はありません。しかし、順序を入れ替えるとユーザーの理解が変わってしまうコンテンツ — レシピの材料リストとそれに続く手順、商品に対応した価格表、複数ステップのチェックアウトフローなど — は、必ず意味のある視覚的順序と一致する DOM 順序を持たなければなりません。

合格とみなされるのは次のような場合です。DOM のソース順序が論理的な読み上げ順序と一致している、または（視覚的な表示を並べ替える CSS などの）変換が行われていても、支援技術によって正しい読み上げ順序をプログラム的に判別できる場合です。CSS の視覚的な位置と DOM の順序が異なっていても、DOM を直接読み上げるスクリーンリーダーが、意味のある正しい順序でコンテンツに遭遇できなければなりません。

不合格 となるのは、CSS のテクニック — position: absolute、CSS Grid の order プロパティ、CSS Flexbox の order プロパティ、CSS マルチカラムレイアウトなど — を使ってコンテンツを視覚的に並べ替え、視覚的な順序が DOM 順序とは異なる意味を伝えてしまう場合です。典型的な例として、DOM ではメインコンテンツの前にサイドバーが置かれているのに、視覚的にはメインコンテンツの後にレンダリングされているケースがあります。このサイドバーに、本文を読んだ後でなければ意味をなさない補足メモが含まれていると、問題になります。

WCAG 仕様は明示的に例外も示しています。順序に意味がない場合、その順序はプログラムによって判別可能である必要はありません。さらに、この達成基準は「正しい」読み上げ順序が判別できることに焦点を当てており、視覚的な順序と DOM 順序が常に同一でなければならない、とはしていません。CSS による視覚的な並べ替えは、支援技術に露出される順序が意味のあるものであり続ける限り許容されます。しかし実務上は、CSS のみでの並べ替えは支援技術の順序を壊してしまうことが多く、細心の注意を払うべきです。

なぜ重要なのか

スクリーンリーダー利用者が最も直接的な影響を受けるグループです。米国では約 750 万人がスクリーンリーダーソフトウェアを利用しており、世界全体では世界保健機関の推計で 22 億人が何らかの視覚障害を抱えています。NVDA、JAWS、VoiceOver などでページを操作する全盲ユーザーにとって、読み上げ体験はプログラム上の順序 — 具体的には DOM 順序 — のみによって決まります。開発者が Flexbox レイアウトで CSS の order を使い、警告メッセージをフォームの上に視覚的に移動させたとしても、DOM 上ではその警告がフォーム入力欄の後に置かれている場合、スクリーンリーダー利用者は警告を聞く前にフォーム入力を完了してしまいます。これは些細な不便ではなく、エラーや取引失敗、重要なサービスからの排除につながり得ます。

認知障害のあるユーザーも、意味のある順序から大きな恩恵を受けます。ディスレクシア、注意欠如の状態、情報処理の違いなどがあるユーザーは、論理的で予測可能なコンテンツの流れに頼ることが多いです。見出し階層やコンテンツブロックが DOM 上でバラバラな順序になっていると、ページを視覚的に見られるユーザーであっても、ブラウザのリーディングモード、テキスト読み上げツール、CSS を除去して DOM の生の内容を表示する簡易表示拡張機能などに依存している場合、理解に苦労することがあります。

キーボードやスイッチアクセスで操作する運動障害のあるユーザーは、Tab キーを使って DOM 順序に従ってインタラクティブ要素を移動します。DOM 上で送信ボタンが関連するフォームフィールドより前（視覚的には後）に置かれていると、Tab の移動順序が混乱を招き、エラーが起きやすくなります。

具体的な実例として、あるトルコの EC チェックアウトページでは、CSS Grid レイアウトで order プロパティを使い、「注文概要」パネルを視覚的には請求フォームの後、右側に表示しています。しかし DOM では、注文概要の HTML が先に来ています。スクリーンリーダー利用者は、請求フォームを聞く前に合計金額と商品リストを聞くことになり、何に対して支払うのかという文脈がありません。これは離脱や混乱、アクセシビリティに関する苦情につながり得ます。トルコの新しいアクセシビリティ規制の下では、このような商用プラットフォームでの不備は、規制上のリスクとなります。

アクセシビリティを超えて、意味のある DOM 順序は SEO にも有益です。検索エンジンのクローラーは、スクリーンリーダーと同様に DOM 順序を読み取ります。見出し、主要コンテンツ、重要な行動喚起など、最も意味のあるコンテンツを DOM の先頭に配置した構造の良い DOM は、ページのインデックスやランキングに良い影響を与え得ます。

テスト方法

まず自動スキャンを実行する: axe DevTools（ブラウザ拡張）や Chrome DevTools の Lighthouse を使って、ページ全体のアクセシビリティスキャンを実行します。どちらのツールも 1.3.2 の違反を直接フラグ付けすることはありませんが、レイアウトテーブル、不適切な見出し順序、ARIA の誤用など、順序の問題を示唆する関連する構造上の問題を可視化します。視覚順序や構造上の異常に関する警告があれば、手動でのフォローアップ対象としてメモしておきます。
すべての CSS を無効化し、線形化されたコンテンツを確認する: Firefox DevTools や Chrome DevTools で全スタイルシートを無効化する（または Web Developer 拡張の「Disable All Styles」機能を使う）ことで、ページを CSS なしの状態にします。ページを上から下まで読み進めてください。この順序でコンテンツに意味は通るか？物語、フォーム、プロセスを混乱なく追えるか？もし意味が破綻するなら、そのページは 1.3.2 に違反している可能性が高いです。
DOM ソース順序を直接確認する: DevTools を開き、Elements/Inspector パネルで HTML ソースを読み進めます。各主要コンテンツブロックの DOM 上の位置と視覚的な位置を比較します。特に CSS Flexbox や Grid を使用している要素に注意し、計算済みスタイルで order プロパティを探し、それが意味のある順序の不一致を生んでいないか確認します。
NVDA と Firefox でテストする: NVDA を起動し、Firefox で対象ページを開きます。Insert + 下矢印 を押して「すべて読み上げ」モードを有効にし、ページ全体を上から下まで聞きます。画面を見ながら追い、読み上げられるコンテンツの順序が意味のある視覚的順序と一致していない箇所がないか確認します。フォームラベルと入力欄、番号付きリスト、ステップバイステップの手順、前のコンテンツを参照する内容に特に注意してください。
VoiceOver と Safari（macOS/iOS）でテストする: VoiceOver を有効にします（macOS では Command + F5）。ローター（Control + Option + U）を使って見出しやランドマーク単位で移動し、Control + Option + 右矢印でページを線形に読み進めます。コンテンツが論理的で意味のある順序で流れているか確認します。iOS では右スワイプでコンテンツを移動し、順序の一貫性を検証します。
JAWS と Chrome でテストする: JAWS を起動し、Chrome でページを開いて Insert + 下矢印 の「すべて読み上げ」コマンドを使用します。NVDA の場合と同様に、画面を見ながら聞き、意味のある順序から外れて提示されているコンテンツがないか確認します。JAWS は主に DOM 順序を反映したアクセシビリティツリーを読み上げるため、順序の問題を検出する信頼性の高いテストになります。
キーボードの Tab 順序をテストする: スクリーンリーダーを使わずに、ページ上のすべてのインタラクティブ要素に対して Tab キーを繰り返し押します。フォーカスの移動順序は、論理的で意味のある流れ — ラテン文字圏では一般的に左から右、上から下 — に従い、視覚的にページを読むユーザーの期待と一致している必要があります。セクション間を予測不能に飛び回る Tab 順序は、DOM 順序の問題を示しています。

修正方法

CSS Flexbox の order プロパティ — 不適切な例

<!-- 視覚的な順序: 警告 → フォーム。DOM 順序はその逆。 -->
<div style='display: flex; flex-direction: column;'>
  <form style='order: 1;'>
    <label for='email'>Email</label>
    <input type='email' id='email' name='email' />
    <button type='submit'>Subscribe</button>
  </form>
  <div class='warning' style='order: 0;'>
    <p>Warning: You must be 18 or older to subscribe.</p>
  </div>
</div>

CSS Flexbox の order プロパティ — 適切な例

<!-- DOM 順序が意味のある視覚順序と一致: 先に警告、その後にフォーム。 -->
<!-- CSS の order プロパティを削除し、DOM の順序だけで視覚と支援技術の順序を制御。 -->
<div style='display: flex; flex-direction: column;'>
  <div class='warning'>
    <p>Warning: You must be 18 or older to subscribe.</p>
  </div>
  <form>
    <label for='email'>Email</label>
    <input type='email' id='email' name='email' />
    <button type='submit'>Subscribe</button>
  </form>
</div>

絶対配置されたコンテンツが誤解を招く順序を作る例 — 不適切な例

<!-- ステップラベルは視覚的にはコンテンツボックスの上に表示されるが、DOM では後に来る。 -->
<div style='position: relative; height: 200px;'>
  <div style='position: absolute; top: 50px; left: 0;'>
    <p>Step 1: Fill in your personal details below.</p>
  </div>
  <div style='position: absolute; top: 0; left: 0;'>
    <p><strong>1</strong></p>
  </div>
</div>

絶対配置されたコンテンツが誤解を招く順序を作る例 — 適切な例

<!-- DOM 順序が意味のある読み上げ順序を反映: 先にラベル、その後に番号。 -->
<!-- 絶対配置は視覚的な調整のみに使い、意味のある順序を逆転させない。 -->
<div style='position: relative; height: 200px;'>
  <div style='position: absolute; top: 0; left: 0;'>
    <p><strong>1</strong></p>
  </div>
  <div style='position: absolute; top: 50px; left: 0;'>
    <p>Step 1: Fill in your personal details below.</p>
  </div>
</div>

CSS Grid でコンテンツ領域を並べ替えた例 — 不適切な例

<!-- サイドバー（補足メモ）は視覚的には右側、メインコンテンツの後に表示される。 -->
<!-- しかし DOM では先に来るため、スクリーンリーダーは記事より先にサイドバーのメモを読み上げる。 -->
<div class='layout'>
  <aside class='sidebar'>
    <p>Note: The statistics below are sourced from the 2024 annual report.</p>
  </aside>
  <main class='content'>
    <h1>Annual Sales Overview</h1>
    <p>Total revenue grew by 23% compared to the prior year...</p>
  </main>
</div>
<!--
.layout { display: grid; grid-template-columns: 3fr 1fr; }
.sidebar { grid-column: 2; }
.main { grid-column: 1; }
-->

CSS Grid でコンテンツ領域を並べ替えた例 — 適切な例

<!-- メインコンテンツが DOM で先に来ており、意味のある読み上げ順序と一致している。 -->
<!-- メインコンテンツに注釈を付けるサイドバーは DOM でその後に続く。 -->
<!-- CSS Grid は DOM 順序を変えずに、サイドバーを視覚的に右側へ配置する。 -->
<div class='layout'>
  <main class='content'>
    <h1>Annual Sales Overview</h1>
    <p>Total revenue grew by 23% compared to the prior year...</p>
  </main>
  <aside class='sidebar'>
    <p>Note: The statistics above are sourced from the 2024 annual report.</p>
  </aside>
</div>
<!--
.layout { display: grid; grid-template-columns: 3fr 1fr; }
.content { grid-column: 1; }
.sidebar { grid-column: 2; }
-->

よくある間違い

CSS Flexbox や Grid の order プロパティを使って、意味のあるコンテンツブロックを視覚的に並べ替えながら、HTML ソース順序を更新しないこと — これは現代の Web 開発における 1.3.2 違反の最も一般的な原因です。常に DOM 順序を先に調整し、CSS は視覚的な見た目を整えるためだけに使ってください。
ページの主要な <main> コンテンツを DOM 上で <nav> や <aside> の後に置きつつ、CSS でメインコンテンツを視覚的に先頭に見せること — スクリーンリーダーはナビゲーションやサイドバーを主要な記事より先に読み上げてしまい、意味のある順序が崩れます。
CSS のカラムや float を使って雑誌風のマルチカラムレイアウトを構築すること で、DOM 順序が「列ごとに上から下」になっている一方、視覚的な順序は「行ごと」である場合 — 多くのグリッド型コンテンツレイアウトのように行単位で読むことを期待しているユーザーは、誤った順序でコンテンツを受け取ることになります。
position: absolute や position: fixed を使って、フォームのエラー要約をページ上部に視覚的に引き上げること で、エラー要約要素が DOM の末尾に残ったままになる場合 — フォームを送信したスクリーンリーダー利用者は、ページの末尾に到達するまでエラー要約に遭遇せず、重要なフィードバックを見逃してしまいます。
ステップバイステップの手順や番号付きのシーケンスを CSS のカウンターリセットでレンダリングすること で、DOM 上のステップの順序が意味のある順序と一致していない場合 — 視覚的な番号は正しく見えても、読み上げ順序は誤ったものになります。
動的コンテンツ（チャットメッセージ、ライブフィード項目、トースト通知など）を DOM 上でコンテナの先頭に挿入すること で、視覚的な慣習では最新の項目が下部に表示されている — あるいはその逆 — のに、ARIA ライブリージョンを使わず、また DOM を意味のある順序に合わせて調整しない場合。
HTML テーブルを表形式データではなくレイアウト目的で使用すること で、セルを DOM 上で列優先（column-first）で配置し、行優先（row-first）で配置しない場合 — 支援技術は DOM 順序（行ごと）でテーブルセルを読み上げるため、列優先で構築されたレイアウトテーブルは誤った順序で読み上げられます。
JavaScript によってコンテンツを視覚的にソートまたは並べ替えること（例: 並べ替え可能な商品リスト）で、基礎となる DOM 順序を更新しない場合 — ユーザーが価格順に並べ替えた後でも、CSS クラスや視覚的な位置だけが更新されていると、スクリーンリーダーは元の並び順のまま項目を読み上げてしまいます。
脚注や注釈を、視覚的な表示ではページ下部にまとめているにもかかわらず、DOM 上では注釈対象の段落の直後に配置すること — あるいはその逆 — で、支援技術に露出される順序が、意図された読み上げフローにとって意味のあるものになっていない場合。
1 つの論理的なコンテンツ単位を、DOM 上で離れた位置に分割して配置すること — たとえば、<figure> 要素から離れた場所に <figcaption> を置き、スクリーンリーダーがキャプションを文脈から切り離して読み上げてしまうようなケースです。

トルコのアクセシビリティ規制との関係

トルコの 大統領通達第 2025/10 号 は、2025 年 6 月 21 日付官報第 32933 号で公布され、WCAG 2.2 に整合した必須の Web アクセシビリティ要件を定めています。WCAG 1.3.2 意味のある順序はレベル A の達成基準であり、対象となるすべての主体が満たさなければならないベースライン要件の一部です。

この通達は段階的なタイムラインでの遵守を義務付けています。公的機関 は通達の公布日から 1 年以内 に適合を達成しなければならず、民間部門の事業者 には 2 年 の猶予が与えられています。

通達の下で明示的に対象とされている主体は、すべて、デジタルコンテンツや Web インターフェースにおいて、情報をプログラムによって判別可能な意味のある順序で提示しなければなりません。具体的には次のとおりです。

公的機関および政府機関 — すべての中央・地方政府機関、省庁、公共向け Web サイトやデジタルサービスを運営する国営・準国営組織。
銀行および金融機関 — オンラインバンキングポータル、投資プラットフォーム、保険会社の Web サイトなど。口座サマリー、ステップバイステップのローン申請、取引履歴といった連続的なコンテンツは、すべてのユーザーが正しい順序で読める必要があります。
EC プラットフォーム — 商品一覧、複数ステップのチェックアウトフロー、注文確認のシーケンスなどは、意味のある視覚的順序を正しく反映した DOM 順序を持たなければなりません。これにより、全盲やロービジョンの買い物客が、支援技術による混乱なしに購入手続きを完了できるようにします。
病院および医療提供者 — 患者ポータル、予約システム、医療情報ページなど。指示、警告、フォームフィールドの順序には直接的な安全上の意味があるため、その順序が正しく提示されなければなりません。
20 万人以上の加入者を持つ通信会社 — サービス比較ページ、契約管理インターフェース、サポートポータルなど。料金表や機能一覧は、意味のある、プログラム的に正しい順序で提示される必要があります。
旅行代理店および民間輸送会社 — 予約フロー、旅程表示、座席選択インターフェースなどは、出発が到着より前、ステップ 1 がステップ 2 より前といった視覚的なシーケンスに大きく依存しており、その順序が DOM にも正しく反映されなければなりません。
国民教育省（MoNE）に認可された私立学校 — 学習管理システム、コースコンテンツページ、入学ポータルなどでは、レッスン、モジュール、評価といった教育上のシーケンスをプログラムによって判別可能な順序で提示し、支援技術を利用する学生が正しく授業を追えるようにしなければなりません。

これらのプラットフォームのいずれかで WCAG 1.3.2 に準拠していない場合、それは単なるベストプラクティスの欠如ではありません。2025/10 通達の下では、監督と是正措置の対象となる規制上の不適合に該当します。1.3.2 の違反は、トルコの Web 開発で広く使われている最新の CSS レイアウト技術（Flexbox、Grid）に起因することが多いことから、組織はコンプライアンスロードマップの一環として、自社のレイアウトパターンと DOM 順序の運用を体系的に監査することを優先すべきです。

出典と参考資料

AWCAG 1.1.1: 非テキストコンテンツ AWCAG 1.2.1: 音声のみおよび映像のみ（事前録画）AWCAG 1.2.2: キャプション（事前録画）