アクセシビリティとビジュアルをトレードオフにしたくない！part2

前回に引き続き、アクセシビリティ向上を目指しながらも見た目の良さも両立させたい話です。

この投稿の趣旨（前回のおさらい）

まず、前回の投稿はこちらです。

ざっくりまとめると、JISで定められた「規格」としてのアクセシビリティをクリアしていても情報が見づらいものって結構ある。もともとの意味を考えれば万人にとって使いやすいことが大切なので、視覚的な良さも両立させたい。という話でした。

フォーカスインジケーターの問題

みなさんはサイトを作るときにE:focusはどのようにしていますか？ぱっと見てオシャレだな〜と思うサイトだと

E:focus {
  outline: 0;
}

みたいに指定されていることもよくあります。アクセシビリティの観点から考えるとこれはよくない指定です。

何故ならキーボードだけで操作している（操作せざるを得ない）ユーザーからすると、今自分がどの要素を選択しているかわからなくなってしまうからです。

もしこの記事を読んでいる方がいたらtabキーを何回か押してみてください。多分ページが動くけど表示は何も出ないと思います。これがキーボードだけで操作している人の世界です。
（noteで記事を書きながらこんなことを言うのは非常にアレだなと思いつつも、分かりやすい例だったので……）

じゃあちゃんとoutline指定すれば済む話じゃん？と思うのでしょうが実はそうもいきません。

というのも、今度は逆にマウスユーザーからすると明示的にfocusを指定してあるサイトは何かをクリックするたびにoutlineが出てきてかなり鬱陶しいからです。

だから正直outline: 0を指定したくなる気持ちはよく分かります。

両立させるにはどうしたら良いか？

今の所自分の中で思っているのは2つあります。

1. what input?ライブラリを使う
2. focusを初期値にしておく

1番のライブラリはこちらです。これは、キーボード操作なのかマウス操作なのかを受け取ってdata-whatinputという属性に値を返してくれます。なので

[data-whatinput="keyboard"] :focus {
  outline: 1px solid #f00;
}

[data-whatinput="mouse"] :focus {
  outline: none;
}

みたいなコードを書けばキーボード操作のときは赤い1pxの線のフォーカスインジケーターが表示されるけどマウス操作なら何も出ない実装が可能です。

2番については……少々逃げの選択です。フォーカスインジケーターをuser agent任せにするとchromeでは半透明？な線で、firefoxでは細い点線が出るなど制御しきれません。

とは言え、キーボード操作ではインジケーター有りでマウスでは無しという大枠の望みは叶う上にJSなど何も必要ないので遅くなることもありません。

ちなみにcss4でfocus-visibleという疑似クラスが追加される予定で、これがあればJSに頼らずとも操作するデバイスによってスタイリングを変えることができます。待ち遠しい限り……。

まとめ

特に何も障害などない人からしたらフォーカスインジケーターがあまり嬉しいものではないことは分かる。けど無いと困る人も多くいる。両方にとって使いやすくあろうとすれば、その人の使い方に合わせてこちらの振る舞いを変えるしか無い。というお話でした。

インプット要素の話もしたかったけど、結構長くなってしまったし次回かまた別なときにします。

目次
1. この投稿の趣旨（前回のおさらい）
2. フォーカスインジケーターの問題
3. 両立させるにはどうしたら良いか？
4. まとめ