WCAG 1.3.2: 意味のあるシーケンス
HTMLのソースコード記述順、スクリーンリーダーの読み上げ順、キーボードのフォーカス移動順が、コンテンツの論理的な流れと一致し、利用者が内容を自然に理解できるようにします。CSSによる見た目の配置変更だけで読ませる順序を崩さないようにします。
意図的な失敗例: 表示順とDOM順が一致しない
CSSで視覚順だけを変え、読み上げ順が手順と異なります。
確認観点
- CSS(float, flex-direction, grid, absolute等)を無効化した状態、またはDOM順でページの論理的な流れを確認する
- スクリーンリーダーでページ冒頭から順に読み上げさせ、文脈や前後関係が自然に通じるか確認する
- Tabキーで順次移動したときのフォーカス順が、視覚的な配置や論理的な意味順と一致しているか確認する
人の判断が必要な例
- 視覚的なレイアウト順序と、支援技術による読み上げ順序に食い違いがないか確認する
- 複数列のレイアウトやサイドバーで、本文より先に無関係な情報が読まれて文脈が崩れないか確認する
補助ツール候補
- focus-order
- heading-map
- aria-attributes
生成メモ
- 支援技術を用いた実検証が必要