操作可能／2.4 ナビゲート可能
2.4.7フォーカスの可視化
レベル AAFocus Visible
キーボードで操作している今どこにフォーカスがあるかが、見て分かるようにする。フォーカスリングを消したままにしない。少なくとも1つの操作モードで見えていればよく、すべてのモードで常時表示されている必要はない。
仕様が更新されました
- 機能追加#5067（新しいタブで開きます）2.4.7: フォーカスインジケーターが 1.4.11 の対象になることを明記
補足
この達成基準の詳細解説は準備中です。現在は関連パターン・達成方法・原典への参照を掲載しています。
関連する達成方法
この達成基準を満たすための具体的な実装方法です。本サイトでは本文を収録していないため、各リンク先の W3C 原文を参照してください。
十分な達成方法(7)
- C15: Using CSS to change the presentation of a user interface component when it receives focus（新しいタブで開きます）waic.jp（新しいタブで開きます）
- C40: Creating a two-color focus indicator to ensure sufficient contrast with all components（新しいタブで開きます）waic.jp（新しいタブで開きます）
- C45: Using CSS :focus-visible to provide keyboard focus indication（新しいタブで開きます）waic.jp（新しいタブで開きます）
- G149: Using user interface components that are highlighted by the user agent when they receive focus（新しいタブで開きます）waic.jp（新しいタブで開きます）
- G165: Using the default focus indicator for the platform so that high visibility default focus indicators will carry over（新しいタブで開きます）waic.jp（新しいタブで開きます）
- G195: Using an author-supplied, visible focus indicator（新しいタブで開きます）waic.jp（新しいタブで開きます）
- SCR31: Using script to change the background color or border of the element with focus（新しいタブで開きます）waic.jp（新しいタブで開きます）
失敗例(2)
- F55: Failure of Success Criteria 2.1.1, 2.4.7, 2.4.13, and 3.2.1 due to using script to remove focus when focus is received（新しいタブで開きます）waic.jp（新しいタブで開きます）
- F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and borders in a way that removes or renders non-visible the visual focus indicator（新しいタブで開きます）waic.jp（新しいタブで開きます）
原典・規範文書
- 達成基準 2.4.7 フォーカスの可視化 — WCAG 2.2 日本語訳（waic.jp）（新しいタブで開きます）規範訳。正式な要件の本文はこちら。
- Understanding Focus Visible — W3C（英語）（新しいタブで開きます）意図・具体例・達成方法の詳しい公式解説。