WCAG 1.3.2: 意味のある読み上げ順・表示順になっているか確認する
HTMLの記述順、読み上げ順、キーボード操作順が、利用者が内容を自然に理解できる順序になっているか確認します。見た目の配置だけを優先して順序を入れ替えないようにします。
意図的な失敗例: 表示順とDOM順が一致しない
CSSで視覚順だけを変え、読み上げ順が手順と異なります。
確認観点
- HTMLソースが、人が自然に読む順番で並んでいるか確認する
- 見出しと関連する本文、画像、フォーム、補足説明がソース上でも近くに配置されているか確認する
- CSSのflexbox orderやgrid配置で見た目の順序だけを入れ替えていないか確認する
- 単語内の不要なスペースや装飾文字で、読み上げや自動翻訳の順序・意味が崩れないようにする
人の判断が必要な例
- スクリーンリーダーまたは読み上げ順確認で、内容が前後関係どおりに理解できるか確認する
- レスポンシブ表示で要素の見た目の位置が変わっても、DOM順と読み上げ順が不自然になっていないか確認する
- 記号や装飾表記に頼らず、読み上げても意味が通じる表記になっているか確認する
補助ツール候補
- focus-order
- aria-attributes
生成メモ
- 支援技術を用いた実検証が必要