WCAG 2.2 達成基準 3.2.1 「フォーカス時」の検品について

今回は、WCAG 2.2の3.2.1「フォーカス時」について、その確認方法をご紹介します。 詳細はSuccess Criterion 3.2.1 On Focusをご参照ください。

達成基準の日本語訳

以下は達成基準の概要です。

いずれのユーザインターフェイス コンポーネントも、フォーカスを受け取ったときにコンテキストの変化を引き起こさない。

この基準は、キーボード操作や支援技術を使用するユーザーが予期せぬ動作に驚かされることなく、スムーズに操作できることを目的としています。 例えば、リンクやボタンにフォーカスが当たった瞬間に自動的にページが遷移するような場合、ユーザーの混乱を招きやすくなります。 この基準を達成すると、ユーザーが予測可能な操作体験を得られ、意図しない操作による混乱を防げます。

検品の方法

Tabキーでのフォーカス移動

キーボードのTabキーを使用して、ページ内のリンク、ボタン、入力フィールドなどにフォーカスを移動させます。 このとき、フォーカスが当たるだけでページ遷移やリロード、モーダルの自動表示などが起きないことを確認します。

キーボード操作の補足

• Tabキー：フォーカスが順方向に移動します
• Shift+Tabキー：フォーカスが逆方向に移動します
• スペースキー/Enterキー：フォーカスが当たっているリンクやボタンをクリック同様の操作で動作させます

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

特にJavaScriptで実装された機能は、慎重に確認が必要です。 フォーカスの移動が原因でページの状態が予期せぬ形で変化しないか、確認を徹底しましょう。

例えば、フォーカスが当たるだけでポップアップが表示される場合、ユーザーにとって予期せぬ動作となり、操作が難しくなる可能性があります。 このような場合、ポップアップの表示をクリックやEnterキーの操作に限定するなどの対策が必要です。

また、フォーカスの移動がスムーズであることも確認しましょう。 例えば、Tabキーを押した際にフォーカスが飛び飛びになると、ユーザーはどこにフォーカスが当たっているのか分かりにくくなります。 フォーカスの順序が適切であることを確認し、ユーザーが直感的に操作できるようしましょう。 これにより、多くのユーザーにとって予測可能で使いやすいWebコンテンツを提供できるようになります。

フォーカスの移動がスムーズかつ予測可能にすることで、より多くのユーザーにとって使いやすいWebサイトを提供しましょう。