WCAG 2.4.13: フォーカスの外観
キーボードフォーカスの表示は、十分な面積とコントラストを持ち、どの要素にフォーカスがあるか明確に分かる必要があります。
意図的な失敗例: フォーカス表示が不十分
フォーカス表示が細く低コントラストです。
確認観点
- リンク、ボタン、フォーム、カスタムUIのフォーカス表示を洗い出す
- フォーカス枠や下線などの表示が十分な太さ・面積・コントラストを持つようにする
- 背景色や隣接色が変わってもフォーカス表示が見失われないようにする
- ブラウザ既定のoutlineを消している箇所には、同等以上のフォーカス表示を用意する
人の判断が必要な例
- 通常表示、ホバー、操作中、無効化に近い状態でもフォーカス位置が明確か確認する
- 高倍率表示、ダークモード、色覚シミュレーションでも識別できるか確認する
- 2.4.7の「見える」だけでなく、AAA要件として外観の十分性を満たしているか確認する
補助ツール候補
- focus-visibility
- fixed-header-overlap
生成メモ
manual-judgment-catalog.ja.json の内容から生成しています。