操作可能/2.4 ナビゲート可能
2.4.13フォーカスの外観
レベル AAA2.2 新規Focus Appearance
フォーカスインジケーターを、十分な大きさ(太さ2CSSピクセル相当以上の外周)とコントラスト(フォーカス時と非フォーカス時で3:1以上)で表示する。細い枠線の色がわずかに変わる程度では、低視力者には気づきにくいため。ブラウザ標準の表示を制作者が変更していない場合は例外。
WCAG 2.2 で新しく追加された達成基準です
この基準は WCAG 2.1 にはなく、2.2 で新設されました。まだ日本語の解説が少ない領域なので、下記のリンク先とあわせて理解を深めてください。
補足
この達成基準の詳細解説は準備中です。現在は関連パターン・達成方法・原典への参照を掲載しています。
関連する達成方法
この達成基準を満たすための具体的な実装方法です。本サイトでは本文を収録していないため、各リンク先の W3C 原文を参照してください。
十分な達成方法(3)
失敗例(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.13 フォーカスの外観 — WCAG 2.2 日本語訳(waic.jp)(新しいタブで開きます)規範訳。正式な要件の本文はこちら。
- Understanding Focus Appearance — W3C(英語)(新しいタブで開きます)意図・具体例・達成方法の詳しい公式解説。