Level AAWCAG 2.2
2.4.7 フォーカスの可視化
キーボードで操作可能な全UIコンポーネントに、フォーカスが見えるインジケーターを提供する。
なぜ重要か
キーボードユーザー
マウスを使えない・使わないユーザーにとって、フォーカス位置は唯一の現在地表示。
運動障害
手の震えやスイッチデバイスでの操作では、マウスよりキーボード操作が現実的。
パワーユーザー
ショートカットやTab操作で効率的に作業するユーザーにも不可欠。
テスト容易性
フォーカス可視性はマニュアルテストの第一歩。Tabで即座に確認可能。
ライブデモ
キーボードフォーカスの可視性
Tab キーで移動してみましょう。
outline: none を使うとキーボードユーザーが現在位置を見失います。ペルソナで理解する
鈴木さん（42歳）— 上肢運動障害
手の震えでマウスが困難。Tabキーで操作しますが、フォーカスが見えないサイトは真っ暗な部屋を歩くようなものです。