ページにはレベル1の見出しを含める必要があります

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

Need accessibility training?

Deque University offers an extensive curriculum of self-guided online courses for every skillset and experience level.

Compliance Data & Impact

User Impact


Minor
Critical

Disabilities Affected

  • 視覚を用いるキーボードユーザー
  • 盲目
  • 視力低下
  • 盲ろう者

Standard(s)

  • Deque Best Practice

    修正方法

    ページまたはそのフレームの少なくとも1つにレベル1の見出しが含まれていることを確認する。

    一般的に、ページのメイン コンテンツの先頭が h1 要素で始まるようにし、ページに h1 要素が1つだけ含まれるようにすることがベスト プラクティスです。

    通常、ベストプラクティスは、Webページのメインコンテンツをレベル1の見出し (h1) で開始し、この高レベルの見出しの前に他の見出しを配置しないことです。ページのサブセクションをレベル2の見出し (h2) としてマークする。レベル2のセクションにサブセクションが含まれている場合は、これらの子をレベル3のセクション (h3) としてマークします。

    iframeの見出し階層は、可能であれば、親ドキュメントの見出し階層内に収まるように設計されるべきです。iframeに埋め込まれたドキュメントのコンテンツを制御できる場合、ベスト プラクティスは、iframeの見出し階層を親ページの既存の見出し階層内の適切な場所に収めることです。親ドキュメントがコンテンツの先頭に単一の h1 見出しで構成されている場合には (これは推奨されるベスト プラクティスです)、 iframe iframeはこれを考慮し、別の h1見出しで開始しないでください。iframe iframeドキュメントは h2 見出しで始まる必要があります。コンテンツがページの最初の見出しの直接の子である場合、またはレベル2の見出しの子である場合、iframeの最初の見出しは h3見出しである必要があります、などです。

    iframeにサードパーティのWebサイトのコンテンツが含まれている場合 (よくあるケース)、見出しの階層を制御できないことがあります。このような状況では制御が不十分であるため、ガイドラインでは2つのドキュメントの見出し階層が一致することを厳密に要求していませんが、一致している方が望ましいでしょう。

    なぜ重要なのか

    スクリーン リーダーのユーザーは、キーボード ショートカットを使用して最初の[missing term] h1 に直接移動できます。これにより、原則として、Webページのメイン コンテンツに直接ジャンプできるようになります。h1[missing term]がない場合、または h1 [missing term]がメイン コンテンツの先頭以外の場所に表示される場合、スクリーン リーダーのユーザーはWebページの構造を理解するためにさらにWebページを聞く必要があり、貴重な時間を無駄にします。

    目の不自由なユーザーは、視覚的なユーザーと同じようにWebページを見てすぐにそのレイアウトを理解できるわけではないことに注意してください。視覚的なユーザーは、すべてのコンテンツを読まなくても、ページレイアウトに関する多くの情報を得ることができます。視覚障害のあるユーザーには、そのような贅沢はありません。スクリーン リーダーは線形に読み取ります。つまり、ページのレイアウトと構造を「概観する」ための他の便利な方法がない限り、Webページ全体を聞きます。実は、見出しはそのための方法の一つです。スクリーン リーダーのユーザーは、キーボード ショートカットを使用して、ドキュメントの見出し構造内を移動できます。

    ルールの説明

    ページ、または少なくともそのフレームの1つに、メイン コンテンツの開始前に表示される h1 要素が含まれていることを確認します。これにより、スクリーン リーダーのユーザーは、Webページの構造を理解するためにさらにページを聞いて時間を無駄にする代わりに、キーボード ショートカットを使用して見出し構造を移動できるようになります。

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

    このルールは、次のセレクターに一致するすべての要素を検索し、少なくとも1つ存在することを確認します: h1:not([role]), [role="heading"][aria-level="1"]

    リソース

    その他のリソース

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

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

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

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

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

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