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

ルールID: page-has-heading-one
ルールセット: 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

    修正方法

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

    一般的に、ページのメインコンテンツの始まりは h1 であること、そして h1 はページ内に一つであることがベストプラクティスとされています。

    通常は、web ページのメインコンテンツはレベル1の見出し (h1) で始まり、 この高いレベルの見出しより前に見出しはないことがベストプラクティスです。ページのサブセクションはレベル2の見出し (h2) でマークアップされるべきです。もしレベル2のセクション以下にサブセクションが存在する場合、それらはレベル3 (h3) 以降でマークアップされるべきです。

    iframe 内の見出し階層は、可能であれば、親ドキュメントの見出し階層に沿うように設計されるべきです。iframe 内に埋め込まれたコンテンツを調整することが可能な場合、iframe の見出し階層を既に存在する親ページの見出し階層の適切な場所にあわせることを推奨します。もし親ドキュメントのコンテンツの冒頭に h1 が存在するような構造だった場合 (これが最も推奨される方法です)、iframe はこれを考慮し、もう1つの h1 から始めないようにします。コンテンツが最初の見出し直下の子だった場合、iframe ドキュメントは h2 から始まり、あるいは、もしコンテンツがレベル2の見出しの子だった場合、iframeの最初の見出しは h3 にするなどします。

    多くの場合がそうであるように、iframe がサードパーティの web サイトのコンテンツを含む場合、見出し階層を調整することはできない可能性があります。このようにコントロールできない状況のため、ガイドラインは2つのドキュメントの見出し階層が一致することを求めてはいませんが、それらが一致することが望ましいです。

    なぜ重要なのか

    スクリーン・リーダーのユーザーは最初の h1 に直接たどり着くためにキーボードショートカットを用いることができるため、原則として、web ページのメインコンテンツ部分に直接到達することが可能です。h1 が存在しない、あるいは h1 がメインコンテンツの冒頭以外の箇所に記述されている場合、スクリーン・リーダーのユーザーは web ページ構造を理解するために読み上げ内容をさらに聞かなければならず、貴重な時間を無駄にしてしまいます。

    全盲のユーザーは、目の見えるユーザーと同じように web ページを見てレイアウトを理解できないことを覚えておきましょう。ページを視認しているユーザーはページ上のコンテンツすべてを読まなくても、ページのレイアウトから多くの情報を得ることができます。全盲のユーザーはそのようなことはできません。スクリーン・リーダーは直線的に読み上げるため、ページのレイアウトや構造を「垣間見る」便利な方法が他になければ、web ページ全体の読み上げを聞かなければなりません。見出しがその方法であることがわかっています。スクリーン・リーダーのユーザーはキーボードショートカットを用いてドキュメントの見出し構造を把握できます。

    ルールの説明

    スクリーン・リーダーのユーザーが web ページの構造を理解するために多くの読み上げ内容を聞いて時間を浪費する代わりに、キーボードショートカットを用いて見出し構造をナビゲートできるよう、そのページ、またはそのフレームの少なくとも一つにはメインコンテンツより前に h1 要素が表示されていることを確認します。

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

    このルールは次のすべてのセレクタに該当する要素を探し、いずれか一つが存在することを確認します: h1:not([role])、[role="heading"][aria-level="1"]

    リソース

    その他のリソース

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

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

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

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

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

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