移行中の知識
フォーカス表示
Focus Indicator
定義
フォーカス表示（focus indicator）とは、キーボード操作などで現在どのUI要素がフォーカスを持っているかを視覚的に示す手がかりです。WCAG 2.2のSuccess Criterion 2.4.7「Focus Visible」（Level AA）は、キーボード操作可能なUIにフォーカス表示が見える動作モードを求めますが、Success Criterion名そのものとfocus indicatorという視覚表現を同義語にはしません。ブラウザ既定の表示を利用することもでき、独自装飾に置き換えること自体が目的ではありません。
実例
実際の場面で考える
同じ概念を異なる制作文脈へ持ち込み、何を観察して判断するかを見る。
キーボードでTab移動するWebサイト
ヘッダーナビゲーション
見るポイント
ナビゲーションリンクをTabで移動し、現在位置がhover状態とは独立して見えるか確認する。背景色が変わる場所でも表示が消えないかを見る。
確認ダイアログ
モーダル内の操作
見るポイント
ダイアログ内のボタンやリンクをキーボードで移動し、どこにフォーカスがあるか常に追えるか確認する。開閉時だけでなく内部の全操作を通して見る。
注意
誤解しやすい点
- outlineを消したまま代替のフォーカス表示を用意しない。
- マウスhoverの見た目があるため、キーボードフォーカスの表示も満たしていると考える。
- focusが見えることだけでkeyboard operationやlogical focus orderまで満たしたと考える。
- Level AAAのFocus Appearanceの寸法・コントラスト条件を、Level AAのFocus Visibleそのものの要件として混同する。
関連
関連する概念
出典