見出しとランドマーク

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 つの見出しが続いています。

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

セクションの見出し「IN THE NEWS」は h2 に、見出しをサポートする 2 つのヘッドラインは h3 にすることができます。

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

直感に反するかもしれませんが、h3 要素と h4 要素が h2 要素や h1 要素よりも視覚的に大きくても問題ありません。重要なのは、要素と要素の順序によって伝えられるアウトラインです。

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

目印を使用してナビゲーションを補助する

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