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

ルール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
 

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)
  • 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 Guidelines

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

    修正方法

    正しいマークアップ方法

    スクロール可能な領域をキーボードでアクセシブルにするには、キーボードしか使わないユーザーがそのスクロール可能な領域自体、またはそのスクロール可能な領域内のスタティックなテキスト項目にフォーカス出来るようにすることが必要です。下記の最初の例は一つ目の方法を、二番目の例は二つ目の方法を示しています。

    
<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>

    条件付きの解決方法

    次の例はブラウザーが自動補完のキーボード・イベントを介入した場合に失敗する可能性があります。スクロール可能な領域またはその領域内のスタティックなテキストに0と言う値のtabindexを常に指定したほうが良いです。

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

    不適切なマークアップ方法

    次の二つの例は、スクロール可能な領域内にフォーカス可能な要素がないため不合格になります。

    <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 ルールの一覧 を参照する

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

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

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

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