WCAG 2.2 達成基準 2.1.2 「キーボードトラップなし」の検品について

今回は、WCAG 2.2の「2.1.2 キーボードトラップなし」について、その確認方法をご紹介します。
詳細はSuccess Criterion 2.1.2 No Keyboard Trapをご参照ください。

達成基準の概要

以下は達成基準の日本語訳を引用したものです。

キーボードインタフェースを用いてキーボードフォーカスをそのウェブページのあるコンポーネントに移動できる場合、キーボードインタフェースだけを用いてそのコンポーネントからフォーカスを外すことが可能である。さらに、修飾キーを伴わない矢印キー、Tab キー、又はフォーカスを外すその他の標準的な方法でフォーカスを外せない場合は、フォーカスを外す方法が利用者に通知される。

この基準は、キーボードを使用するユーザーがフォーカスを移動した際に、特定の要素からフォーカスを動かせなくなることなく適切に操作できることを求めています。
例えば、キーボードでボタンや入力欄に移動した際に、その要素から離れることができない「トラップ」が発生しないようにすることが重要です。
ユーザーがキーボードのみでWebサイトを操作する場合でも、スムーズに移動できることを保証する必要があります。

検品の方法

キーボードのみでの操作確認

キーボードだけを使用してページ内を移動し、特定の要素にフォーカスが入ると抜け出せない状況（キーボードトラップ）が発生していないことを確認します。

特別な操作が必要な場合の通知確認

もしフォーカスが入ると抜け出せない状況が発生し、そのトラップを解除するために特別なキー操作が必要な場合はその方法が明示されていることを確認します。
例えば、キーボード操作で特定の要素にフォーカスした場合「Escキーで閉じる」などのガイドが、要素の中だけでなくその前にも表示されていることが望ましいです。

確認時に気を付けるポイント

JavaScriptなどを使用してカスタムコンポーネントを実装する際、キーボードナビゲーションが適切に動作するかを確認しましょう。
モーダルウィンドウやドロップダウンメニューなどのコンポーネントで、キーボードトラップが発生しやすいため、特に注意が必要です。
キーボードのみの操作でもスムーズにコンテンツ内を移動できることを保証し、より多くのユーザーにとって使いやすいWebサイトを提供しましょう。