見出し要素は番号の降順ではない

Screen readers have commands to quickly jump between headings or to specific landmark regions. In fact, a survey of screen reader users found that they most often navigate an unfamiliar page by exploring the headings.

By using correct heading and landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technologies.

Lighthouse見出しレベルの監査が失敗する原因 #

Lighthouseは、見出しが1つ以上のレベルをスキップするページにフラグを設定します。

たとえば、ページタイトルで<h1>要素を使用し、次にページのメインセクションで<h3>要素を使用すると、<h2>レベルがスキップされるため、監査が失敗します。

<h1>Page title</h1>
  <h3>Section heading 1</h3>
  …
  <h3>Section heading 2</h3>
  …

構造が適切でない見出しを修正する方法 #

• すべての見出し要素を、コンテンツの構造を反映する論理的な番号順に従わせます。
• 見出しのテキストが、関連するセクションの内容を明確に伝えていることを確認します。

例:

<h1>Page title</h1>
<section>
  <h2>Section Heading</h2>
  …
    <h3>Sub-section Heading</h3>
</section>

見出しの構造を確認する方法の1つは、「誰かが見出しだけを使用してページのアウトラインを作成した場合、それは意味があるか」と確認することです。

MicrosoftのAccessibilityInsights拡張機能などのツールを使用して、ページ構造を視覚化し、構造化されてない見出し要素を特定することもできます。

詳細については、見出しとランドマークの投稿を参照してください。

リソース #

• 見出しスキップレベル監査のソースコード
• 見出しレベルは1つだけ増やす (Deque University)