意図
この達成基準の意図は、キーボード フォーカスを持っている要素を利用者が認識しやすくすることである。
この達成基準の意図は、複数の要素のうち、どの要素がキーボード フォーカスを持っているか利用者が認識しやすくすることである。スクリーン上にキーボード操作可能な要素が一つだけある場合には、視覚的にはキーボード操作可能な要素を一つだけ提示するため、達成基準が満たされることになる。
キーボードのフォーカスインジケータは異なる形態をとることができる点に注意する。
メリット
- この達成基準は、キーボード操作でインタラクションするコンポーネントをいずれかの時点で視覚的に判断できるようにすることで、ページの操作をキーボードに頼っているすべての人に役立つ。
- 注意力欠如、短期記憶の制約、又は遂行機能における制限のある利用者が、フォーカスがどこにあるのかを見つけることができるようになる。
事例
- テキストフィールドがフォーカスを受け取ると、縦の棒がテキストフィールド内に表示されて、利用者がテキストを挿入入力できることを示す、又は、すべてのテキストがハイライト表示され、利用者がそのテキストを上書きできることを示す。
- ユーザインタフェースのコントロールがフォーカスを受け取ると、その周りに視覚的に認識できる枠線が表示される。
関連リソース
リソースは、情報提供のみを目的としており、推奨を意味するものではない。
達成方法
この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。
十分な達成方法
- G149: フォーカスを受け取るときに、ユーザエージェントによって強調されるユーザインタフェース コンポーネントを使用する
- C15: ユーザインタフェースコンポーネントがフォーカスを受けとったときの提示を変更するために、CSS を使用する
- G165: 視認性の高いデフォルトのフォーカスインジケータが引き継がれるように、プラットフォームデフォルトのフォーカスインジケータを使用する
- G195: コンテンツ制作者が提供する視認性に優れたフォーカスインジケータを使用する
- C40: すべてのコンポーネントで十分なコントラスト比を確保するために 2 色のフォーカスインジケータを作成する
- SCR31: フォーカスのある要素の背景色又はボーダーを変更するために、スクリプトを使用する
失敗例
以下に挙げるものは、WCAG ワーキンググループが達成基準の失敗例とみなした、よくある間違いである。