見出しは空欄にしないでください

ルールID: empty-heading
ルールセット: axe-core 4.10
ユーザーへの影響:
ガイドライン: Deque Best Practice

Accessibility testing for dev teams - No experience required

Find and fix up to 80% of accessibility issues with axe DevTools Pro. Get started with your free trial today. No credit card needed.

Compliance Data & Impact

User Impact


Minor
Critical

Disabilities Affected

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

Standard(s)

  • Deque Best Practice

    修正方法

    すべての見出し要素 ( <h1> h1 から <h6>h6 でマークされているもの) にコンテンツが含まれていることを確認するのがベスト プラクティスです。さらに、このコンテンツがスクリーン リーダーでアクセスできることを確認してください。つまり、見出しテキストを非表示にしてはいけません (たとえば、CSS display: none または aria-hidden="true" を使用してはいけません)。

    効果的な見出しを作成していることを確認するには、ページの見出しに目を通し、見出しで提供される情報のみに基づいてページの内容の概要を把握しているかどうかを自問してください。答えが「いいえ」の場合は、見出しを書き直すことを検討してください。

    同時に、見出しを記述する場合だけ、見出しマークアップ (<h1> から <h6> 要素まで) を使用するようにしてください。見出しは簡潔で明確、かつ一意であり、Webページの構造を伝えるために階層的な順序でレベルがマークされている必要があります。

    悪い例: 見出しが空

    <h1></h1>

    悪い例: 支援技術から隠された見出し

    <h1 aria-hidden="true">Heading Text</h1>

    なぜ重要なのか

    スクリーン リーダーは、見出しタグの存在をユーザーに警告します。見出しが空であったり、テキストにアクセスできない場合は、ユーザーを混乱させたり、ページの構造に関する情報にアクセスできなくなったりする可能性があります。

    見出し内のテキストがスクリーン リーダーでアクセスできない場合、このテクノロジのユーザーは見出しの内容を聞くことができません。見出しはWebページの構造を伝えるため、スクリーン リーダーのユーザーがコンテンツにアクセスできることが重要です。

    見出しマークアップ (<h1> から ><h6>) を適用すると、テキストを目立たせる簡単な方法になりますが、見出し以外の用途に使用すると、支援技術を使用するユーザーにとってWebページのナビゲーションがわかりにくくなります。

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

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

    ルールの説明

    少なくとも1つの見出し要素 ( <h1> から <h6> でマーク) が存在する場合は、その見出し要素にコンテンツが含まれていることを確認するのがベスト プラクティスです。

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

    見出しにコンテンツが含まれ、このコンテンツがスクリーン リーダーでアクセス可能であることを確認します。

    リソース

    その他のリソース

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

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

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

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

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

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