サイトアイコン IT & ライフハックブログ｜学びと実践のためのアイデア集

WCAG 2.2「2.1.4 文字キーショートカット」Level Aとは？要件、実装、テスト方法

greeden

WCAG ​2.2の達成基準2.1.4「文字キーショートカット」は、アルファベット、数字、記号などの文字キーを単独で使うショートカットが、意図しない操作を起こさないようにするための基準です。
単独の文字キーを使う場合は、利用者がオフにできる、修飾キーを含む組み合わせへ変更できる、対象のコンポーネントにフォーカスがあるときだけ有効になる、という三つの対応のうち、少なくとも一つを満たす必要があります。

この記事では、要件と実装を対応づけて説明し、最後に手動テストの手順を示します。
キーボード操作全般の要件を先に確認したい場合は、WCAG ​2.2「2.1.1 ​キーボード操作」Level ​Aの解説も参照してください。

文字キーショートカットの対象

文字キーショートカットとは、アルファベット、数字、記号などの文字キーを、CtrlキーやAltキーなどと組み合わせずに押して実行するショートカットです。
たとえば、ページ上のどこにいてもAキーだけで特定の機能が動く実装は、この基準の対象になります。

単独の文字キーを使うショートカットそのものが禁止されているわけではありません。
次のいずれかの方法で、利用者が意図しない動作を避けられるようにします。

達成基準2.1.4が求める三つの対応
対応 実装の考え方 利用者ができること
オフにできる ショートカットを無効にする設定や操作を用意する 不要なときにショートカットを停止できる
リマップできる CtrlキーやAltキーなどを含む組み合わせへ変更できるようにする 単独の文字キーでは動かない設定を選べる
フォーカスがある場合だけ有効 ショートカットに対応するコンポーネント内でだけキー入力を処理する 対象外の場所で同じ文字を入力しても機能が動かない

文書全体のキー監視で起きる問題

誤操作が起きやすいのは、文書全体に対して単独の文字キーを監視している場合です。
次のコードでは、利用者がどこにフォーカスを置いていても、Aキーを押すと処理が実行されます。

document.addEventListener('keydown', ​(event) ​=> ​{
 ​ ​if ​(event.key.toLowerCase() ​=== ​'a') ​{
 ​ ​ ​ ​alert('Aキーのショートカットを実行しました');
 ​ ​}
});

この実装では、文字を入力しようとした操作とショートカットを実行する操作を区別できません。
文書全体でキーを監視する必要があるなら、次に示す「オフ」または「リマップ」の仕組みを用意します。

三つの要件に対応する実装例

ショートカットをオフにできるようにする

利用者がショートカットを使わない場合に備え、オンとオフを切り替えるボタンを用意します。
ボタンの表示も現在の状態に合わせて更新すると、次に押したときの動作を判断しやすくなります。

<button ​type="button" ​id="toggleShortcut">
 ​ ​ショートカットをオフにする
</button>
let ​isShortcutEnabled ​= ​true;
const ​toggleButton ​= ​document.getElementById('toggleShortcut');

document.addEventListener('keydown', ​(event) ​=> ​{
 ​ ​if ​(isShortcutEnabled ​&& ​event.key.toLowerCase() ​=== ​'a') ​{
 ​ ​ ​ ​alert('Aキーのショートカットを実行しました');
 ​ ​}
});

toggleButton.addEventListener('click', ​() ​=> ​{
 ​ ​isShortcutEnabled ​= ​!isShortcutEnabled;
 ​ ​toggleButton.textContent ​= ​isShortcutEnabled
 ​ ​ ​ ​? ​'ショートカットをオフにする'
 ​ ​ ​ ​: ​'ショートカットをオンにする';
});

テストでは、オフにした後にAキーを押し、処理が実行されないことまで確認します。
切り替えボタンが動くことだけを確認しても、キー監視が停止したかどうかは判断できません。

修飾キーを含む組み合わせへリマップする

