WCAG 2.2 ガイドライン「2.1.4 文字キーショートカット」Level A について
はじめに
WCAG 2.2の「2.1.4 文字キーショートカット」では、単独の文字キー（アルファベット、数字、記号など）を使用したショートカットが、ユーザーにとって操作を妨げることのないようにすることを求めています。この基準は、ショートカットが誤作動を引き起こすのを防ぎ、使いやすい設計を実現するためのものです。
1. 基準の概要
適用条件
- 単一の文字キー（A～Z、数字、記号など）をショートカットキーとして使用している場合。
要件
以下のいずれかを満たす必要があります：
-
オフにできる（Turn off）
- ショートカットを無効にする仕組みを提供する。
-
リマップできる（Remap）
- ショートカットを、CtrlやAltキーを組み合わせたキーに変更できる仕組みを提供する。
-
フォーカスがある場合のみ有効（Active only on focus）
- ショートカットキーが、そのコンポーネントにフォーカスがある場合のみ有効になる。
2. 実装方法
a. ショートカットをオフにできる仕組みを提供
JavaScriptでの例
<button id="toggleShortcut">ショートカットをオフにする</button>
<textarea id="textArea" placeholder="ここに入力してください"></textarea>
let isShortcutEnabled = true;
document.addEventListener('keydown', (event) => {
if (isShortcutEnabled && event.key === 'a') {
alert('Aキーが押されました！');
}
});
document.getElementById('toggleShortcut').addEventListener('click', () => {
isShortcutEnabled = !isShortcutEnabled;
alert(`ショートカットが${isShortcutEnabled ? '有効' : '無効'}になりました。`);
});
b. ショートカットをリマップ可能にする
ユーザーがショートカットキーを変更できる仕組みを提供します。
リマップの例
<label for="shortcutKey">新しいショートカットキー:</label>
<input type="text" id="shortcutKey" maxlength="1">
<textarea id="textArea" placeholder="ここに入力してください"></textarea>
let shortcutKey = 'a';
document.addEventListener('keydown', (event) => {
if (event.key === shortcutKey) {
alert(`${shortcutKey.toUpperCase()}キーが押されました！`);
}
});
document.getElementById('shortcutKey').addEventListener('input', (event) => {
shortcutKey = event.target.value.toLowerCase();
alert(`新しいショートカットキーは "${shortcutKey.toUpperCase()}" です。`);
});
c. フォーカスがある場合のみショートカットを有効化
特定の要素にフォーカスがある場合のみ、ショートカットを有効にします。
例
<textarea id="textArea" placeholder="ここに入力してください"></textarea>
const textArea = document.getElementById('textArea');
textArea.addEventListener('keydown', (event) => {
if (event.key === 'a') {
alert('テキストエリアでAキーが押されました！');
}
});
3. よくある失敗例とその対策
a. ショートカットが常に有効で誤作動を引き起こす
失敗例
document.addEventListener('keydown', (event) => {
if (event.key === 'a') {
alert('Aキーが押されました！');
}
});
問題点
- テキスト入力中に誤動作を引き起こす可能性があります。
改善策
- フォーカスがある場合のみショートカットを有効にします。
b. ショートカットを無効化またはリマップできない
失敗例
- 固定のショートカットキーが設定されており、変更や無効化のオプションがない。
改善策
- ショートカットをカスタマイズできる機能を追加します。
4. アクセシビリティのメリット
a. ユーザーエクスペリエンスの向上
- ショートカットが誤作動を引き起こすことなく、ユーザーが自由に利用可能になります。
b. 配慮が必要なユーザーへの対応
- 視覚障害や運動障害を持つユーザーに配慮し、意図しない操作を防ぎます。
5. テスト方法
a. 手動テスト
- ショートカットが誤作動しないことを確認。
- ショートカットのオン/オフが機能することを確認。
- ショートカットキーのリマップが適切に動作することを確認。
b. 自動テストツール
- 現時点では、手動テストが主流。ショートカットの状態は自動ツールでは検証が難しい場合があります。
まとめ
WCAG 2.2の「2.1.4 文字キーショートカット」は、単一の文字キーを使用したショートカットが誤動作を引き起こさないようにすることを目的としています。
実装ポイント
- ショートカットを無効化またはリマップ可能にする仕組みを提供する。
- フォーカスがある場合のみショートカットを有効にする。
- 誤作動を防ぎ、ユーザーの操作を妨げない設計にする。
これにより、すべてのユーザーにとって操作しやすいウェブコンテンツを実現できます。
当社では、ウェブアクセシビリティを簡単に導入できるUUU ウェブアクセシビリティをリリースしております。アクセシビリティ向上にご興味がある方はぜひ詳細をご覧ください。