見出しとランドマーク

Rob Dodson 氏

スクリーン リーダーには、見出し間や特定のランドマークの領域にすばやくジャンプするコマンドがあります。実際、スクリーン リーダー ユーザーを対象とした調査によると、見知らぬページは見出しを探索することが最も多いことがわかっています。

正しい方角とランドマークの要素を使用することで、支援技術を使用するユーザーにとってのナビゲーション エクスペリエンスを大幅に向上させることができます。

見出しを使ってページの概要を説明する

h1～h6 の要素を使用して、ページの構造の概要を作成します。目標は、ページのスケルトンまたは足場を作り、見出しを辿る誰もが心理を形成できるようにすることです。

一般的には、ページのメインの見出しやロゴには 1 つの h1 を使用し、主要セクションには h2 要素、補助サブセクションには h3 要素を使用します。

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

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

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

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

たとえば、このサイトには「IN THE NEWS」というセクションがあり、その後に 2 つの見出しが続きます。

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

セクション見出し「ニュース内」を h2 にし、サポートする見出しを両方とも h3 要素にできます。

「IN THE NEWS」の font-size は見出しよりも小さいため、最初の記事の見出しを h2 にし、「IN THE NEWS」を h3 にしたくなるかもしれません。ブラウザのデフォルトのスタイルと一致する場合がありますが、スクリーン リーダーのユーザーには表示された枠線が壊れてしまいます。

Lighthouse を使用すると、ページで見出しレベルのスキップがあるかどうかを確認できます。ユーザー補助の監査（[Lighthouse] > [Options] > [Accessibility]）を実行し、[見出しがレベルをスキップしない] の監査結果を確認します。

ランドマークを使用してナビゲーションを補助する

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

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

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 を使用すると、ページにスキップリンクが含まれているかどうかを確認できます。ユーザー補助機能の監査を再度実行して、[ページに見出し、スキップリンク、ランドマークの領域が含まれている] の監査の結果を確認します。