スクロール可能な領域にはキーボードアクセスが必要です

ルールID: scrollable-region-focusable
ルールセット: axe-core 4.10
ユーザーへの影響:
ガイドライン: WCAG 2.1 (A), WCAG 2.0 (A), WCAG 2.2 (A), Trusted Tester, EN 301 549

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)

  • WCAG 2.1 (A)
  • WCAG 2.0 (A)
  • WCAG 2.2 (A)
  • Trusted Tester
  • EN 301 549

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

  • 2.1.1: Keyboard
  • 2.1.3: Keyboard (No Exception)

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

  • 2.1.1: Keyboard
  • 2.1.3: Keyboard (No Exception)

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

  • 2.1.1: Keyboard
  • 2.1.3: Keyboard (No Exception)

Trusted Tester 指南

  • 4.A: All functionality can be accessed and executed using only the keyboard.

    修正方法

    正しいマークアップソリューション

    スクロール可能な領域をキーボードでアクセス可能にするための鍵は、キーボードのみを使用するユーザーがスクロール可能な領域自体またはスクロール可能な領域内の静的テキスト項目にフォーカスできるようにすることです。以下の最初の例は最初の手法を示し、2番目の例は2番目の手法を示しています。 

    
<div id="pass1" style="height: 200px; overflow-y: auto" tabindex="0">
    <div style="height: 2000px">
        <p>Content</p>
    </div>
</div>

<div id="pass2" style="height: 20px; overflow: auto;">
    <input type="text" tabindex="-1" />
    <select tabindex="-1"></select>
    <textarea tabindex="-1"></textarea>
    <p style="height: 200px;" tabindex="0"></p>
</div>

    条件付きソリューション

    ブラウザがオートコンプリートのキーボード イベントをインターセプトすると、次の例は失敗する可能性があります。スクロール可能な領域またはその領域内の静的要素には常にtabindex 0を配置することをお勧めします。 

    
    <div id="conditional1" style="overflow-y: scroll; height: 5px;">
    <input type="text" />
</div>

    マークアップが間違っている

    次の2つの例は、スクロール可能な領域内にフォーカス可能な要素がないため失敗します。 

    <div id="fail1" style="height: 5px; overflow: auto;">
	<input type="text" tabindex="-1" /></div>

<div id="fail2" style="height: 5px; overflow: auto;">
	<input type="text" tabindex="-1" />
	<select tabindex="-1"></select>
	<textarea tabindex="-1"></textarea></div>

    なぜ重要なのか

    キーボード ナビゲーションを可能にするフォーカス可能な要素のスクロール可能なコンテンツをチェックします。フォーカスがスクロール可能な領域内の要素に移動しても、キーボード ナビゲーションは失敗してはなりません。

    ルールの説明

    スクロール可能なコンテンツを持つ要素はキーボードでアクセスできる必要があります

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

    スクロール可能な領域にキーボード アクセスがあることを確認してください。

    リソース

    Deque University コースのページ (要登録)

    GitHub で axe-core に貢献する

    その他のリソース

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

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

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

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

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

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