ページに複数のcontentinfoランドマークを含めることはできません

ルールID: landmark-no-duplicate-contentinfo
ルールセット: 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

    修正方法

    ドキュメントに複数の contentinfo ランドマークが存在しないことを確認します。

    ページには一つより多くの contentinfo ランドマークインスタンスを含めるべきではありません。

    良い例: contentinfo ランドマークを1ページにつき1インスタンスにする

    role="contentinfo" ARIA ランドマークはページ内で一意の要素に一度のみ使われています。

    ARIA の仕様書は role="banner", role="main", そして role="contentinfo" ランドマークはページにつき一度のみ使用されることを意図していると述べています。他の ARIA ランドマークは複数回使用できます。興味深いことに、HTML5 の仕様書は同等のランドマークである header, main, そして footer の複数インスタンスを許可しています。公式な制限は ARIA ランドマークのみです。しかし、ほとんどの web デザインでは、ARIA または HTML5 のいずれかで指定しているかに関わらず、各ランドマークは一つずつにすることが適切です。

    コード開始:
    <div role="banner">Visit Your Local Zoo!</div>
    <div role="main">
      <h1>The Nature of the Zoo</h1>
      <article>
        <h2>In the Zoo: From Wild to Tamed</h2>
        <p>What you see in the zoo are examples of 
        inborn traits left undeveloped. [...]</p>
      </article>
      <article>
       <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
        <p>Some animals naturally group together with their own kind, 
        but others stake solitary claim on their territory. 
        Even those that typically live harmoniously together can 
        have bouts with romantic rivals, which can potentially 
        escalate in the more confined setting of a zoo. [...]</p>
      </article>
    </div>
    <div role="contentinfo">
      <p>Brought to you by North American Zoo Partnership</p>
    </div>
    コード終了。

    悪い例: contentinfo ランドマークの複数インスタンス

    この例では、一度のみ使用されるべき二種類のランドマーク (mainrole="contentinfo") が同じページ内で複数回使用されています。

    コード開始:
    <header>Visit Your Local Zoo!</header>
    <h1>The Nature of the Zoo</h1>
    <main class="article">
      <h2>In the Zoo: From Wild to Tamed</h2>
      <p>What you see in the zoo are examples of 
      inborn traits left undeveloped. [...]</p>
      <div role="contentinfo">
        <p>[...information about this article...]</p>
      </div>
    </main>
    <main class="article">
     <h2>Feeding Frenzy: The Impact of Cohabitation</h2>
      <p>Some animals naturally group together with their own kind, 
      but others stake solitary claim on their territory. 
      Even those that typically live harmoniously together can 
      have bouts with romantic rivals, which can potentially 
      escalate in the more confined setting of a zoo. [...]</p>
      <div role="contentinfo">
        <p>[...information about this article...]</p>
      </div>
    </main>
    <footer>
      <p>Brought to you by North American Zoo Partnership</p>
    </footer>
    コード終了。

    なぜ重要なのか

    ランドマークの主な目的の一つは、全盲のユーザーが素早く適切なランドマークを見つけて移動できるようにするためなので、ランドマークの総数は比較的少なくするべきです。そうしなければ、スクリーン・リーダーのユーザーは目的のものを見つけるために、多くの余分な情報を整理しなければなりません。

    アクセシビリティのために正確なセマンティック構造を使うという話題があるにもかかわらず、HTML には、歴史的に、ページのセクションをヘッダー、ナビゲーション、メインコンテンツ、そしてフッターとして指定する機能など、いくつかの重要なセマンティックマーカーが不足していました。HTML5 では、 headernavmain、そして footer などの新しい要素を使ってこれらの指定ができるようになりました。ARIA (Accessible Rich Internet Application) の属性である role="banner"role="navigation"role="main" そして role="contentinfo" を使用することでも、同等の機能を提供できます。

    JAWS、NVDA、そして VoiceOver は ARIA ランドマークを使って web ページのセクションをナビゲートする機能をサポートしています。ランドマークはユーザーが web ページのメインコンテンツにスキップする方法を提供するという問題に対して、より洗練された解決方法を提供します。Web デザインに対して可視な変更は加えられないため、目立たず、不可視にできます。もちろん、この方法が不可視であるという事実は全盲のスクリーン・リーダーのユーザーにとっては問題ありませんが、目の見えるキーボードユーザーやロービジョンのスクリーンを拡大しているユーザーにとっては良くありません。その意味では、HTML5 領域や ARIA ランドマークは昔からの「スキップリンク」をまだ置き換えることはできません。ブラウザーにはまだ、HTML5 領域または ARIA ランドマークが存在することをユーザーに通知する組み込まれた方法がありません。スクリーン・リーダーのユーザーだけがこれらの強みを活かすことができます。Firefox 内でランドマークをナビゲートする機能を追加する Firefox ARIA landmark extension 新規ウィンドウで開きます という拡張機能が存在しますが、これはブラウザーのネイティブ機能ではありません。

    ルールの説明

    contentinfo ランドマークはページに最高でも一つのみであることを確認します。

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

    このルールはすべての contentinfo ランドマークを探し、ロールを反映しないものを除去し、そして複数存在しないことを確認します。

    リソース

    その他のリソース

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

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

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

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

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

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