適合レベル
A
※各レベルについては適合レベルとはをご覧ください
概要
単一の文字キーだけのショートカットは、オフにしたり、Ctrlキーなどと組み合わせたりできるようにし、意図しない動作を防ぐ。
具体的な実装方法
2.1.4 A
1. ⭕️良い例
単一文字キーのショートカットを実装する場合、以下のいずれかのメカニズムを提供します。
- 無効化: ショートカットをオフにする設定項目を提供します。
- 再マップ: ショートカットキーを、CtrlやAltなどの修飾キーと組み合わせたものに変更できる機能を提供します。
- フォーカス時のみ有効: 特定のUIコンポーネントにフォーカスがあるときだけ、ショートカットが有効になるようにします（例: ドロップダウンリスト内で項目を選択するためにキーを押す）。
実装例 (コンセプト)
// 設定画面のイメージ
[チェックボックス] 単一キーのショートカットを有効にする
// JavaScriptのイメージ
document.addEventListener('keydown', function(e) {
// ユーザーが設定でショートカットを有効にしている場合のみ実行
if (shortcutsEnabled && e.key === 'm') {
toggleMute();
}
});2. ❌悪い例
無効化できないショートカット
- Gmailの旧バージョンなどで見られたように、単一キーのショートカットがデフォルトで有効になっており、それをオフにする手段が提供されていない。
説明のないショートカット
- ショートカットの存在や、それを無効化する方法が利用者に知らされていない。
なぜ問題なのか
これらの実装は、特定の利用者層が意図しない操作を強いられる原因となり、アクセシビリティを著しく損ないます。
改善策
- アプリケーションの設定画面などに、ショートカットを管理するための項目を設けます。
- ショートカットキーの一覧と、その設定変更方法をヘルプページなどに明記します。
3. プラットフォーム別の実装
主にJavaScriptを用いてキーボードイベントを制御することで実装します。利用者の設定（ショートカットの有効/無効など）をクッキーやWeb Storageに保存し、それを参照してイベントリスナーの動作を切り替えるのが一般的です。
4. 特殊なケースへの対応
この達成基準の重要な例外は、「ショートカットが有効になるのは、そのショートカットを利用するユーザインタフェースコンポーネントにフォーカスがあるときだけ」というケースです。例えば、<select>要素のドロップダウンリストが開いているときに、文字キーを押して項目を検索・選択する機能は、この達成基準を満たしています。なぜなら、ショートカットが有効なのは、そのリストコンポーネントがアクティブな間だけだからです。
確認観点
2.1.4 A
1. 定量的な基準の担保
チェックリストによる確認
実装されている場合、以下のいずれかの条件を満たしているか？
2. 定性的な基準の担保
レビュー
- JavaScriptのキーボードイベント処理のコードをレビューし、単一キーショートカットの実装が、無効化や再マップの仕組みと連携しているかを確認します。
専門家による監査
- アクセシビリティ専門家が、実際に音声入力ソフトウェアなどを使用し、意図しないショートカットが作動しないかをテストします。
- ショートカットを無効化・変更する機能が、利用者にとって見つけやすく、操作しやすいものであるかを評価します。