リンクの下線を消したら、誰も押さなくなった。飾りのつもりで標識まで消していた

記事の終わりに、参考にしたページへのリンクを置いた。
色はちゃんと変わっていたし、押せば飛ぶ。それで済んだつもりでいた。

あとから「リンクが見当たらない」と言われて、自分の画面をもう一度見た。
言われてみれば、ただの色の違う文字だった。

下線は飾りではなく、標識だった

ブラウザは、何も指定しなければリンクに下線を引く。
Webが始まったころからずっとそうで、「下線のある色付きの文字は押せる」というのは、たぶん世界でいちばん広く共有された約束事のひとつだと思う。

その下線を、僕はサイト全体から消していた。
CSSに text-decoration: none; と一行書くだけで消える。

消したこと自体が間違いだったとは思っていない。
ナビゲーションのメニューや、ボタンの形をしたリンクに下線が入ると、たしかに野暮ったくなる。
問題は、その一行が本文の中まで届いていたことだった。

色だけでは、伝わらない人がいる

色を変えてあるのだから分かるはず。
これがいちばん危ない思い込みだった。

色の見え方は人によって違う。
男性の20人に1人ほどは、特定の色の差が見分けにくい特性を持っていると言われている。
青と黒でも、並んで比べられなければ差に気づかないことはある。

特性の話を抜きにしても、画面の設定や明るさで色は簡単に飛ぶ。
僕自身、真夏の車の中でスマホを見たとき、自分のサイトの本文とリンクの区別がまるでつかなかった。
アクセシビリティの指針でも「色だけで情報を伝えない」というのは基本のひとつになっている。

下線のいいところは、色が飛んでも形が残ることだと思う。

全部戻すのではなく、本文だけ戻した

直し方は単純で、サイト全体の指定はそのままにして、記事本文の中のリンクにだけ下線を戻す。

本文を囲んでいる部分にクラス名が付いているなら、そこを起点に一行書けばいい。
たとえば .article_body a { text-decoration: underline; } といった具合。

このとき一緒に入れておくといいのが text-underline-offset で、下線を少しだけ下へ離せる。
日本語は漢字もひらがなも下まで伸びるので、標準の位置だと線が文字に食い込んで読みにくい。
3px ほど下げると、線はあるのに邪魔にならない。

ついでに直した二つ

ひとつは、マウスを乗せたときにだけ色が変わる作りをやめたこと。
スマホには「乗せる」という動作がない。指が触れたときには、もう押している。
触る前に分かることのほうが、ずっと大事だった。

もうひとつは、外のページへ飛ぶリンクに rel の noopener を足したこと。
別のタブで開く設定にしているなら、これは付けておいたほうがいい。

飾りを引き算していく方向は、たいてい正しい。
ただ引き算した中に、標識まで混ざっていることがある。
僕はそれを、押されなかったリンク一本で教わった。