WCAG 2.4.7: フォーカスの可視化
キーボードのTabキーでリンクやボタン、入力欄にフォーカスを当てた際、現在どこを操作しているかが視覚的にはっきりと分かるフォーカス表示(アウトラインや枠線の強調等)を表示します。
意図的な失敗例: フォーカスが見えない
フォーカス時のアウトラインを消しています。
確認観点
- CSSで outline: none や outline: 0 を安易に指定してフォーカスリングを消去しない
- カスタムのフォーカス表示を設計する場合は、背景色との十分なコントラストと枠線の太さを確保する
- ホバー時のスタイルだけでなく、:focus-visible 時のスタイルを明示的に定義する
人の判断が必要な例
- Tabキーでページ内のすべての操作要素を巡回し、フォーカス表示を常に見失わずに追跡できるか確認する
補助ツール候補
- focus-visibility
生成メモ
manual-judgment-catalog.ja.json の内容から生成しています。