キーボードトラップを見つける
フォーカスが抜け出せずに止まる場所を見つけます。
「キーボードトラップを見つける」はCoddyKit上の無料Web Accessibility Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはWeb Accessibility Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Web Accessibility Academyコースには全4レッスンが含まれています。
行き止まりで抜け出せない
キーボードトラップとは、フォーカスが入った後、キーボードで抜け出せなくなる場所です。マウスを使わないユーザーにとっては行き止まりです。🪤
深刻な理由
閉じ込められたユーザーは、抜け出すためだけにページ全体を再読み込みしなければならないことがあります。WCAGでは、出口のないトラップを軽微なバグではなく不適合とみなします。
典型的な原因
トラップは、高機能なウィジェットで起こりがちです。カスタムの日付ピッカー、埋め込みエディター、フォーカスを奪って返さないサードパーティ製プラグインなどが該当します。
壊れたモーダル
Tabを受け止めるのに脱出方法を用意していないダイアログは、最も一般的なトラップです。本物のモーダルはEscapeで閉じられなければなりません。
iframeはフォーカスを飲み込むことがある
動画や地図などの埋め込みコンテンツはiframe内に配置されます。フォーカスを奪い、出口のないままユーザーを内部で循環させるものもあります。
不適切なイベントハンドラー
Tabキーに対してpreventDefaultを呼び出すスクリプトは、ブラウザー本来の移動を妨げることがあります。突然、フォーカスがまったく先へ進まなくなります。
el.addEventListener('keydown', e => e.preventDefault());一方向のトラップ
Tabでは前に進めるのにShift+Tabを妨げるトラップもあります。片方向にしか進めなくてもトラップなので、両方向をテストしてください。
意図的なトラップは問題ない
開いているモーダル内にフォーカスを保持するのは、意図した正しい動作です。ただし、Escapeや閉じるボタンなど、常に明確な出口を用意しなければなりません。
見つける方法
テスト方法は単純で効果的です。キーボードだけを使ってページ全体をTabで移動し、脱出するためにマウスを使わないでください。
見分ける手がかり
1つのコンポーネント内でフォーカスが循環し続け、Tabで先へ進めないなら、トラップを見つけたことになります。どこで閉じ込められたかを正確に記録してください。
脱出経路を修正する
解決策は脱出方法を取り戻すことです。Tabで先へ進めるようにし、Escapeを機能させ、閉じたときにはそのレイヤーを開いたトリガーへフォーカスを戻してください。
クイックチェック
キーボードトラップを本当に定義する条件を選んでください。
振り返り：トラップを見つける
トラップはキーボードでの脱出方法なしにフォーカスを閉じ込め、WCAG違反になります。両方向にすべてをTabで確認し、必ず脱出経路を用意してください。✅
よくある質問
「キーボードトラップを見つける」レッスンは無料ですか？
はい。「キーボードトラップを見つける」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Web Accessibility Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Web Accessibility Academyコースには全4レッスンが含まれています。
「キーボードトラップを見つける」で何を学びますか？
フォーカスが抜け出せずに止まる場所を見つけます。 ブラウザで直接実行するハンズオンコードでWeb Accessibility Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Web Accessibility Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのWeb Accessibility Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「キーボードトラップを見つける」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このWeb Accessibility Academyレッスンでコードを書いて実行できますか？
はい。すべてのWeb Accessibility Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。