いま、どこを操作するのかが見える。

05条件と補足

キーボードで操作する位置を示す

ボタンやリンク、入力欄など、キーボードで操作できる部品について確認します。対象の部品が画面に表示されているだけでは足りず、どれにフォーカスがあるのかを見分けられる必要があります。

フォーカスは「いまキー操作の対象になっている場所」です。選択済みや申込済みを表す状態とは異なります。図の「改善した例」の枠も選択結果を表すものではありません。

枠線以外の方法でもよい

この基準は見えるフォーカス表示の形を一つに限定していません。枠線のほか、入力欄の挿入位置を示す縦線など、部品に合う表示があります。ブラウザーが標準で用意する表示を使う方法もあります。

見た目を整えるために標準の表示を消す場合は、代わりになる見える表示を用意します。時間がたつと表示だけを消す方法では、現在の位置がわからなくなります。フォーカスがある間は、その表示を保ちます。

「見える操作モード」があること

キーボードで移動したときに表示し、マウスでクリックしたときには表示しない方法でも、この基準を満たせます。少なくともキーボードのフォーカスが見える操作モードを用意する必要があります。

この教材の「改善した例」では枠の変化を確かめやすいよう、クリックでボタンにフォーカスが当たった場合も枠線を表示します。

関連する基準との違い

2.1.1「キーボード」では機能をキーボードで使えるか、2.4.7では現在の操作位置が見えるかを確認します。

制作者が用意した枠線などと隣の色とのコントラストは、1.4.11「非テキストのコントラスト」で確認します。フォーカスを受けた部品の全体が、制作者の表示した内容に隠されていないかは、2.4.11「隠されないフォーカス (最低限)」でも確認します。

2.4.13「フォーカスの外観」は、表示の面積や、フォーカス前後のコントラストを扱うレベルAAAの基準です。その数値条件をそのまま2.4.7の必須要件として扱うものではありません。

この改善例で扱うのは、図に示した3つのボタンのフォーカス表示です。ページやサイト全体のWCAG適合を示すものではありません。