2.4.13 フォーカスの外観

達成基準 2.4.13 フォーカスの外観【AA】

キーボード操作でフォーカス可能なコンポーネントにフォーカスが当たったときに、ユーザーが視覚的にその状態を容易に判別できるようにするための要件です。

要件

項目	内容
レベル	AA
対象	キーボード操作でフォーカス可能な全てのUIコンポーネント
必須条件	フォーカスインジケーターが 視認可能かつ識別しやすい こと
主な判断指標	太さ、コントラスト、サイズ（ピクセル面積）などの視覚的な明確さ

要件の詳細（次の2つの要素を満たす必要があります）

可視性の基準

• フォーカスインジケーターは、少なくとも 1 CSS ピクセルの線幅を持つこと
• フォーカスインジケーターと背景とのコントラスト比が 3:1 以上であること

面積の基準

• フォーカスインジケーターは、ユーザーが操作可能な領域の少なくとも50％以上を囲むか、カバーしていること
  （例えば、リンクボタンの周囲に輪郭が表示されるなど）

不適合な例

• フォーカスリングが非常に細い、または背景と色が同化して見えにくい
• 単に色を変えるだけで、フォーカスがどこにあるか判別できない
• マウスホバーとフォーカスの状態が区別できない

適合している例

• フォーカス時に太くて濃い外枠が表示される（例：outline: 2px solid #000;）
• 背景色と十分なコントラストを持った明瞭なハイライト
• リンクやボタンがフォーカスされた際に要素の大半が強調表示される

実装例（CSS）

button:focus {
  outline: 3px solid #005fcc; /* 3pxの太さ＋コントラスト色 */
  outline-offset: 2px;
}

補足：既存の2.4.7との違い

比較項目	2.4.7 フォーカスの可視化（AA）	2.4.13 フォーカスの外観（AA）
要求内容	フォーカスが見えること	フォーカスが視覚的に明確であること
レベル	AA	AA（WCAG 2.2で新設）
コントラストや太さ	明確な基準なし	明確な数値基準あり（太さ1px以上、コントラスト3:1以上など）
面積の要件	なし	フォーカス対象の50％以上をカバー

利点

観点	内容
アクセシビリティ向上	フォーカスが明確になることで、視覚的にわかりやすくなる
操作性向上	高齢者・視覚障害者・ロービジョンユーザーにとって重要
ユーザビリティ強化	どの要素を操作しているか即座に判断できる

チェックリスト

• フォーカスインジケーターが必ず表示されているか？
• 太さが 1px 以上 か？
• 背景とのコントラスト比が 3:1 以上 か？
• 対象コンポーネントの 50％以上 を強調しているか？
• ホバーとフォーカスが明確に区別可能か？

まとめ

項目	内容
達成基準	2.4.13 フォーカスの外観
レベル	AA（WCAG 2.2）
要求内容	フォーカスが明確に可視かつ識別可能であること
実装方法	太さ・コントラスト・カバレッジに配慮したスタイル適用
対象ユーザー	キーボードナビゲーション、視覚補助が必要なユーザーなど

一覧に戻る