この記事でわかること

  • 1文字のキーのショートカットについて定めた、WCAGの達成基準2.1.4の内容
  • 止める・別のキーに変える・フォーカスがあるときだけ動く、の3つの方法
  • 切り替えのチェックボックスを付け、入力欄では動かない作りの書き方
  • どこでも動く版と、ブラウザで比べた結果

一覧のページで「j」を押すと次の項目へ進む、「?」でヘルプが開く。キーボードに慣れた人には便利なこうした1文字のショートカットも、音声で文字を入力する人には不便な仕組みになります。話した言葉に含まれる文字が、勝手にショートカットとして動いてしまうためです。この記事では、1文字のショートカットを安全に用意する作り方を、WCAG 2.2の達成基準2.1.4を軸にまとめます。

参照したのは、W3Cの達成基準2.1.4の解説(Understanding)と失敗例F99で、2026年11月1日に原文を確かめました。例のページと項目は、この記事のために用意したものです。特定のツールやスクールの紹介はしません。

先に結論: 1文字のショートカットは、切り替えられるようにし、入力中は動かさない

1文字のキーだけで動くショートカットを作るなら、止める方法か、CtrlやAltを含む形に変える方法を用意します。 ある部品にフォーカスがあるときだけ動く作りでもかまいません。

方法 内容
止める ショートカットをオフにする設定を用意する
別のキーに変える CtrlやAltのような、印字されないキーを含む形に変えられる
フォーカスがあるときだけ その部品にフォーカスがあるときだけ動く

1文字のショートカットに関わる基準(2.1.4)

WCAG 2.2の達成基準2.1.4(レベルA)は、文字・句読点・数字・記号だけでショートカットを作る場合に、上の3つのうち少なくとも1つを満たすことを求めています。文字には、大文字と小文字の両方が含まれます。

解説では、この基準のねらいを、ショートカットがうっかり動いてしまうのを減らすことだとしています。1文字のショートカットは、多くのキーボードの利用者には役立つ一方で、話した言葉が文字の並びとして入力される音声入力の利用者や、キーを押し間違えやすい人には不向きで、いらだちのもとになるとしています。

音声入力で何が起きるか

解説には、こんな例があります。メールのアプリで、「k」で次へ、「y」で保管、「m」で通知を止めるショートカットが使える画面にカーソルがあるとき、近くの人の「Hey Kim」という声をマイクが拾ったとします。「hey」の「y」でメールが保管され、「Kim」の「k」で次の会話へ移り、「m」でスレッドの通知が止まってしまいます。

CtrlやAltのような修飾キーが要るショートカットなら、こうしたことは起きません。解説でも、修飾キーが要る場合は、音声入力でまぎれ込んだ文字の並びがショートカットとして扱われないとしています。

書き方の例: 切り替えのチェックボックスと、入力欄では動かないショートカット

次のHTMLは、「j」で一覧の次の項目へ進むショートカットに、オンとオフの切り替えを付けた例です。入力欄にいるときや、CtrlやAltと一緒に押したときは動かないようにしています。

<label><input type="checkbox" id="use-shortcuts" checked> 1文字のキーのショートカットを使う(「j」で次へ)</label>
<label for="memo">メモ</label>
<textarea id="memo"></textarea>
<ol id="items">
  <li tabindex="-1">1件目のお知らせ</li>
  <li tabindex="-1">2件目のお知らせ</li>
  <li tabindex="-1">3件目のお知らせ</li>
</ol>
<script>
  const items = [...document.querySelectorAll("#items li")];
  let current = -1;
  document.addEventListener("keydown", (event) => {
    // 切り替えがオフなら、ショートカットを動かさない
    if (!document.getElementById("use-shortcuts").checked) return;
    // 文字を打つ場所にいるときや、修飾キーと一緒のときは動かさない
    const tag = event.target.tagName;
    if (tag === "INPUT" || tag === "TEXTAREA" || event.target.isContentEditable) return;
    if (event.ctrlKey || event.altKey || event.metaKey) return;
    if (event.key === "j") {
      current = Math.min(current + 1, items.length - 1);
      items[current].focus();
    }
  });
</script>

切り替えの設定をページを移っても残したいときは、利用者の設定として保存しておく方法もあります。

手順: 自分のサイトのショートカットを見直す

  1. ショートカットを書き出す: 作った人に、1文字のキーで動く機能があるかを聞き、キーと動きを並べます
  2. 1文字だけで動くものを選ぶ: CtrlやAltが要らずに、文字・数字・記号だけで動くものを残します
  3. 3つの方法のどれかを用意する: 止める設定、別のキーに変える設定、フォーカスがあるときだけ動く作りのどれかにします
  4. 入力欄で試す: 入力欄やメモの欄でその文字を打ち、ショートカットが動かないかを確かめます
  5. オフにして試す: 設定をオフにして、そのキーを押しても何も起きないかを確かめます

試した結果

上のHTMLと、切り替えや入力欄の判定を外してどこでも「j」で動く版を作りました。両方を自分のPCの中で配信し、画面を出さないChromeで開いて、キーを送って比べました。

  • 上のHTMLで、ページの本文にいる状態から「j」を2回押すと、フォーカスは1件目、2件目のお知らせへと進みました
  • メモの欄で「jj」と打つと、上のHTMLでは欄に「jj」と入り、フォーカスはメモの欄に残りました
  • チェックボックスをオフにしてから本文で「j」を押すと、フォーカスは動きませんでした
  • どこでも動く版では、メモの欄で「j」を打つと、フォーカスが1件目のお知らせへ移り、メモの欄には何も入りませんでした

確かめるのに使ったのは、作業用のMacに入っているGoogle Chrome 156(画面を出さない形)です。音声入力のソフトでは試していません。

自分で直すか、相談するかの判断

目安は、「ショートカットの処理を自分で書き換えられるか」です。自分で書いたスクリプトなら、上の例のように切り替えと入力欄の判定を足すだけで済みます。

ショートカットが、使っている部品やライブラリ、サービスの中に組み込まれている場合は、設定でオフにできるかを先に調べ、できなければ作った会社や担当の人と相談します。書き方に自信がなければ、Webデザインを学べる講座で質問してみるのも一案です。

つまずきやすいところ

まとめ

  • 1文字のキーだけで動くショートカットは、音声入力や押し間違いでうっかり動きやすい仕組みです
  • 止める・CtrlやAltを含む形に変える・フォーカスがあるときだけ動く、のどれかを用意します
  • 入力欄にいるときは、ショートカットを動かさないようにします
  • 設定をオフにしたときと、入力欄で打ったときの動きを、実際に確かめます