“Designing dyslexia-friendly navigational components”によれば、text-decoration: underlineによるデフォルトの下線はアクセシブルではないと言う。理由としては大きく二つ。
- 下線がディセンダーと重なることで文字の判読性や可読性が損なわれる
- コンテンツの邪魔になって読み手の気を散らす
これは特にディスレクシアなど、認知機能に困難があるユーザーへの影響が大きい。
加えて、デフォルトの下線は美観としても好ましくないという評価を受けることが多い。視覚的に煩雑な印象を与えるからという、上記と類似する理由によるものだろう。
件の記事では、そうした問題を踏まえた改善案が紹介されている。これを参考に、このサイトでは次のような実装を採用した。
html {
/* 下線と文字の距離を離す */
text-underline-offset: 0.3em;
}
a:any-link {
/* UAスタイルシートに含まれているが、説明のために記述 */
text-decoration: underline;
/* リンクの文字色よりも薄い下線の色。背景と3:1以上のコントラスト比を確保する */
text-decoration-color: oklch(0.67 0 0);
/* 下線を細くする */
text-decoration-thickness: 1px;
}また、文字と下線の距離が離れることに合わせて、line-heightプロパティを少し広めに設定している。
これにより視覚的なノイズや判読性の問題を軽減できるほか、美観としても好ましくなったように思う。