ページには、繰り返されるブロックをバイパスする手段が必要です

ルールID: bypass
ルールセット: axe-core 4.10
ユーザーへの影響: 深刻
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Section 508, Trusted Tester, 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 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Section 508
  • Trusted Tester
  • EN 301 549

WCAG 達成基準 [WCAG 2.1 (A)]

  • 2.4.1: 必須: Bypass Blocks

WCAG 達成基準 [WCAG 2.0 (A)]

  • 2.4.1: 必須: Bypass Blocks

WCAG 達成基準 [WCAG 2.2 (A)]

  • 2.4.1: 必須: Bypass Blocks

Section 508 ガイドライン

  • 1194.22: 必須: Web based intranet and Internet Information & Applications
  • 1194.22 (o): 必須: A method shall be provided that permits users to skip repetitive navigation links.

Trusted Tester Guidelines

  • 9.A: 必須: A keyboard-accessible method is provided to bypass repetitive content.

    修正方法

    繰り返されるコンテンツのブロック、またはインターフェース要素 (ヘッダーやナビゲーション) をスキップし、メインコンテンツに素早く到達する仕組みを提供するために main ランドマークが各ページにあることを確認します。

    ランドマークはメインコンテンツのセクションなど、レイアウト上のすでに定義されているパーツを指定するために使用されるべきです。

    ページは一つ以上のメインランドマークを含むべきではありません。

    HTML5 vs. ARIA:

    一般的なルールとして、可能な限り同等の ARIA ではなく、元から存在する HTML 要素を使用することが最適です。そのため、たとえ ARIA ロール role="main" がランドマークしてほとんどのスクリーン・リーダーに登録されていても、相当する main HTML5 要素を代わりに使用します。

    良い例: 適切なランドマークを使用する

    この例では、すべてのコンテンツはランドマークの中にあり、そしてランドマークは様々な種類のコンテンツを適切に明示するために使用されています。

    コード開始:
    <header>
      <div>This is the header.</div>
    </header>
    <nav>
      <div>This is the navigation.</div>
    </nav>
    <main>
      <div>This is the main content.</div>
      <section>
        <div>This is a section.</div>
      </section>
      <article>
        <div>This is an article.</div>
      </article>
      <aside>
        <div>This is an aside.</div>
      </aside>
    </main>
    <footer>
      <div>This is the footer.</div>
    </footer>
    コード終了。

    なぜ重要なのか

    Web サイトは通常、補助的な、繰り返されるコンテンツ (例えばナビゲーションリンク、見出し画像、そして広告フレーム) を複数のページに表示するため、ページの主要コンテンツにより早く、より直接的なアクセスができるとキーボードのみのユーザーの助けになります。これにより、キーを押す回数や、それに関連した身体的な痛みを軽減します。

    インターフェースがキーボードによる操作をより簡単にするための方法を含んでいない場合、マウスを使用できないユーザーにとって、キーボードで操作することはより難しく、時間がかかります。例えば、web ページの真ん中にあるリンクを操作する場合、キーボードのユーザーはページのヘッダーやメインナビゲーションにあるたくさんのリンクやボタンをタブ操作で通らなければならないかもしれません。

    極端な場合、深刻な運動能力の制限があるユーザーは、それらのすべての要素をタブ操作で通るまでに数分かかるかもしれず、ユーザーによっては疲労や、身体的な痛みにつながる可能性があります。より少ない制限のユーザーであっても、求めているリンクを1秒や2秒でクリックできるマウスユーザーより時間を要します。

    ルールの説明

    繰り返されるコンテンツのブロック、またはインターフェース要素 (ヘッダーやナビゲーションなど) をスキップし、素早くメインコンテンツに到達するには、各ページに main ランドマークが必要です。

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

    少なくとも次の一つの機能を確認します:

    • 内部のスキップリンク
    • 見出し
    • ランドマーク領域

    リソース

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

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

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

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

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