empty-heading

見出しを空にしてはいけません

automatic確度:high重大度:minoroperable

見出し要素(<h1>〜<h6>またはrole="heading")が、空でないアクセシブルな名前を持つことを確認します。

適用範囲:見出しのロールを持つ要素に適用されます。ネイティブの<h1>〜<h6>、またはrole属性がheadingに解決される任意の要素です(既知のロールを指す最初のトークンを大文字と小文字を区別せずに照合するため、role="foo heading"も該当します)。ネイティブの見出しは、どのトークンも既知のロールでない場合は見出しのロールを保ち、ほかのロールに解決される場合はそのロールに置き換わります。role="none"または"presentation"が付いたネイティブの<hx>も、フォーカスを受け取れるかグローバルなARIA属性を持つ場合は見出しのままです。WAI-ARIAのプレゼンテーショナルロールの競合解決により、その場合ブラウザーはそのロールを無視するためです。ElementInternalsによってheadingロールを与えられたカスタム要素(this.attachInternals().role)も、別のロールを示すrole属性がなければ、そのロールを持つネイティブ要素と同じように扱われます。

期待される結果:見出しが、空でないアクセシブルな名前を持っています。aria-label、aria-labelledby、支援技術から隠されていない可視のテキストコンテンツ、または(最後の手段として)title属性です。空の見出しは「見出し、レベルN」とだけ読み上げられ、見出し単位で移動するときに混乱を招きます。WCAGの達成基準を主張しないものの、failとして報告します。ACTルールffd0e9が扱うとおり、空の見出しそれ自体が障壁だからです。名前がスクリプトから読めないコンテンツ(閉じたシャドウルート、深すぎる入れ子のコンテンツ、ElementInternalsで自身に名前を付けるカスタム要素)から得られる可能性がある見出しについては、*-name-presentルールと同じく、代わりに確認を求めます。

例

pass
<h2>Section title</h2>

見出しに可視のテキストコンテンツがあります。

fail
<h2></h2>

見出しにアクセシブルな名前がまったくなく、スクリーンリーダーが読み上げるものがありません。

確認方法

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

name_closedContent

  1. レポートに示された見出しを見つけ、画面に表示されているテキストまたはアイコンを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、スクリプトからは読めない内容からブラウザーが求めた、要素のアクセシブルな名前を読んでください。
  3. スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。

満たす場合:アクセシビリティツリーに、内容から得た見出しの名前が表示され、スクリーンリーダーがそれを読み上げます。

満たさない場合:内容から名前が得られず、見出しにはアクセシビリティツリー上の名前がないため、見出しには内容があるべきというベストプラクティスに反します(ACT ffd0e9)。

name_contentTooDeep

  1. レポートに示された見出しを見つけ、画面に表示されているテキストを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、入れ子になった内容全体からブラウザーが求めた、要素のアクセシブルな名前を読んでください。
  3. スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。

満たす場合:アクセシビリティツリーに、入れ子の内容から得た見出しの名前が表示され、スクリーンリーダーがそれを読み上げます。

満たさない場合:内容から名前が得られず、見出しにはアクセシビリティツリー上の名前がないため、見出しには内容があるべきというベストプラクティスに反します(ACT ffd0e9)。

name_internals

  1. レポートに示された見出しを調べ、カスタム要素であることとそのロールを控えてください。
  2. ブラウザーの開発者ツールでアクセシビリティペインを開き、要素のアクセシブルな名前を読んでください。
  3. スクリーンリーダーで要素に移動し、読み上げられる名前を聞いてください。

満たす場合:アクセシビリティツリーに見出しの名前が表示され(internalsで設定されたものでも、それ以外でもかまいません)、スクリーンリーダーがそれを読み上げます。

満たさない場合:見出しにはアクセシビリティツリー上の名前がなく、スクリーンリーダーはロールしか読み上げないため、見出しには内容があるべきというベストプラクティスに反します(ACT ffd0e9)。

ソースコードを見る