:focusを実装しよう

一般的にサイトのリンク部分は、アンダーラインや色を用いてリンクとわかるようにしています。マウスオーバーした際には、マウスが当たっていることを示すためにラインや色に変化をもたせています。
マウス操作の場合はユーザーが自分の意思のままに操作できますがキーボードの場合はどうでしょうか。キーボード操作の場合は、[tab]キーを押すことでリンクからリンクへ移動します。ブラウザ標準のフォーカス表示がある場合はリンク部分がハイライトされるようになっていますが、これがない場合はどこにフォーカスしているのかを見失ってしまします。ブラウザ毎に仕様が異なったり、コントラストの問題が生じることもあるので:focus擬似クラスを設定することは、よりアクセシブルなサイトに一歩近づくことに役立ちます。

WCAG 2.0 実装方法集のC15: CSSを用いて、ユーザーインタフェースコンポーネントがフォーカスを受けとったときの表示を変更するには実装例とチェックポイントがあります。

チェックポイント

フォーカスを得られる各要素に対して：

1. マウスを使って要素の上にカーソルをのせる。
2. 背景又はボーダーの色が変化する。
3. キーボードでフォーカスを与える前に、マウスを動かして対象からカーソルを外す。
4. キーボードを使って、対象の要素にタブ移動する。
5. 背景又はボーダーの色が変化する。
6. その要素がフォーカスを失ったとき、背景又はボーダーの色が元に戻る。

判定基準：上記、2,5及び6を満たしている。

cssの実装例）

a:hover, a:active, a:focus {
  background-color: #aaccff;
  color:#222233;
}

:hover擬似要素と同じように設定することで達成基準を満たすようですが、背景色を設定する場合は、そのコントラストには注意が必要だと思いました。当ブログの『WCAGアクセシビリティガイドラインに基づいたカラーツール_My bookmark』で紹介したツールで確認してみるのもいいと思います。

その他:focus擬似クラスをサポートしていないブラウザでスクリプトのサポートがあればJavaScriptを用いる方法もあるようです。
参考：SCR31: スクリプトを用いて、フォーカスのある要素の背景色又はボーダーを変更する

キーボード操作に関しては、比較的身近なことじゃないかなと思います。キーボードに集中したい時もあるかもしれないし、マウスが壊れたり電池切れになったりすることも。”アクセシビリティに配慮”というほど特別なことじゃないのかもしれません。