heading-structure

見出し構造

見出しは、スクリーンリーダーの利用者にとってナビゲーションであり、すべての人にとって認知上の道しるべです。明確な見出し構造があれば、見つけられるコンテンツになります。そうでなければ、読むのをやめてしまう人が出てきます。

重要な理由

スクリーンリーダーの利用者は、見出しを使って移動します。視覚のある利用者がページを目で追うように、キーを押して見出し間を移動します。見出し構造が崩れていると、スクリーンリーダーの利用者は、区別のないテキストの壁に迷い込んでしまいます。

認知障害のある人にとって、見出しはページにどのようなコンテンツが含まれているか、必要な情報がどこにあるかを理解するための主要な手がかりです。

ルール

ページごとにH1は1つ

• H1はページのタイトル、つまりそのページの内容を示します
• ページのタイトルタグと一致するか、密接に関連している必要があります。また、ユーザーがここに移動するきっかけとなったリンクの内容とも一致する必要があります
• ページ内でH1を複数使用しないでください

レベルを飛ばさない

• H1 → H2 → H3の順に進め、H1 → H3のように飛ばさないでください
• レベルを飛ばすと、スクリーンリーダーでのナビゲーションが妨げられ、文書のアウトラインが分かりにくくなります
• 上のレベルに戻ることはできます。新しいセクションを始める場合、H3 → H2として問題ありません

見出しでコンテンツを説明する

• 見出しは道しるべであり、装飾ではありません
• 「セクション2」ではなく「アカウント設定」
• 「ステップ3」ではなく「配送日を選択」
• 見出しだけを読んでも、ページの内容を理解できるようにしてください

見出しは視覚的なスタイルではありません

• テキストを大きくしたり太字にしたりするためだけに見出しタグを使用しないでください
• 見出しタグを使わず、テキストのスタイルだけで見出しのように見せないでください
• 構造はタグで決まり、見た目はCSSで決まります
• 見出しのように見えても見出しでなければ、スクリーンリーダーの利用者は見つけられません

推奨する深さ

• ほとんどのページでは、H1からH3までで十分です
• 複雑なページでは、H1からH4までにしてください
• H5やH6が必要な場合、ページが複雑すぎる可能性があります。ページの分割を検討してください

パターン

記事またはブログ投稿

H1: Article Title
  H2: First Major Section
    H3: Subsection
    H3: Subsection
  H2: Second Major Section
    H3: Subsection
  H2: Conclusion

ダッシュボード

H1: Dashboard Name
  H2: Summary / Key Metrics
  H2: Recent Activity
  H2: Tasks
  H2: Notifications

フォーム

H1: Form Title (e.g., "Apply for an Account")
  H2: Personal Information
  H2: Contact Details
  H2: Preferences
  H2: Review and Submit

設定ページ

H1: Settings
  H2: Profile
  H2: Notifications
  H2: Privacy
  H2: Billing

評価チェックリスト

• ページごとにH1がちょうど1つある
• 見出しレベルを飛ばしていない
• 見出しで、その下にあるコンテンツを説明している
• 見出しタグを視覚的なスタイルではなく、構造のために使用している
• 見出しだけを読んでも、ページの内容を理解できる
• 見出しの深さがH4を超えていない