達成基準 2.4.7: フォーカスの可視化を理解する

達成基準 2.4.7 フォーカスの可視化 (レベル AA): キーボード操作が可能なあらゆるユーザインタフェースには、フォーカスインジケータが見える操作モードがある。

意図

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

この達成基準の意図は、複数の要素のうち、どの要素がキーボード フォーカスを持っているか利用者が認識しやすくすることである。スクリーン上にキーボード操作可能な要素が一つだけある場合には、視覚的にはキーボード操作可能な要素を一つだけ提示するため、達成基準が満たされることになる。

注記: キーボードのフォーカスインジケータは異なる形態をとることができる点に注意すべきである。一般的な方法の一つとして、テキストフィールドがキーボード フォーカスを持っていることを示すための、テキストフィールド内のキャレット表示がある。別の方法としては、ボタンがキーボード フォーカスを持っていることを示すために、ボタンを視覚的に変化させるといった方法がある。

メリット

事例

関連リソース

リソースは、情報提供のみを目的としており、推奨を意味するものではない。

達成方法

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

十分な達成方法

  1. G149: フォーカスを受け取るときに、ユーザエージェントによって強調されるユーザインタフェース コンポーネントを使用する
  2. C15: ユーザインタフェースコンポーネントがフォーカスを受けとったときの提示を変更するために、CSS を使用する
  3. G165: 視認性の高いデフォルトのフォーカスインジケータが引き継がれるように、プラットフォームデフォルトのフォーカスインジケータを使用する
  4. G195: コンテンツ制作者が提供する視認性に優れたフォーカスインジケータを使用する
  5. @@@ Using a change of contrast ratio to provide a visible focus indicator
  6. SCR31: フォーカスのある要素の背景色又はボーダーを変更するために、スクリプトを使用する
  7. FLASH20: 非常に目立つフォーカス表示を提供するために Flash コンポーネントのスキンを切り替える
  8. SL2: Changing The Visual Focus Indicator in Silverlight
  9. SL7: Designing a Focused Visual State for Custom Silverlight Controls

参考達成方法

適合のために必須ではないが、コンテンツをよりアクセシブルにするために、次の追加の達成方法を検討することが望ましい。ただし、すべての状況において、すべての達成方法が使用可能、又は効果的であるとは限らない。

失敗例

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