リンクの下線を消すと押されにくくなる。本文の中だけでも標識として残す

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

でも読む人からは「リンクが見当たらない」と言われることがある。
下線がなければ、ただの色の違う文字だからだ。

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

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

その下線は、サイト全体からかんたんに消せてしまう。
CSSに text-decoration: none; と一行書くだけだ。

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

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

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

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

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

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

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

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

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

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

あわせて見直したい二つ

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

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

飾りを引き算していく方向は、たいてい正しい。
ただ引き算した中に、標識まで混ざっていることがある。
押されないリンクがあったら、まず下線を疑ってみるといいと思う。