Level AAWCAG 2.2
2.4.6 見出し及びラベル
見出しとラベルがトピックまたは目的を説明している。
なぜ重要か
スクリーンリーダー
見出しジャンプでページ内をナビゲート。正しい階層がないと構造を把握できない。
認知障害
明確な見出しは情報の優先度と関係性を示し、内容の理解を助ける。
ロービジョン
画面拡大時に見出しが文脈理解の手がかりになる。ラベルはフォーム入力の正確性を向上。
SEO・メンテナンス
正しい見出し構造はSEOにも有効。開発者にとってもコードの可読性が向上する。
ライブデモ
見出しの階層構造
スクリーンリーダーの見出し一覧で表示されるドキュメント構造を確認しましょう。
ページ表示
ECサイト
新着商品
スマートフォン
タブレット
お知らせ
ドキュメントアウトライン
h1ECサイト
h4新着商品← レベル飛ばし
h2スマートフォン
h4タブレット← レベル飛ばし
h1お知らせ← h1が複数
h1→h4のレベル飛ばし、h1が複数存在
見出しはレベルを飛ばさず（h1→h2→h3）、ページ内にh1は1つだけにしましょう。 スクリーンリーダーユーザーは見出しジャンプでページを素早くナビゲートします。
ペルソナで理解する
伊藤さん（50歳）— 全盲
VoiceOverの見出しジャンプ（VO+Command+H）を多用します。h1→h4と飛ばされると「h2、h3のセクションを見落としたのか？」と混乱します。正しい階層があれば安心してナビゲートできます。