1.3.2 意味のあるシーケンス

要件

コンテンツの提示順が意味の理解に影響を与える場合、支援技術（例：スクリーンリーダー）でその順序通りに読み上げられるように構造化すること。

内容

多くの情報は、提示順序に意味があります。たとえば：

• 手順の順序
• 時系列の内容
• 「条件 → 結果」などの論理構成

これらが、見た目上の配置だけに依存して意味順になっていると、スクリーンリーダーや音声ブラウザでは正しく理解されません。
そのため、HTMLの構造（マークアップ順）と視覚的順序が一致していることが重要です。

具体例

良い例：意味順にマークアップされている

<p>1. 会員登録を行います。</p>
<p>2. 登録完了メールを受信します。</p>
<p>3. メール内のリンクをクリックしてログインします。</p>

• マークアップ順も論理順（手順）になっており、スクリーンリーダーでも正しく読み上げられる。

悪い例：CSSで順番を変更している

<div class="step3">3. ログイン</div>
<div class="step1">1. 登録</div>
<div class="step2">2. メール受信</div>

<style>
.step1 { order: 1; }
.step2 { order: 2; }
.step3 { order: 3; }
</style>

• 見た目は順序通りだが、HTMLソースの順番がバラバラのため、支援技術では 「ログイン→登録→メール受信」 のように読み上げられてしまう。

利点

視覚障害者支援

スクリーンリーダーで情報が論理的な順序で伝わる

知的障害・学習障害のある方

流れが崩れず、理解しやすい情報構成

印刷物や音声化時の整合性

コンテンツの再利用が容易に。PDF化、音声教材などにも転用しやすい

アクセシビリティ対応の基本

構造化を意識することで、他の達成基準（1.3.1や2.4.3など）にも好影響

実装ポイント

レイアウト順序

CSSの order や position:absolute などで順序を変える場合は注意

HTMLマークアップ順

画面上の表示順とHTMLの記述順を一致させる

音声順チェック

スクリーンリーダー（例：NVDA, VoiceOver）での読み上げテストを実施

複雑なUIの場合

ARIAの aria-flowto などで補足も検討

一覧に戻る