見出しとランドマーク

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 にしたいと考えるかもしれません。これはブラウザのデフォルトのスタイルと一致するかもしれませんが、スクリーン リーダー ユーザーに伝えられるアウトラインが破損します。

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