p-as-heading

見出しのようにスタイル付けされたテキストは、おそらく本来の見出しにするのが望ましいです

manualWCAG 1.3.1 (A)確度:low重大度:minorperceivable

テキストがすべて太字で18px以上でレンダリングされている短い<p>要素と<div>要素を検出し、本来の見出し要素を使うべきかどうかを手動レビューに回します。

適用範囲:<p>要素と、テキストとインラインのマークアップだけを含む<div>要素のうち、可視のテキストが短く(120文字以下)空でなく、可視のテキストのどの部分も太字で(算出されたfont-weightが700以上。要素自身、<strong>/<b>、スタイル付きの<span>など、どこで指定されたかは問いません)、18px以上でレンダリングされているもの。可視のテキストとは、レンダリングされ(display:none、[hidden]、visibility:hiddenでない)、スクリーンリーダー専用でないテキストです。すべてがコントロールの中にあるテキスト(ウィジェットや<label>自身のテキスト)は対象外です。

期待される結果:見た目で見出しとして読まれるようにスタイル付けされたテキスト(太字で、本文より大きく、短い)は、構造上の役割をプログラムで判断できるように、本来の見出し要素(<h1>-<h6>またはrole="heading")でマークアップすることを推奨します。これは、他の「構造が見た目だけで伝えられている」問題と同じく、1.3.1に関わる問題です。

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

  • reasonCode:テキストが数字だけ(「2024」のように、数字に空白と句読点を加えたもの。「No 12」は該当しません)の場合はHEADING_LIKE_NUMBER、テキストがすべて1つのリンクの中にある場合はHEADING_LIKE_LINKで、レポートでどちらの種類もまとめて脇に置けるようにしています。それ以外は、<p>ではBOLD_LARGE_PARAGRAPH、<div>ではBOLD_LARGE_DIVです。いずれも確認を求めます。
  • fontSizePx:描画されるときのテキストのフォントサイズで、CSSピクセル単位です(算出されたサイズに、CSSのzoom、SVGのtransform、またはfont-size-adjustによるフォントの拡大縮小を掛けたもの)。部分ごとに異なる場合は最も小さいものです。18pxのしきい値と比較されます。

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

例

can't tell
<style>.fakeHeading { font-weight: bold; font-size: 22px; }</style>
<p class="fakeHeading">Section Title</p>

太字で見出しほどの大きさがあり、短いため、見た目は見出しですが、見出しのセマンティクスのないただの<p>としてマークアップされています。

n/a
<p>Just a normal paragraph of body text that is not bold at all.</p>

太さもサイズも通常で、見出しを思わせる見た目ではありません。

can't tell
<div style="font-size: 24px"><span style="font-weight: bold">Our team</span></div>

テキストだけを含む<div>は<p>と同じように確認され、太字は内部のスタイル付きの<span>によるものでも構いません。ほかのブロックを含む<div>や、ボタン、ラベル、表の見出しセル内のテキストは確認対象になりません。

確認方法

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

BOLD_LARGE_DIV

  1. レポートに示された太字で大きなテキストのブロックを見つけ、ページ上で確認してください。
  2. それがセクションのタイトルのように後続のコンテンツを導入しているのか、単なる強調、注記、または値なのかを判断してください。
  3. タイトルとして機能している場合は、開発者ツールのアクセシビリティペインまたはスクリーンリーダーの見出し一覧で、見出しとして公開されているか確認してください。

満たす場合:テキストはセクションのタイトルではない(強調、引用、価格、統計値)か、見出し(h1からh6、またはrole="heading")としてマークアップされています。

満たさない場合:テキストは視覚的にセクションのタイトルとなっていますが見出しではないため、構造がスタイルでしか示されず、WCAG 1.3.1を満たしません(F2)。

BOLD_LARGE_PARAGRAPH

  1. レポートに示された太字で大きな段落を見つけ、ページ上で確認してください。
  2. それがセクションのタイトルのように後続のコンテンツを導入しているのか、単なる強調、注記、または値なのかを判断してください。
  3. タイトルとして機能している場合は、開発者ツールのアクセシビリティペインまたはスクリーンリーダーの見出し一覧で、見出しとして公開されているか確認してください。

満たす場合:テキストはセクションのタイトルではない(強調、引用、価格、統計値)か、見出し(h1からh6、またはrole="heading")としてマークアップされています。

満たさない場合:テキストは視覚的にセクションのタイトルとなっていますが見出しではないため、構造がスタイルでしか示されず、WCAG 1.3.1を満たしません(F2)。

  1. レポートに示された太字で大きなリンクのテキストを見つけ、ページ上で確認してください。
  2. それがセクションのタイトルのように後続のコンテンツを導入しているのか、単なる強調、注記、または値なのかを判断してください。
  3. タイトルとして機能している場合は、開発者ツールのアクセシビリティペインまたはスクリーンリーダーの見出し一覧で、見出しとして公開されているか確認してください。

満たす場合:テキストはセクションのタイトルではない(強調、引用、価格、統計値)か、見出し(h1からh6、またはrole="heading")としてマークアップされています。

満たさない場合:テキストは視覚的にセクションのタイトルとなっていますが見出しではないため、構造がスタイルでしか示されず、WCAG 1.3.1を満たしません(F2)。

HEADING_LIKE_NUMBER

  1. レポートに示された太字で大きな数字(年など)を見つけ、ページ上で確認してください。
  2. それがセクションのタイトルのように後続のコンテンツを導入しているのか、単なる強調、注記、または値なのかを判断してください。
  3. タイトルとして機能している場合は、開発者ツールのアクセシビリティペインまたはスクリーンリーダーの見出し一覧で、見出しとして公開されているか確認してください。

満たす場合:テキストはセクションのタイトルではない(強調、引用、価格、統計値)か、見出し(h1からh6、またはrole="heading")としてマークアップされています。

満たさない場合:テキストは視覚的にセクションのタイトルとなっていますが見出しではないため、構造がスタイルでしか示されず、WCAG 1.3.1を満たしません(F2)。

ソースコードを見る