リマップでは、単独のAキーを別の単独文字へ置き換えるだけでは不足します。
次の例では、利用者がCtrlキーまたはAltキーを含む組み合わせを選び、選択した組み合わせでだけ処理が動きます。

<label ​for="shortcutKey">ショートカットを選択</label>
<select ​id="shortcutKey">
 ​ ​<option ​value="ctrl-alt-a">Ctrl ​+ ​Alt ​+ ​A</option>
 ​ ​<option ​value="alt-a">Alt ​+ ​A</option>
</select>
const ​shortcutKey ​= ​document.getElementById('shortcutKey');

document.addEventListener('keydown', ​(event) ​=> ​{
 ​ ​const ​keyIsA ​= ​event.key.toLowerCase() ​=== ​'a';
 ​ ​const ​usesCtrlAltA ​= ​shortcutKey.value ​=== ​'ctrl-alt-a'
 ​ ​ ​ ​&& ​event.ctrlKey
 ​ ​ ​ ​&& ​event.altKey
 ​ ​ ​ ​&& ​keyIsA;
 ​ ​const ​usesAltA ​= ​shortcutKey.value ​=== ​'alt-a'
 ​ ​ ​ ​&& ​event.altKey
 ​ ​ ​ ​&& ​!event.ctrlKey
 ​ ​ ​ ​&& ​keyIsA;

 ​ ​if ​(usesCtrlAltA ​|| ​usesAltA) ​{
 ​ ​ ​ ​alert('選択したショートカットを実行しました');
 ​ ​}
});

この例では、Aキーだけを押しても処理は実行されません。
実際の画面では、選択した設定が現在のショートカットとして分かるように表示します。

フォーカスがある場合だけ有効にする

ショートカットが特定のコンポーネントの操作にだけ必要なら、そのコンポーネントでキー入力を監視します。
文書全体ではなく対象要素へイベントを登録することで、フォーカスが外れている間は処理が実行されません。

<label ​for="textArea">編集内容</label>
<textarea ​id="textArea"></textarea>
const ​textArea ​= ​document.getElementById('textArea');

textArea.addEventListener('keydown', ​(event) ​=> ​{
 ​ ​if ​(event.key.toLowerCase() ​=== ​'a') ​{
 ​ ​ ​ ​alert('テキストエリア内のショートカットを実行しました');
 ​ ​}
});

この方法を使えるのは、ショートカットがそのコンポーネントの操作に結び付いている場合です。
フォーカスの移動や見え方も含めて確認する場合は、キーボード操作とフォーカス表示の実務も参考になります。

よくある失敗と修正方法

手動テストの手順

文字キーショートカットの状態は、実際にフォーカスを移動し、設定を切り替えながら確認します。
自動テストだけでは、設定変更後の動作やフォーカスがあるときだけ有効になる条件を確認しにくいため、次の手動テストを組み合わせます。

  1. ページ内で、アルファベット、数字、記号を単独で押して動くショートカットを洗い出します。
  2. 入力欄を含む複数の場所へフォーカスを移し、単独キーで意図しない処理が起きないか確認します。
  3. オフ機能がある場合はショートカットを無効にし、対象の文字キーを押しても処理が動かないことを確認します。
  4. リマップ機能がある場合は組み合わせを変更し、変更後の組み合わせだけが動き、元の単独キーでは動かないことを確認します。
  5. フォーカスがある場合だけ有効な機能は、対象の内側と外側の両方で同じキーを押し、動作の違いを確認します。

実装前後の確認項目

達成基準2.1.4への対応は、ショートカットをなくすことだけを意味しません。
利用者が無効化または変更できるようにするか、機能が必要な範囲だけで有効にすることで、便利さを残しながら意図しない操作を減らせます。

当社では、ウェブアクセシビリティを導入しやすくするUUU ​ウェブアクセシビリティを提供しています。
アクセシビリティ改善をご検討の方は、サービスの詳細をご覧ください。

モバイルバージョンを終了