WCAG 2.2 ガイドライン「2.1.2 キーボードトラップなし」Level A について
はじめに
WCAG 2.2の「2.1.2 キーボードトラップなし」では、キーボードでフォーカスが特定のコンポーネント内に閉じ込められる（トラップされる）ことを防ぐことを求めています。この基準は、キーボードのみで操作するユーザーがページ全体をスムーズに利用できるようにするために重要です。
1. 基準の概要
キーボードトラップとは？
- ユーザーがTabキーや矢印キーを使用してフォーカスを移動しようとしたときに、特定の要素やエリアから抜け出せない状態のことを指します。
要件
-
フォーカスを移動可能にする
キーボードでフォーカスを特定のコンポーネントに移動できる場合、そこから別のコンポーネントへ移動可能である必要があります。 -
特殊な操作が必要な場合は通知する
フォーカスの移動に標準以外の操作が必要な場合、ユーザーにその操作方法を知らせる必要があります。
2. 実装方法
a. 標準のナビゲーションでフォーカスを移動可能にする
通常のTabキーやShift+Tabキーでフォーカスが移動するように設計します。
適切なフォームの例
<form>
<label for="name">名前:</label>
<input type="text" id="name" name="name">
<label for="email">メール:</label>
<input type="email" id="email" name="email">
<button type="submit">送信</button>
</form>
- 上記のコードは、Tabキーで名前入力欄→メール入力欄→送信ボタンへ順にフォーカスが移動します。
b. モーダルダイアログでフォーカスを制御する
モーダルダイアログを使用する場合、ダイアログ内でTabキーを押すとフォーカスが循環するようにしつつ、Escキーで閉じられるようにします。
JavaScriptでのモーダル制御
<button id="openModal">モーダルを開く</button>
<div id="modal" role="dialog" aria-hidden="true">
<button id="closeModal">閉じる</button>
<input type="text" placeholder="入力欄">
</div>
const modal = document.getElementById('modal');
const openModalButton = document.getElementById('openModal');
const closeModalButton = document.getElementById('closeModal');
openModalButton.addEventListener('click', () => {
modal.setAttribute('aria-hidden', 'false');
closeModalButton.focus();
});
closeModalButton.addEventListener('click', () => {
modal.setAttribute('aria-hidden', 'true');
openModalButton.focus();
});
document.addEventListener('keydown', (event) => {
if (event.key === 'Escape') {
modal.setAttribute('aria-hidden', 'true');
openModalButton.focus();
}
});
- フォーカスがモーダル内で閉じ込められないように、
aria-hidden属性を使用して表示状態を切り替えます。 - Escキーでモーダルを閉じられるようにします。
c. コンポーネント内のフォーカスを適切に管理する
フォーカスを循環させる方法
特定のエリア内でTabキーを押したとき、最後の要素から最初の要素にフォーカスを戻すように設定します。
const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
const modal = document.getElementById('modal');
const firstFocusableElement = modal.querySelectorAll(focusableElements)[0];
const focusableContent = modal.querySelectorAll(focusableElements);
const lastFocusableElement = focusableContent[focusableContent.length - 1];
document.addEventListener('keydown', (event) => {
if (event.key === 'Tab') {
if (event.shiftKey) {
// Shift + Tabで最初の要素から戻ろうとした場合
if (document.activeElement === firstFocusableElement) {
event.preventDefault();
lastFocusableElement.focus();
}
} else {
// Tabキーで最後の要素から進もうとした場合
if (document.activeElement === lastFocusableElement) {
event.preventDefault();
firstFocusableElement.focus();
}
}
}
});
3. よくある失敗例とその改善策
a. フォーカスが固定される
失敗例
<div tabindex="0">
<button>ボタン1</button>
<button>ボタン2</button>
</div>
問題点
- フォーカスがコンテナ内に固定され、他の要素へ移動できない。
改善策
- キーボードで他の要素に移動できるように設計。
b. 特殊な方法でしかフォーカスを移動できない
失敗例
- 特定のショートカットキーでのみフォーカスを移動可能にする。
改善策
- 標準のTabキーとShift+Tabキーで移動できるようにする。
4. アクセシビリティのメリット
a. キーボードユーザーへの配慮
- マウスを使えないユーザーも、すべてのコンテンツを利用可能。
b. ユーザー体験の向上
- ページ全体をスムーズに操作できる。
5. テスト方法
a. 手動テスト
- Tabキーでフォーカスを移動。
- 特定のエリア内でフォーカスが閉じ込められないことを確認。
- Escキーでモーダルが閉じるか確認。
b. 自動テストツール
- AxeやWAVEを使用して、キーボードアクセシビリティを確認。
まとめ
WCAG 2.2の「2.1.2 キーボードトラップなし」は、キーボードユーザーがページ全体を自由に操作できることを求めています。
実装のポイント
- 標準のフォーカス移動をサポートし、トラップを防ぐ。
- モーダルやカスタムUIではフォーカスを循環させる。
- フォーカス移動に特別な方法が必要な場合は通知する。
これらを実践することで、すべてのユーザーがウェブコンテンツを快適に利用できる環境を構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。