Level AWCAG 2.2
2.1.2 キーボードトラップなし
キーボードフォーカスがコンポーネントに閉じ込められない。
なぜ重要か
操作不能
フォーカスが閉じ込められると、ページの残りの部分にアクセスできなくなります。
キーボードユーザー
マウスが使えないユーザーはトラップから脱出する手段がありません。
フラストレーション
ページのリロードを余儀なくされ、入力データが失われることも。
モーダル・ウィジェット
リッチUIコンポーネントで意図せずトラップが発生しやすい。Escで閉じられるように。
ライブデモ
キーボードトラップ体験
Tab キーでフォーム内を移動してみてください。
テキストエリアからTab で脱出できない
モーダルやカスタムウィジェットで
keydown を横取りすると、ユーザーがそのコンポーネントから脱出できなくなります。必ず Esc やTab で離脱できるようにしましょう。ペルソナで理解する
中村さん(45歳)— RSI(反復性ストレス障害)
マウスの長時間使用が困難で、キーボード中心に操作します。リッチテキストエディタにフォーカスが入ったまま出られず、ブラウザを強制終了。書きかけの長文メールが消えました。