スタイル付き <p> 要素は見出しとして使用してはなりません

ルールID: p-as-heading
ルールセット: axe-core 4.10
ユーザーへの影響:
ガイドライン: WCAG 2.1 Experimental, WCAG 2.0 Experimental, EN 301 549

Start building more accessible experiences

Axe DevTools Pro helps dev teams find and fix up to 80% of accessibility issues while coding. No experience required. Get started with your free trial today.

Compliance Data & Impact

User Impact


Minor
Critical

Disabilities Affected

  • 盲目
  • 盲ろう者
  • 運動・器用さ

Standard(s)

  • WCAG 2.1 Experimental
  • WCAG 2.0 Experimental
  • EN 301 549

WCAG 達成基準 [WCAG 2.1 Experimental]

  • 1.3.1: Info and Relationships

WCAG 達成基準 [WCAG 2.0 Experimental]

  • 1.3.1: Info and Relationships

    修正方法

    見出しのスタイル設定に p 要素が使用されていないことを確認してください。

    良い実践: メインコンテンツはh1要素から開始してください。

    通常、ベストプラクティスとしては、Webページのメインコンテンツをレベル1の見出し (h1) で開始し、この高レベルの見出しの前に他の見出しを配置しないことです。ページのサブセクションをレベル2の見出し (h2) としてマークします。レベル2のセクション内にサブセクションがある場合は、レベル3 (h3) としてマークする必要があります。ページのメインコンテンツより前に来るものには、見出しを付けるべきではありませんが、これは絶対的なルールではありません。h1 をメインコンテンツの先頭に表示する必要がある主な理由の1つは、スクリーン リーダーのユーザーがキーボード ショートカットを使用して最初の h1 に直接移動できるためです。これにより、原則として、Webページのメインコンテンツに直接ジャンプできるようになります。h1がない場合、または h1 がメイン コンテンツの先頭以外の場所に表示される場合、Webページの構造を理解するためには、スクリーン リーダーのユーザーがさらにWebページを聞く必要があり、貴重な時間を無駄にします。

    すべてのベスト プラクティスの推奨事項と同様に、 h1 でコンテンツを開始することが適切でない場合や、コンテンツの前に他の見出しを配置することが最適な場合もありますが、これらの例外は大部分のWebページには適用されません。

    なぜ重要なのか

    ヘッダーの基本的な目的は、ページの構造を伝えることです。視覚に障害のないユーザーは、さまざまなサイズのテキストを使用することで構造を認識できます。ただし、スクリーンリーダーのユーザーにとっては、見出し要素が明示的にマークアップされていることが必要です。見出し要素が適切に適用されていると、スクリーン リーダーを使用するユーザーと視覚に障害のないユーザーの両方にとって、ページのナビゲーションがはるかに容易になります。

    目の見えるユーザーがページを一目見るだけでその内容を把握できるのと同じように、スクリーン リーダーのユーザーも見出しをたどって同じことを行うことができます。見出しが適切に書かれ、適切に順序付けられていると、特にスクリーン リーダーを使用するユーザーの時間とストレスを大幅に節約できます。

    見出しの目的は、重要なテキストを強調することだけではなく、Webページの構造を説明することです。簡潔で、明確、一意であり、 h1 から h6 までの要素で階層順にマークされている必要があります。これらすべての特性により、見出しはスクリーン リーダーのユーザーにとって貴重なツールとなります。目の見えるユーザーがページを一目見るだけでその内容を把握できるのと同じように、スクリーン リーダーのユーザーも見出しをたどって同じことを行うことができます。見出しが適切に書かれ、適切に順序付けられていると、特にスクリーン リーダーを使用するユーザーの時間とストレスを大幅に節約できます。

    ページのアクセシビリティを向上させることに加えて、検索エンジンは結果をフィルタリング、並べ替え、表示するときに見出しを使用するため、見出しには他の利点もあります。サイトのアクセシビリティを向上させると、ページが見つけやすくなるという効果もあります。

    ルールの説明

    スタイル付き p 要素は見出しを表すために使用しないでください。そうしないと、スクリーン リーダーのユーザーがドキュメントの構造を判断できないためです。

    仕組みについて (簡単に言うと)

    段落要素が見出しの外観を与えるために斜体、太字、またはフォント サイズを使用しないようにします。

    リソース

    その他のリソース

    その他リソースもあわせてご参照ください。

    axe 4.10 ルールの一覧 を参照する

    この情報は役に立ちましたか?

    すでにフィードバックをいただきました、ありがとうございます。.

    あなたの回答は次のとおりです。

    この情報は役に立ちましたか?
    フィードバックが提出された日付/時刻: