heading-order

見出しレベルを飛ばしてはいけません

manual確度:medium重大度:minoroperable

文書の順序で、見出しレベルが一度に最大1つずつしか深くならないことを確認します。

適用範囲:ページに見出し要素(ネイティブの<h1>〜<h6>、またはaria-levelを持つ明示的なrole="heading"。aria-levelがないか無効な場合、ARIA仕様に従い既定のレベルは2)が2つ以上ある場合に適用されます。有効なaria-level(正の整数)を持つネイティブの<hx>は、ブラウザーが公開するとおりそのレベルになります。それ以外はタグのレベルになります。role="none"または"presentation"が付いたネイティブの<hx>も、フォーカスを受け取れるかグローバルなARIA属性を持つ場合は見出しのままです。WAI-ARIAのプレゼンテーショナルロールの競合解決により、その場合ブラウザーはそのロールを無視するためです。ElementInternalsによってheadingロールを与えられたカスタム要素(this.attachInternals().role)は、role="heading"と同じように扱われ、そのレベルはaria-level属性またはinternalsのariaLevelが与えるものになります。

期待される結果:支援技術がページを読む順序で、各見出しのレベルが、支援技術に公開されている直前の見出しのレベルより2つ以上深くなっていません。2レベル以上一気に深くなると(例:<h1>の直後に<h2>を飛ばして<h3>が続く)、支援技術のユーザーが見出し単位で移動するときに頼りにする文書のアウトラインが崩れます。どの時点でも、より浅いレベルに戻ることは常に問題ありません。

検出結果が報告する内容:

  • fromLevel:公開されている直前の見出しのレベルです(<h3>なら3)。
  • toLevel:この見出しのレベルで、fromLevelより2つ以上深くなっています。

これらのdata.detailsのフィールドは、検出結果を読み解き、再現するのに役立ちます。reasonCodeと、出力スキーマで安定と明記された一部のフィールドを除き、安定した契約ではありません。マイナーリリースで名前が変わったり、なくなったりすることがあるため、これらに依存した実装はしないでください。

例

pass
<h1>Title</h1>
<h2>Section</h2>
<h3>Subsection</h3>

見出しレベルは一度に最大1つずつしか深くなっていません。

can't tell
<h1>Title</h1>
<h3>Subsection</h3>

見出しレベルが1から3に飛び、レベル2が抜けています。

確認方法

このルールが判断できない場合はcantTellを報告し、判断を人に委ねます。ルールが投げかける各質問を、理由コードごとに、答えるための手順とともにここに示します。検出結果にも同じ手順がhowToCheckとして、スキャンの言語で含まれます。出力スキーマを参照してください。

HEADING_ORDER_SKIPPED_LEVEL

  1. レポートに示された見出しを見つけ、そのレベルと直前の見出しのレベル(レポートまたはアクセシビリティペインによる)を控えてください。
  2. スクリーンリーダーの見出し一覧を使うか見出しを調べて、ページの見出しを順に一覧にし、レベルが飛んでいる部分の周辺のセクションを確認してください。
  3. その見出しが直前の見出しの1つ下のレベルに属するのか、レベルが抜けているのかを判断してください。

満たす場合:各見出しは直前の見出しより最大1レベルだけ深く、アウトラインに抜けはありません。

満たさない場合:見出しが直前の見出しより2レベル以上深くなっており(h2の後にh4)、アウトラインに抜けがあります。これはベストプラクティスを満たしていません(G141)。

ソースコードを見る