フォーカスの可視化:
達成基準 2.4.7 を理解する
2.4.7 フォーカスの可視化: キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスインジケータが見える操作モードがある。 (レベル AA)
この達成基準の意図
この達成基準の意図は、キーボード フォーカスを持っている要素を利用者が認識しやすくすることである。
この達成基準の意図は、複数の要素のうち、どの要素がキーボード フォーカスを持っているか利用者が認識しやすくすることである。スクリーン上にキーボード操作可能な要素が1つだけある場合には、視覚的にはキーボード操作可能な要素を1つだけ提示するため、達成基準が満たされることになる。
注記: キーボードのフォーカスインジケータは異なる形態をとることができる点に注意すべきである。一般的な方法の1つとして、テキストフィールドがキーボード フォーカスを持っていることを示すための、テキストフィールド内のキャレット表示がある。別の方法としては、ボタンがキーボード フォーカスを持っていることを示すために、ボタンを視覚的に変化させるといった方法がある。
達成基準 2.4.7の具体的なメリット:
キーボードだけでそのページを操作している利用者が、キーボードで操作しているコンポーネントを視覚的に常時確認できるようになる。
注意力欠如、短期記憶の制約、又は遂行機能における制限のある利用者が、フォーカスがどこにあるのかを見つけることができるようになる。
達成基準 2.4.7の事例
テキストフィールドがフォーカスを受け取ると、縦の棒がテキストフィールド内に表示されて、利用者がテキストを挿入入力できることを示す。もしくは、すべてのテキストがハイライト表示され、利用者がそのテキストを上書きできることを示す。
ユーザインタフェースのコントロールがフォーカスを受け取ると、その周りに視覚的に認識できる枠線が表示される。
達成基準 2.4.7 の達成方法及び不適合事例 - フォーカスの可視化
この節にある番号付の項目は、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に適合していないとみなした、よくある不適合事例である。