Level AWCAG 2.2
1.3.2 意味のある順序
コンテンツの意味のある順序がプログラムで解釈可能である。
なぜ重要か
スクリーンリーダー
DOMの順序で読み上げるため、CSSで並べ替えると意味が通じなくなります。
キーボード操作
Tabキーの移動順はDOM順に従います。視覚的な順序と異なると混乱を招きます。
認知障害
論理的な読み順は情報の理解を助けます。順序が乱れると文脈を失います。
レスポンシブ
画面サイズでレイアウトが変わっても、意味のある順序を保つことが重要です。
ライブデモ
DOM順序と表示順序
DOM順序（スクリーンリーダーの読み上げ順）
1. 見出し
2. 本文
3. サイドバー
4. フッター
CSSで順序変更（視覚的）
3. サイドバー← 視覚的に1番目
1. 見出し← 視覚的に2番目
4. フッター← 視覚的に3番目
2. 本文← 視覚的に4番目
CSSの
orderやposition: absoluteで視覚的な順序を変えると、スクリーンリーダーの読み上げ順と一致しなくなり、 内容の理解を妨げます。ペルソナで理解する
高橋さん（40歳）— 全盲
スクリーンリーダーでニュースサイトを閲覧。CSSでサイドバーが先に表示されていると、見出しの前に広告が延々と読み上げられ、本文にたどり着くまでに疲弊します。