WCAG 2.2 ガイドライン「2.1.1 キーボード操作」Level A について
はじめに
WCAG 2.2の「2.1.1 キーボード操作」は、コンテンツのすべての機能がキーボードで操作可能であることを求めています。この基準は、マウスを使用できないユーザーや支援技術を利用するユーザーにとって、ウェブコンテンツを利用可能にするために重要です。
本記事では、HTML、CSS、JavaScriptを使用して初心者でも理解しやすい実装方法を解説します。
1. 基準の概要
キーボード操作の要件
- すべての機能はキーボードを使用して操作可能であること。
- 特定のタイミングを必要としないこと（例: 素早くキーを押す必要がない）。
- パス依存の入力が必要な場合は例外（例: ドラッグ＆ドロップ操作）。
2. 実装方法
a. 標準HTML要素を使用する
HTMLのネイティブ要素（例: <button>, <a>, <input>）はデフォルトでキーボード操作に対応しています。
適切な実装例
<button>クリックしてください</button>
<a href="https://example.com">リンク</a>
<input type="text" placeholder="入力してください">
<button>: Enterキーまたはスペースキーで操作可能。<a>: Enterキーで操作可能。
b. キーボードイベントを使用してカスタム要素を操作可能にする
非標準の要素やカスタムUIを作成する場合、キーボード操作をサポートする必要があります。
カスタムボタンの例
<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('ボタンが押されました！');
}
});
</script>
ポイント
tabindex="0"を使用してフォーカス可能にする。role="button"でスクリーンリーダーにボタンであることを伝える。- キーボードイベント（
keydown）でEnterキーやスペースキーに対応する。
c. フォーカスの移動を適切に制御する
キーボードユーザーがスムーズに操作できるように、フォーカスの順序を適切に設定します。
適切なタブ順序
<a href="#content">メインコンテンツへ移動</a>
<nav>
<a href="#section1">セクション1</a>
<a href="#section2">セクション2</a>
</nav>
<main id="content">
<h1>メインコンテンツ</h1>
<button>操作する</button>
</main>
d. キーボード操作を妨げる実装を避ける
失敗例
<a href="#" onclick="this.blur()">リンク</a>
問題点
blurを使ってフォーカスを削除すると、キーボードユーザーが次の操作を行えなくなる。
改善策
<a href="https://example.com">リンク</a>
e. マウスイベントとキーボードイベントを両方サポートする
JavaScriptの例
<div id="interactiveElement" tabindex="0">操作可能な要素</div>
<script>
const element = document.getElementById('interactiveElement');
const activate = () => alert('アクションが実行されました！');
element.addEventListener('click', activate);
element.addEventListener('keydown', (event) => {
if (event.key === 'Enter') activate();
});
</script>
3. よくある失敗例とその対策
a. ポインティングデバイス専用のイベントのみを使用
失敗例
element.addEventListener('click', () => {
console.log('クリックされました');
});
改善策
clickイベントに加え、keydownでキーボード操作をサポートします。
b. フォーカスを削除する
失敗例
element.addEventListener('focus', () => {
element.blur();
});
改善策
- フォーカスはユーザーの制御下に保ちます。
4. アクセシビリティのメリット
a. 支援技術との互換性
- スクリーンリーダーやスイッチデバイスを使用するユーザーがすべての機能を利用可能。
b. キーボード操作に依存するユーザーへの配慮
- すべての操作がキーボードのみで完結するため、マウスが使えない環境でも安心。
5. テスト方法
a. 手動テスト
- Tabキーでフォーカスを移動。
- Enterキーやスペースキーで操作可能か確認。
- フォーカスがスムーズに移動するか確認。
b. 自動テストツール
- AxeやWAVEを使用して、キーボードアクセシビリティをチェック。
まとめ
WCAG 2.2の「2.1.1 キーボード操作」は、すべての機能をキーボードで操作可能にすることを求めています。
実装ポイント
- 標準HTML要素を使用し、デフォルトのキーボード操作を活用する。
- カスタム要素にはキーボードイベントを追加し、操作可能にする。
- フォーカスの移動を適切に管理し、ユーザーがスムーズに操作できるようにする。
これらを実践することで、すべてのユーザーが公平にウェブコンテンツを利用できる環境を構築できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。