トピックを検索
オフにできない1文字のショートカット
ショップの/とSのキーが、ページのどこからでも検索欄にフォーカスを移すため、音声で入力した文が検索語になってしまいます。
event.key === 's' 問題
音声入力の利用者や、キーを押し間違えた人が検索欄に移動させられ、続けて話した言葉も検索欄に入ってしまいます。
ショップの商品ページのヘッダーに検索欄があり、欄の中に/とSのキーが描かれています。入力欄の外であれば、ページのどこで/かSを押しても、検索欄にフォーカスが移ります。英語の音声入力を使う人が、商品をかごに入れ、ギフトメッセージを「thank you so much」と話します。直前のコマンドでフォーカスが「ギフトメッセージ」欄ではなくページにあったため、音声入力のソフトは言葉をページに1文字ずつ入力します。最初の文字では何も起きませんが、「so」のSで検索欄にフォーカスが移り、「o much」が検索欄に入って「結果なし」と表示されます。ギフトメッセージは空のままです。入力欄をクリックする前に打ち始めたキーボード利用者や、/を押し間違えた人も、同じように検索欄に移されます。日本語入力をオフにしたまま「desu」と打てば、Sで検索欄に移ります。
達成基準2.1.4は、文字キーだけで構成されるショートカットを対象にします。大文字と小文字のアルファベット、数字、句読点、記号が含まれ、?のように入力にShiftが必要なものも同じです。このようなショートカットは、オフにできる、CtrlやAltのような文字を入力しないキーを含む組み合わせに変更できる、またはそのコンポーネントにフォーカスがあるときだけ動く、のいずれかを満たす必要があります。この2つのキーはdocument全体で受け取られ、3つのどれも満たしていません。3つ目の方法はここでは使えません。どこからでも検索欄に移るためのキーが、検索欄にフォーカスがあるときだけ動くのでは意味がないためです。入力欄の中のキー入力を無視しても、入力欄の外では/とSが反応し続けます。
言葉は画面から消えず、検索欄に残っているため、問題に気づきにくくなります。一方、入力するつもりだった欄は空のままです。
10グループ中2グループに影響
- 全盲 （影響なし）
- 弱視 （影響なし）
- 色覚 （影響なし）
- ろう （影響なし）
- 難聴 （影響なし）
- 発話 （影響なし）
- 手の操作 （影響あり）
- 届く範囲・力 （影響なし）
- 認知 （影響あり）
- 光過敏 （影響なし）
- 手の操作が限られる 音声入力は聞き取った言葉をフォーカスのある場所に入力するため、何もフォーカスしていないときのSで検索欄に移り、文の残りが検索語になります。/やSを押し間違えたキーボード利用者も、同じようにページ上の位置を失います。
- 言語・認知・学習の能力が限られる 選んでいない欄に言葉が入り、入力するつもりの欄は空のまま、理由も示されないため、何が起きたのか、どう戻ればよいのか分かりにくくなります。
マークアップはラベルの付いた検索欄なので、HTMLを調べるだけでは問題が見つかりません。ショートカットはkeydownハンドラーの中にあり、実際にキーを押さないと分かりません。押して見つけても、サイトのどこかにオフにする設定があるかどうかは、ツールには判断できません。検索ウィジェットやAIのコーディングツールは、大きなサイトにあるため/を検索のキーとして気軽に追加し、入力欄の確認だけを加えて終わることがよくあります。
試してみる
「ギフトメッセージ」欄をクリックする前に、ウィンドウの上の音声入力でメッセージを話してください。
音声入力は、フォーカスのある場所に1文字ずつ入力します。言葉がどこに入るか確認してから、「ギフトメッセージ」欄をクリックして、もう一度話してください。ページをクリックして、/やSを自分で押すこともできます。
問題あり 修正できますか？
Northfield Home
リネンのナプキン 4枚セット
$24
検索欄：空
ギフトメッセージ：空
修正方法
キーにCtrlや⌘を加えるか、1文字のキーをオフにできるようにします。
- 1利用者がオフにできない限り、文字、数字、記号のキー単独でページ全体を操作しない。
- 2ショートカットを検索欄のそばに表示し、使える間は
aria-keyshortcutsでも示す。 - 3どの方法でも、入力欄の中のキー入力は無視する。
<form role="search" action="/search"> <label for="search">検索</label> <input id="search" name="q" type="search"> <kbd>/</kbd> <kbd>S</kbd></form>Ctrl + K、Macでは⌘K
<form role="search" action="/search"> <label for="search">検索</label> <input id="search" name="q" type="search" aria-keyshortcuts="Control+K Meta+K"> <kbd>Ctrl K</kbd></form>入力欄の外で押した/とSは、すべて検索欄にフォーカスを移し、オフにする方法はありません。Sをやめて/だけ残しても修正になりません。/も文字キーで、「スラッシュ」と話せば音声入力が入力します。
Ctrlや⌘が必要なショートカットは文字キーのショートカットではなくなるため、2.1.4の対象から外れます。音声入力のソフトが文を入力するときにCtrlを押すことはありません。キーはページのどこからでも、ほかの入力欄の中からでも使えます。Ctrl + Kは多くのサイトやアプリが既に検索に使っている組み合わせなので、知っている人もいます。aria-keyshortcuts によって、移動先の検索欄でスクリーンリーダーの利用者にも伝わります。Macでは、キーの表示を⌘Kにしてください。
どちらも2.1.4を満たします。Ctrl + Kを使ってください。設定は利用者が見つけて初めて効果があるのに対し、Ctrl + Kは探すものなしで同じ役割を果たします。代わりに2つのキーの同時押しが必要ですが、1本の指やマウススティックで入力する人も、固定キー機能を使えば操作できます。ブラウザー自身もCtrl + Kを使う点は、次の節で説明します。1文字のキーは、利用者が本当に使っている場合だけ設定の後ろに残し、最初はオフにしてください。ショートカット自体を削除しても基準を満たします。検索欄はTabを1、2回押せば届き、/があることを知っている買い物客は多くありません。
どの方法でも、入力欄の中のキー入力は無視してください。レビューやギフトメッセージでSを入力できるようにするためです。ただし、それだけでは修正になりません。修正前のコードにも既にあります。
aria-keyshortcuts は支援技術にショートカットを伝えるだけで、動作は何も作りません。ショートカットでフォーカスが移る欄に付け、その時点で使えるキーだけを示し、オフにしたり変更したりしたら外します。同じキーを検索欄の中のキー表示として画面にも示し、目で見る人にも同じように伝えます。
ChromeとFirefoxは、アドレスバーや検索バーから検索するためにCtrl + Kを使っています。ページにフォーカスがある間は、ページのハンドラーがこのキーを受け取ります。アドレスバーにはCtrl + Lで移動できます。このキーを使いたくなければ、Ctrlや⌘とのほかの組み合わせでも同じように基準を満たします。ただし、対応するすべてのブラウザー、OS、スクリーンリーダーで試してください。ctrlKey と metaKey の両方を確認すれば、同じハンドラーがWindows、Linux、Macで動きます。
スクリーンリーダーは、ブラウズモードでは、次の見出しに移るHのように1文字のキーを自分で使うため、そのキー入力はページに届きません。キーをページに渡すフォーカスモードでは、ページのショートカットが実行されます。キーをページに届けるために role="application" を加えないでください。スクリーンリーダー自身のキーが使えなくなります。
ページのショートカットを洗い出すとき、次のキーは見落としがちです。
- 入力にShiftが必要なキー：ショートカットのヘルプを開く?など。これも文字キーです。
- 順番に押すキー：Gを押してからCでかごに移動するなど。どのキーも文字キーなので、全体が対象になります。
- 外部のスクリプトが加えるキー：検索ウィジェットの/や、埋め込みプレーヤーを一時停止するKなど。それぞれ、そのウィジェットにフォーカスがあるときだけ動くか、オフにできるかを確認し、ページ全体で動くものはオフにします。
AI コーディングアシスタントで修正しますか？ このガイドを Markdown で取得
修正の確認
マウスを使わない4つの確認
確認方法： キーボード、音声入力、スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。ショートカットや外部のスクリプトを追加した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。検索の処理自体と、設定を顧客のアカウントに保存する処理は省略しています。キーボード、音声入力、実際に使用する支援技術で、操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。