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

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

Start learning 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 コースのページ (要登録)

SC 2.1.1 Keyboard

GitHub で axe-core に貢献する

その他のリソース

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

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

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

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

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

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