ウェブサイトを利用する際の方法としてマウスやタップがありますが、tab キーを利用する方法もあります。tab キーを押すとリンクごとにフォーカスがあたっていくのですが、そのフォーカスが当たっていることを、よりわかりやすくするような装飾を、このブログで設定しました。

達成基準を確認

このフォーカスですが、アクセシビリティにおいて基準が設けられています。アクセシビリティの分野ではおなじみ、JIS X 8341-3:2010 では以下のようになっています。

インフォアクシアの植木さんがAccSell Meetup 008 『集まれ！アクセシビリティー・ビギナーズ！2015』というイベントで発表されたJIS X 8341-3:2010を『日本語訳』してみる！～Webアクセシビリティの基本の『キ』～ というスライド（PDF） の 85 ページを参照すると、上記の文章が言いたいことはキーボードフォーカスの位置が分かるようにするということのようです。このスライド 、難しい日本語で書いてある JIS X 8341-3:2010 を噛み砕いて解説しているのでオススメです。

ブラウザのデフォルトスタイルシート

フォーカスされた際のスタイルは、もともとブラウザが持っているデフォルトスタイルシートで設定されています。例えば、Chrome では要素が :focus された際には以下の CSS が適用されます。

outline-color: rgb(59, 153, 252);
outline-offset: 0px;
outline-style: auto;
outline-width: 5px;

Chrome のデフォルトスタイルシートだと、フォーカスされた箇所に青い枠が出る感じですね。調べてみたら、見栄えのために打ち消す指定をしている方もいらっしゃるようでしたが、私はわざわざそれを消したり変更したりすることはしませんでした。

outline: none; とかの指定をして、デフォルトスタイルシートの指定を打ち消すことをしなければ、アクセシブルではあると思うのですが、もう少しフォーカスをわかりやすくするために、ブラウザのデフォルトスタイルシートにプラスしてスタイルを指定するようにしました。

:hover と同じスタイルを設定

今回フォーカスのスタイルを指定するにあたって、どういうスタイルにしようか悩んだのですが、今回はホバー（:hover）した時と同じスタイルにしました（一部を除く）。何故、そのような指定にしたかというと、ホバーとフォーカスが同じ段階にあると考えたからです。

例えば、リンクをクリックしてページ遷移するという行動を考えた時、マウスとtab キーでは、以下のような段階を踏みます。

マウスの場合

1. マウスを動かして、リンクにホバー
2. マウスをクリックしてページ遷移

tab キーの場合

1. tab キーを押して、リンクにフォーカス
2. Enter キーを押してページ遷移

ページ遷移をする1段階前の行動という意味で、この2つは同じ段階にあると考えました。もし、:focus のスタイルに悩んだら、とりあえず :hover と :focus のスタイルを一緒にしてみるのもいいかもしれません。