このページは Cloud Translation API によって翻訳されました。

見出しとランドマーク

Rob Dodson

スクリーンリーダーには、見出し間や特定のランドマーク領域をすばやく移動するためのコマンドがあります。実際、スクリーンリーダーのユーザーを対象とした調査では、スクリーンリーダーのユーザーは見慣れないページを操作する際に、ほとんどの場合、見出しを調べていることがわかりました。

適切なヘディング要素とランドマーク要素を使用すると、支援技術を使用しているユーザーにとってサイトのナビゲーションエクスペリエンスが大幅に改善されます。

見出しを使用してページの概要を示す

h1～h6 要素を使用して、ページの構造の概要を作成します。目的は、見出しで移動するユーザーがページの全体像を把握できるように、ページの骨組みまたはスキャフォールドを作成することです。

一般的な方法としては、ページのメインヘッドラインまたはロゴに 1 つの h1 を使用し、h2 要素を使用して主要なセクションを指定します。また、h3 要素を使用してサブセクションをサポートします。

<h1>Company name</h1>
<section>
  <h2>Section Heading</h2>
  …
  <h3>Sub-section Heading</h3>
</section>

見出しレベルをスキップしない

デベロッパーは、デザインに近いブラウザのデフォルトスタイルを使用するため、ヘッダーレベルをスキップすることがよくあります。これはアウトラインモデルを破るため、アンチパターンと見なされます。

ヘッダーにブラウザのデフォルトのフォントサイズを使用するのではなく、独自の CSS を使用し、レベルをスキップしないでください。

たとえば、このサイトには「ニュース」というセクションがあり、次に 2 つの見出しが表示されます。

見出し、ヒーロー画像、サブセクションがあるニュースサイト。

セクションヘッダー「ニュース」は h2 にできます。補足ヘッドラインはどちらも h3 要素にできます。

[ニュース速報] の font-size はヘッドラインよりも小さいため、最初のニュースのヘッドラインを h2 にして、[ニュース速報] を h3 にしたいと考えるかもしれません。これはブラウザのデフォルトのスタイルと一致するかもしれませんが、スクリーンリーダーユーザーに伝えられるアウトラインが破損します。

注: 直感に反するように思えますが、h3 要素と h4 要素が h2 要素や h1 要素よりも視覚的に大きい場合でも問題ありません。重要なのは、要素と要素の順序によって伝えられる概要です。

Lighthouse を使用して、ページでヘッダーレベルがスキップされていないかを確認できます。ユーザー補助監査を実行（Lighthouse > オプション > ユーザー補助）し、見出しでレベルがスキップされない監査の結果を確認します。

ランドマークを使用してナビゲーションをサポートする

main、nav、aside などの HTML5 要素は、ランドマークとして機能します。つまり、スクリーンリーダーがジャンプできるページ上の特別な領域として機能します。

div に頼るのではなく、ランドマークタグを使用してページの主要なセクションを定義します。ランドマークが多すぎると圧倒的になる可能性があるため、過度にならないように注意してください。たとえば、3 つや 4 つではなく、1 つの main 要素のみを使用します。

Lighthouse では、サイトを手動で監査して、「HTML5 ランドマーク要素がナビゲーションの改善に使用されている」ことを確認することをおすすめしています。ページを確認するには、ランドマーク要素のリストを使用します。

スキップリンクを使用して繰り返しのコンテンツを回避する

多くのサイトのヘッダーには、繰り返し表示されるナビゲーションが含まれています。これは、支援技術でナビゲートする際に煩わしい場合があります。スキップリンクを使用して、ユーザーがこのコンテンツをバイパスできるようにします。

スキップリンクは、常に DOM 内の最初のフォーカス可能な項目である、画面外のアンカーです。通常、ページのメインコンテンツへのページ内リンクが含まれています。これは DOM 内の最初の要素であるため、支援技術で 1 回操作するだけでフォーカスを当てることができ、繰り返しのナビゲーションを回避できます。

<!-- index.html -->
<a class="skip-link" href="#main">Skip to main</a>
…
<main id="main">
  [Main content]
</main>

/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}

GitHub、The NY Times、Wikipedia など、多くの人気サイトにはスキップリンクが含まれています。アクセスして、キーボードの TAB キーを数回押してみてください。

Lighthouse を使用すると、ページにスキップリンクが含まれているかどうかを確認できます。ユーザー補助監査を再度実行し、ページに見出し、スキップリンク、またはランドマーク領域が設定されていますの監査結果を確認します。

注: 技術的には、サイトに h1～h6 の要素または HTML5 ランドマーク要素が含まれている場合も、このテストは合格となります。テストの要件は曖昧ですが、可能であれば合格することをおすすめします。