heading-quality

見出しのテキストは仮の文言ではなく内容を表すことが推奨されます

manualWCAG 2.4.6 (AA)確度:medium重大度:minoroperable

アクセシブルな名前が、後に続くコンテンツの説明ではなく仮の文言になっている見出しを報告します。一般的な単語(「Heading」、「Untitled」)、番号付きのテンプレートの枠(「Section 2」)、ファイル名、URLが該当します。英語の語句は常に認識し、ドイツ語、スペイン語、フランス語、日本語の語句は、見出しがその言語である場合に認識します。

適用範囲:見出しのロールを持つ要素(ネイティブの<h1>〜<h6>、またはrole属性がheadingに解決される任意の要素。既知のロールを指す最初のトークンを大文字と小文字を区別せずに照合します)のうち、アクセシビリティツリーに含まれ、空でないアクセシブルな名前を持つもの。名前がまったくない見出しは、このルールではなくempty-headingが扱います。ElementInternalsによってheadingロールを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。

期待される結果:見出しのアクセシブルな名前を正規化(空白の圧縮、大文字と小文字の統一、末尾の句読点の除去)したものが、マークアップに残された仮の文言ではありません。既知の一般的な単語(「heading」「title」「untitled」「lorem ipsum」など)、番号付きのテンプレートの枠(「Heading 2」「Section 3」)、ファイル名、URLが該当します。どれも、見出しが導入するコンテンツの話題や目的を説明していません。

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

  • name:見出しのアクセシブルな名前で、空白をまとめたものです。
  • normalizedName:照合に使った形の同じ名前で、小文字にし、末尾の句読点を取り除いたものです。

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

例

can't tell
<h3>Heading</h3>
<p>We are open Monday through Friday from 10 to 16.</p>

見出しのテキストが一般的な仮の文言「Heading」そのもので、セクションの説明になっていません。

n/a
<h3>Opening hours</h3>
<p>We are open Monday through Friday from 10 to 16.</p>

見出しが実際の話題を表しています。

確認方法

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

FILENAME_LIKE_HEADING

  1. レポートに示された見出しを見つけ、そのテキストを読んでください。
  2. その後に続く、次の見出しまでのコンテンツを読んでください。
  3. そのファイルがセクションの主題(ダウンロード用に提供されるファイル)なのか、画像のファイル名のような残ってしまった名前なのかを判断してください。

満たす場合:ファイル名は、提供されている文書など、セクションの実際の主題です。

満たさない場合:見出しは残ってしまったファイル名(IMG_1234.jpgなど)で、その後のコンテンツを説明していないため、WCAG 2.4.6を満たしません(G130)。

PLACEHOLDER_HEADING_TEXT

  1. レポートに示された見出しを見つけ、そのテキストを読んでください。
  2. その後に続く、次の見出しまでのコンテンツを読んでください。
  3. 見出しがそのコンテンツを説明しているか、「見出し」「Lorem ipsum」「無題」のようなテンプレートの文字列であるかを判断してください。

満たす場合:見出しは、その後のコンテンツの話題を示しています(最初の手順の上にある番号付きの「手順1」は問題ありません)。

満たさない場合:見出しは仮の文字列で、その後のコンテンツを説明していないため、WCAG 2.4.6を満たしません(G130)。

URL_LIKE_HEADING

  1. レポートに示された見出しを見つけ、そのテキストを読んでください。
  2. その後に続く、次の見出しまでのコンテンツを読んでください。
  3. そのWebアドレスがセクションの主題(レビューまたは掲載されているサイト)なのか、実際のタイトルの代わりになっているのかを判断してください。

満たす場合:アドレスはセクションの話題であるため、その後のコンテンツを説明しています。

満たさない場合:アドレスはその後のコンテンツを説明していないため、WCAG 2.4.6を満たしません(G130)。

ソースコードを見る