フォーカスの可視化:
達成基準 2.4.7 を理解する
2.4.7 フォーカスの可視化: キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスインジケータが見える操作モードがある。 (レベル AA)
この達成基準の意図
この達成基準の意図は、キーボード フォーカスを持っている要素を利用者が認識しやすくすることである。
この達成基準の意図は、複数の要素のうち、どの要素がキーボード フォーカスを持っているか利用者が認識しやすくすることである。スクリーン上にキーボード操作可能な要素が一つだけある場合には、視覚的にはキーボード操作可能な要素を一つだけ提示するため、達成基準が満たされることになる。
注記: キーボードのフォーカスインジケータは異なる形態をとることができる点に注意すべきである。一般的な方法の一つとして、テキストフィールドがキーボード フォーカスを持っていることを示すための、テキストフィールド内のキャレット表示がある。別の方法としては、ボタンがキーボード フォーカスを持っていることを示すために、ボタンを視覚的に変化させるといった方法がある。
達成基準 2.4.7 の具体的なメリット:
この達成基準は、キーボード操作でインタラクションするコンポーネントをいずれかの時点で視覚的に判断できるようにすることで、ページの操作をキーボードに頼っているすべての人に役立つ。
注意力欠如、短期記憶の制約、又は遂行機能における制限のある利用者が、フォーカスがどこにあるのかを見つけることができるようになる。
達成基準 2.4.7 の事例
テキストフィールドがフォーカスを受け取ると、縦の棒がテキストフィールド内に表示されて、利用者がテキストを挿入入力できることを示す、又は、すべてのテキストがハイライト表示され、利用者がそのテキストを上書きできることを示す。
ユーザインタフェースのコントロールがフォーカスを受け取ると、その周りに視覚的に認識できる枠線が表示される。
達成基準 2.4.7 の達成方法及び失敗例 - フォーカスの可視化
この節にある番号付きの各項目は、WCAG ワーキンググループがこの達成基準を満たすのに十分であると判断する達成方法、又は複数の達成方法の組み合わせを表している。しかしながら、必ずしもこれらの達成方法を用いる必要はない。その他の達成方法についての詳細は、WCAG 達成基準の達成方法を理解するの「その他の達成方法」を参照のこと。
十分な達成方法
G149: フォーカスを受け取るときに、ユーザエージェントによって強調されるユーザインタフェース コンポーネントを使用する
C15: ユーザインタフェースコンポーネントがフォーカスを受けとったときの提示を変更するために、CSS を使用する (CSS)
G165: 視認性の高いデフォルトのフォーカスインジケータが引き継がれるように、プラットフォームデフォルトのフォーカスインジケータを使用する
SCR31: フォーカスのある要素の背景色又はボーダーを変更するために、スクリプトを使用する (Scripting)
FLASH20: 非常に目立つフォーカス表示を提供するために Flash コンポーネントのスキンを切り替える (Flash)
SL2: Changing The Visual Focus Indicator in Silverlight (Silverlight)
SL7: Designing a Focused Visual State for Custom Silverlight Controls (Silverlight)
2.4.7 でさらに対応が望まれる達成方法 (参考)
適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。
リンクもしくはコントロールのそばにマウスが来たとき強調する（リンク追加予定）
キーボードフォーカスを受け取ったときリンクもしくはコントロールが強調され非常に目立つメカニズムを提供する（リンク追加予定）
達成基準 2.4.7 のよくある失敗例
以下に挙げるものは、WCAG ワーキンググループが達成基準 2.4.7 の失敗例とみなした、よくある間違いである。