:hoverの誤用について

ある要素がマウスオーバーされたことを伝える。それ以上の役割を:hoverに紐付くスタイルに持たせるべきではない。マウスオーバーするまでその要素のインタラクションがわからないデザインにしてはいけないのだ。

マウスオーバーするまでその要素がリンクであるという確信が持てないデザインによく遭遇する。それが本当にリンクであるか確かめるためには、わざわざマウスカーソルを移動させて試してみるしかない。スマホではタップだ。もし、ただのテキストだと期待して誤操作すれば、ページを戻る操作も必要になるかもしれない。
:hoverのスタイルを指定できることを拠り所にしてしまい、通常状態ではその振る舞いを期待させられる見た目になっていないことがよくある。しかし、マウスオーバーするということはインタラクションコストが掛かるということだ。また、:hoverによって何かしらの手掛かりが得られるかもしれないということにすら気づかれないことも当然ある。全ての要素にマウスオーバーしてくれるユーザーはほぼ存在しない。スマホにおいては無意味だ。

:hoverは、マウスオーバーされたということのみを伝えるために利用すべきだろう。それを意識することによって、マウスカーソルを見失いやすいユーザーやそういった状況を補助することができたり、要素のクリッカブルなエリアの境界をよりわかりやすくしたりできる。背景色など、変化が広い面で即座に見えるスタイルが好ましそうだ。

とは言え、:hoverのルール作りは思いの外問題を抱えがちだ。:hover状態と通常状態の差をつけるために、いずれかを可視性の悪いスタイルにしてしまうこと。状態のバリエーションを増やすために見た目の一貫性を失ってしまうこと。そしてやはり、:hoverのスタイルで補うことに甘えてしまうことだ。:hoverのスタイルを実装することはもはや当たり前のように思われていることもあるが、あえて無視してしまった方が良い理由もある。:hoverのスタイルに振り回されることでそれ以外の部分に悪影響が及ぶのであれば、むしろ僕は積極的に:hoverをやめてしまうことを提案したい。

---

僕がこれについて気になったきっかけは、テキストリンクにマウスオーバーすると下線が付くという良くあるパターンには問題があると感じたからだ。それらの多くは、本文中のリンク以外の部分と色のみで区別されている。マウスオーバーするまでは、色以外の方法でリンクを区別する術が無い。

色は情報を区別するための手段として脆い。ディスプレイの品質や設定、部屋の照明や日の当たり具合によって容易に意味を失ってしまう。また、色覚異常やロービジョンなどの理由で色の区別が難しいユーザーも非常に多い。そのため、WCAGでは色が要素を判別するための唯一の手段になっていないことが達成基準となっている。前述したパターンでは、:hover状態になるまでリンクであることを伝えていないことと同義となる。

ある要素がリンクであるということを伝えるとき、下線を引くことはこれ以上にないくらいに当たり前の表現だ。例えば、下線のないテキストリンクをリンクであると判断することはかなり文脈依存である。ボタンっぽい見た目のリンクも、それが本当にボタンなのかどうかの判断が難しいシーンがある。下線があればそれがリンクなのか迷うことはほとんど無い。ウェブにおいてかなり強い慣習だからだ。リンクから安易に下線を取ってしまわず、慣習に基づいてうまくやる方法を考えたいところだ。