フォーカスが抜け出せないエディターや埋め込み部品
インデントのためにTabキーを奪ったエディターから、TabでもShift + Tabでも出られません。
問題
Tabキーでエディターに入ったキーボード利用者が出られず、ページのほかの部分を操作できません。
フォームに「メモ」のエディターがあり、その後に「メモを保存」ボタンがあります。Tabキーでエディターに入って入力し、保存ボタンへ進もうとTabキーを押すと、行がインデントされるだけです。Shift + Tabキーで戻ろうとしても、またインデントされます。キーボードではエディターから出られず、保存ボタンにもページのほかの部分にも届きません。
インデントのために、スクリプトがエディターのkeydownを監視し、すべてのTabを preventDefault() で止めて空白を挿入しています。Shiftの有無も確認せず、抜けるための別のキーもありません。達成基準2.1.2では、フォーカスを部品内にとどめてよいのは、抜け方を利用者に伝えている場合だけです。この例には抜け方も説明もありません。
ポインターではなくキーボードを使う人すべてに影響します。運動障害のある人、スクリーンリーダーの利用者、Tabを送るスイッチや音声入力の利用者などです。マウスを使う人は別の場所をクリックできるため、問題に気づきません。キーボード利用者はページを再読み込みするしかなく、入力した内容も失います。
HTMLはラベル付きの textarea なので、静的なスキャンでは問題が見つかりません。罠はキーを押したときだけ動くスクリプトにあり、部品の中からTabを押さないと分かりません。AIのコーディングツールは、コードエディターの習慣からTabでのインデントを追加しがちですが、抜け方までは用意しません。Cookie同意バナー、チャット、埋め込み地図など、チームの誰もコードを読まない外部ウィジェットにも罠は潜んでいます。
試してみる
メモを入力してから、Tabで外へ出てください。
Tabで「メモを保存」に届きますか？Shift + Tabで戻れますか？
再現デモです。「問題あり」は意図的にアクセシブルでない状態にしています。
修正方法
Tabでエディターから出られるようにするか、ページで説明した解除キーを用意します。
- 1TabとShift + Tabで、直接または解除キーの後に部品から出られる。
- 2解除キーは画面上のテキストで説明し、
aria-describedbyで関連付ける。 - 3利用者が出たばかりの部品へ、フォーカスを戻さない。
html
<label for="notes">メモ</label><textarea id="notes" name="notes"></textarea><button type="submit">メモを保存</button>js
const editor = document.getElementById('notes');editor.addEventListener('keydown', (event) => { if (event.key !== 'Tab') return; event.preventDefault(); editor.setRangeText(' ', editor.selectionStart, editor.selectionEnd, 'end');});Shiftの有無にかかわらず、すべてのTabが止められ、2つの空白に置き換わります。キーボードではエディターから出られず、ほかのキーについての説明もありません。
ハンドラーを削除します。textarea はそのまま入力でき、TabとShift + Tabでブラウザーがフォーカスを外へ移します。最も小さな変更で、特別なキーを覚える必要もありません。インデントが必要なら、インデント用のボタンを置くか、Enterキーで自動的にインデントします。
どちらも基準を満たします。Tabでフォーカスを移す方法は、実装の手間がなく、利用者に何も求めません。メモ、コメント、メッセージなど、インデントが作業の中心でない入力欄ではこちらを使います。Tabでのインデントは、実際にコードや構造化されたテキストを書くエディターに限り、その場合は必ず解除キーと説明を組み合わせてください。
Escapeには、エディターを含むダイアログを閉じるなど、別の役割があることが多いです。その場合は、どちらを優先するか決めるか、別の解除キーを選んで画面に書きます。Ctrl + MでTabの役割を切り替えるエディターもあります。入力が正しくなるまで出さないなど、blur や focusout で focus() を呼び直してフォーカスを戻す実装も罠になります。フォーカスを内側にとどめるのが正しいのはモーダルダイアログだけで、これは modal-focus-management のガイドで扱っています。shadow DOMや iframe 内のものを含む外部ウィジェットは、実際のページで確認し、罠があれば提供元に報告します。直せない場合は、利用者が同意してから読み込むか、別のものに置き換えます。
修正の確認
マウスを使わない5つの確認
確認方法： キーボード、スクリーンリーダー
OS、ブラウザーと支援技術のバージョン、ビルド、実施日、各手順の実際の結果を記録してください。エディターや外部スクリプトを変更した際は、再度確認します。
制限
このサンプルは、どのアプリケーションでも同じ結果になることを保証するものではありません。インデントは2つの空白で、元に戻す操作やインデント解除は省略しています。リッチテキストやコードエディターのライブラリには独自のTab設定があるため、使っているものの動作を確認し、キーボードと実際に使用する支援技術で操作全体を確認してください。
よくある問題を再現した学習用のサンプルです。実在のクライアントの診断結果ではありません。コードは出発点となる実装例のため、実際の製品でも確認してください。ここでは支援技術でのテスト結果は報告していません。
コードを更新しても、使いやすさを保つために
ガイドの内容を、コーディングエージェントやCIで使える開発ルールにまとめます。更新後は、キーボードとスクリーンリーダーで再テストし、問題が再発していないか確認します。