2.4.7 フォーカスの可視化 レベルAA 原則2 操作可能
いま、どこにいる？
キーボードで操作する人にとって、フォーカスの枠は「マウスの矢印」の代わりです。見た目をすっきりさせようとして枠を消すと、Enter を押したら何が起きるのか、分からなくなります。
さわってみよう
Tab キーでメニューを進み、「お問い合わせ」で Enter を押そう。
みなみ高校
（メニューを選ぶと、ここにページが開きます）
始め方
下のボタンを押すと、見本のメニューの先頭（「ホーム」）にフォーカスが移ります。そこから Tab キーで進んでください。
この見本では、フォーカスの枠を outline: none で消しています。いまどのリンクにいるか、分かりますか。
直してみよう
フォーカスの表示を選んで、どこにいるかが見える状態で「お問い合わせ」まで進み、Enter を押そう。
みなみ高校
（メニューを選ぶと、ここにページが開きます）
分かったこと
- キーボードで操作できる部品には、いまフォーカスがどこにあるか見える表示を付ける。
- CSS で
outline: noneと書くと、ブラウザが付けてくれる枠が消える。消すなら、代わりの表示を必ず用意する。 - 表示があっても薄すぎると見つけにくい。フォーカスの枠のような「部品の状態を示す表示」は、別の基準 1.4.11 で、隣の色と 3 : 1 以上のコントラスト比が求められる。
- 枠の太さや囲み方まで細かく決めた基準は 2.4.13 フォーカスの外観（レベルAAA）にある。
「見える操作モードがある」という言い方の意味は、WCAG 2.2 の日本語訳で確かめよう。