アクセシビリティ資料 検査項目事例集 WCAG 2.4.7

WCAG 2.4.7: フォーカスの可視化

キーボードのTabキーでリンクやボタン、入力欄にフォーカスを当てた際、現在どこを操作しているかが視覚的にはっきりと分かるフォーカス表示(アウトラインや枠線の強調等)を表示します。

Level AA 確認方法: 手動確認

意図的な失敗例: フォーカスが見えない

フォーカス時のアウトラインを消しています。

確認観点

  • CSSで outline: none や outline: 0 を安易に指定してフォーカスリングを消去しない
  • カスタムのフォーカス表示を設計する場合は、背景色との十分なコントラストと枠線の太さを確保する
  • ホバー時のスタイルだけでなく、:focus-visible 時のスタイルを明示的に定義する

人の判断が必要な例

  • Tabキーでページ内のすべての操作要素を巡回し、フォーカス表示を常に見失わずに追跡できるか確認する

補助ツール候補

  • focus-visibility

生成メモ

manual-judgment-catalog.ja.json の内容から生成しています。