スクリーンリーダーのための見出し階層

スクリーンリーダーが見出しを移動する方法

スクリーンリーダーの見出し一覧

<!-- A well-structured page with this heading order: -->
<h1>HTML5 Complete Guide</h1>
  <h2>Document Structure</h2>
    <h3>The DOCTYPE</h3>
    <h3>The html head body</h3>
  <h2>Semantic Elements</h2>
    <h3>Article</h3>
    <h3>Section</h3>

<!-- Becomes a navigable list for screen reader users -->
<!-- Similar to a table of contents in a book -->

誤った見出し階層

<!-- BAD: skipping h2, going straight from h1 to h3 -->
<h1>My Article</h1>
<h3>Introduction</h3>    <!-- Skips h2! -->
<h4>Background</h4>

<!-- BAD: using headings for visual size -->
<h4 class="huge-title">This looks big</h4>  <!-- h4 in logical order? -->

<!-- BAD: using bold text instead of headings for sections -->
<p><strong>Introduction</strong></p>  <!-- Not a heading at all -->

実際の正しい階層

<h1>HTML Forms Documentation</h1>
<h2>Overview</h2>
<h2>Form Elements</h2>
  <h3>input</h3>
    <h4>text type</h4>
    <h4>email type</h4>
  <h3>select</h3>
  <h3>textarea</h3>
<h2>Validation</h2>
  <h3>Built-in Validation</h3>
  <h3>Custom Validation</h3>

1ページに1つのh1

<h1>JavaScript Array Methods</h1>
<!-- This is the page's main topic -->
<!-- Should match or closely relate to the <title> element -->
<!-- Appears as the main heading users see first -->
<!-- Search engines give it the highest SEO weight -->

見出しレベルはコンテンツの階層を表す

見た目のために見出しを使わない

/* BAD approach: h4 because it looks right: */
<h4 style="font-size: 2rem;">Section Title</h4>

/* CORRECT approach: right level, resized with CSS: */
<h2>Section Title</h2>
/* Then: h2 { font-size: 2rem; } */

/* Or: aria-label on section if heading would disrupt structure:
   — rare, usually better to fix the heading level */

WCAG 2.4.6 見出しとラベル

コンポーネントで見出しを使う

<!-- BAD: hardcoded heading level in a card component -->
<div class="card">
  <h3>Card Title</h3>  <!-- What if card appears in h2 or h4 context? -->
</div>

<!-- GOOD: document context determines level -->
<!-- Component receives level as a parameter in JS frameworks -->
<!-- Or use aria-level on a generic element -->
<div role="heading" aria-level="3">Dynamic Level Heading</div>

文書のアウトライン

見出しとSEOの整合性

スキップナビゲーションと見出し

<!-- Skip link bypasses nav to main content: -->
<a href="#main-content" class="skip-link">Skip to main content</a>

<!-- Main content heading enables heading navigation: -->
<main id="main-content">
  <h1>Page Title</h1>
</main>
<!-- Screen reader users: skip link for fast access;
     heading navigation for page exploration -->

確認

まとめ：見出しの階層