解説書達成基準 2.4.7:フォーカスの可視化 (レベル AA)

要約

目標: 利用者が、どの要素にキーボードフォーカスがあるかわかる。
何をすればよいか: フォーカスを受ける各項目に対して、可視のインジケータがあることを保証する。
なぜそれが重要か: フォーカスインジケータがないと、目が見えるキーボード利用者はページを操作できない。

意図

この達成基準の意図は、キーボードフォーカスを持っている要素を利用者が認識しやすくすることである。

「操作モード」は、常にフォーカスインジケータを表示するとは限らないユーザエージェント、又はキーボードの使用時にのみフォーカスインジケータを表示するユーザエージェントを考慮したものである。ユーザエージェントは、キーボードが使用されているときだけフォーカスインジケータを表示するなど、フォーカスインジケータが表示されるタイミングを最適化するかもしれない。コンテンツ制作者は、フォーカスが可視化される少なくとも一つの操作モードを提供する責任がある。ほとんどの場合、操作モードは一つしかなく、そこにこの達成基準が適用される。フォーカスインジケータには時間制限を設けてはならず、キーボードのフォーカスが表示されているときは、その表示を維持しなければならない。

キーボードのフォーカスインジケータは異なる形態をとることができる点に注意する。 WCAG 2.2 における追記: 「フォーカスの可視化」はフォーカスの形態がどのようなものであるかを明示していないが、2.4.13 フォーカスの外観 (レベル AAA) において、一貫性のある可視のインジケータを作成するためのガイダンスが提供されている。

利点

この達成基準は、キーボード操作でインタラクションするコンポーネントを常に視覚的に判断できるようにすることで、ページの操作をキーボードに頼っているすべての人に役立つ。
注意力欠如、短期記憶の制約、又は遂行機能における制限のある利用者が、フォーカスがどこにあるのかを見つけることができるようになる。

事例

テキストフィールドがフォーカスを受け取ると、縦の棒がテキストフィールド内に表示されて、利用者がテキストを挿入入力できることを示す、又は、すべてのテキストがハイライト表示され、利用者がそのテキストを上書きできることを示す。
ユーザインタフェースのコントロールがフォーカスを受け取ると、その周りに視覚的に認識できる枠線が表示される。

テクニック

この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断するテクニック、又は複数のテクニックの組み合わせを表している。しかしながら、必ずしもこれらのテクニックを用いる必要はない。その他のテクニックについての詳細は、WCAG 達成基準のテクニックを理解するの「その他のテクニック」を参照のこと。

十分なテクニック

失敗例

以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。

テストルール

以下は、この達成基準の特定の側面に関するテストルールである。この特定のルールを使用して WCAG に適合しているかどうかを確認する必要はないが、これらのルールは定義され、承認されたテスト方法である。テストルールの使用については、WCAG 達成基準のテストルールを理解するを参照のこと。

Element in sequential focus order has visible focus