リンクの下線表示はカスタマイズすべきか

投稿

<a href> によるリンクは UA スタイルシートによって下線が引かれますが、そのデフォルトの見た目がアクセシブルでないという話。

UX Collective の元記事に書かれているように、下線の付いたテキスト内リンクはコンテンツの読みやすさに悪影響を及ぼし、注意散漫になり得ることは確かに考慮すべきでしょう。そのうえで text-underline-offset や text-decoration-thickness、text-decoration-color プロパティを使って下線の圧を弱める手法が両記事で紹介されていますが、これの導入は慎重になるべきです。

というのも本件は下線リンクが存在するサイト（≒すべての Web サイト）で等しく問題になるものであり、制作者スタイルシートでサイト個別に工夫することが正しい解決方法とは思えないからです。元記事ではdyslexia-friendly（識字障害フレンドリー）との表現がされていますが、当事者がユーザースタイルシートを設定すれば済む話ではないでしょうか。もっともユーザースタイルシートの設定には CSS の知識が必要になるわけでして、ブラウザに「リンクの下線の圧を弱める」オプションを導入することを求めるほうが現実的でしょうか。

  • Firefox には「常にリンクに下線を付ける」オプションが存在するので、そんな感じのオプションを増やすことは充分考えられるでしょう。

もう一つの可能性としては text-decoration-skip-ink で前例があるように、後方互換性を犠牲にしてでもブラウザのデフォルトの動作が変更されることも考えられます。もしそうなった場合、制作者スタイルシートで工夫をしていたサイトよりも、むしろなにもしていない（圧倒的大多数の）サイトの方が良い感じになる逆転現象が起こりえます。

いずれにせよ、本件に限らず CSS を書く際はそれが制作者スタイルシートで設定すべきものなのかどうかを考える必要があるでしょう。本ブログではそのような考えのもと、以前からリンクの下線は text-decoration-thickness: from-font のみ設定するようにしており、それ以上のカスタマイズはあえて行っていません。text-underline-offset プロパティにキーワードでなく具体的な数値を設定するのもなんか嫌ですし【謎】

  • 念のため、制作者スタイルシートで下線のカスタマイズをするなと主張するものではありません。仮にブラウザのデフォルトスタイルが変わったり、新しい CSS プロパティが出現したりした場合にすぐに対応できる体制を整えているのであれば実験的にやってみることは否定しません。一方で受託によるサイト制作などで、一度サイトが出来上がったら手を離れるようなケースではサイト独自の工夫をすることには慎重であるべきです。