WCAG 2.2 ガイドライン「2.1.3 キーボード操作（例外なし）」Level AAA について
はじめに
WCAG 2.2の「2.1.3 キーボード操作（例外なし）」は、コンテンツのすべての機能が例外なくキーボードで操作可能であることを求めています。この基準は、キーボード操作のみで完全な操作性を提供することで、すべてのユーザーが公平にウェブコンテンツを利用できるようにするために設けられています。
1. 基準の概要
必須要件
- すべての機能がキーボードで操作可能であること。
- 個々のキー入力に特定のタイミングが必要ないこと。
特記事項
- Path-dependent input（例: ドラッグ＆ドロップや手書き入力）など、パス依存の入力が必要な場合、この基準を満たすことはできません。
- これはLevel AAAの基準であり、非常に厳格な要件です。
2. 実装方法
a. 標準のキーボード操作を利用する
HTMLの標準要素（例: <button>, <a>, <input>）はキーボード操作に対応しています。これらを活用することで、基準を満たすことが容易になります。
適切な例
<button>送信</button>
<a href="#content">コンテンツへ移動</a>
<input type="text" placeholder="名前を入力してください">
b. カスタムUIコンポーネントでキーボード操作を実装
カスタムコンポーネントを使用する場合、キーボード操作をサポートするコードを追加します。
JavaScriptでカスタムボタンを実装
<div tabindex="0" role="button" id="customButton">カスタムボタン</div>
<script>
const customButton = document.getElementById('customButton');
customButton.addEventListener('keydown', (event) => {
if (event.key === 'Enter' || event.key === ' ') {
alert('ボタンが押されました！');
}
});
customButton.addEventListener('click', () => {
alert('マウスでも操作できます！');
});
</script>
ポイント
tabindex="0"を使用してフォーカス可能にする。role="button"でスクリーンリーダーに役割を伝える。- Enterキーとスペースキーで操作可能にする。
c. 入力タイミングに依存しない実装をする
特定のタイミングが必要な操作を排除し、キー入力に十分な猶予を持たせます。
適切な入力例
document.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') {
console.log('右方向の操作がトリガーされました');
}
});
- 連続したキー入力を求めるのではなく、1回の入力で操作が完結するようにします。
d. ドラッグ＆ドロップの代替を提供
マウスによるドラッグ＆ドロップ操作はキーボードで再現できないため、代替手段を用意します。
キーボードで移動可能な実装例
<div id="draggable" tabindex="0" style="width: 100px; height: 100px; background-color: lightblue;">移動可能なボックス</div>
<script>
const draggable = document.getElementById('draggable');
let position = 0;
draggable.addEventListener('keydown', (event) => {
if (event.key === 'ArrowRight') {
position += 10;
draggable.style.transform = `translateX(${position}px)`;
}
if (event.key === 'ArrowLeft') {
position -= 10;
draggable.style.transform = `translateX(${position}px)`;
}
});
</script>
ポイント
- 矢印キーで移動可能にし、キーボード操作でドラッグ＆ドロップの代替を実現します。
3. よくある失敗例とその対策
a. マウスイベントにのみ依存
失敗例
element.addEventListener('click', () => {
console.log('クリックされました');
});
問題点
- マウス操作に依存し、キーボード操作が考慮されていない。
改善策
element.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
console.log('キーボードでも操作可能です');
}
});
b. フォーカス不可能なカスタム要素
失敗例
<div role="button">ボタン</div>
問題点
tabindexが指定されていないため、キーボードでフォーカスできない。
改善策
<div role="button" tabindex="0">ボタン</div>
c. 特定のタイミングを必要とする入力
失敗例
- 一定時間内に特定のキーを連続で押す操作。
改善策
- 操作の完了に特定のタイミングを必要としない設計に変更する。
4. アクセシビリティのメリット
a. ユーザーの多様性に対応
- キーボード操作のみでウェブコンテンツを利用するユーザーに対応。
- 支援技術を利用するユーザーにもアクセス可能。
b. ユーザー体験の向上
- 直感的で一貫性のある操作を提供。
5. テスト方法
a. 手動テスト
- Tabキーでフォーカスを移動。
- Enterキーやスペースキーで操作可能か確認。
- 矢印キーでの操作が適切に機能するか確認。
b. 自動テストツール
- AxeやWAVEなどのツールでキーボード操作のアクセシビリティを確認。
まとめ
WCAG 2.2の「2.1.3 キーボード操作（例外なし）」は、すべての機能がキーボードで完全に操作可能であることを求めています。
実装のポイント
- 標準HTML要素を活用し、デフォルトのキーボード操作を確保する。
- カスタム要素ではキーボードイベントを実装する。
- タイミング依存の操作を排除し、代替手段を提供する。
これらの要件を満たすことで、すべてのユーザーが快適にウェブコンテンツを利用できる環境を実現できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。