リンクの見た目はどうあるべきか
Taiga KIYOKAWAリンクの見た目のベストプラクティスを導き出したい。どこのリンクはどうあるべきか。
どこのリンク
- 文中のリンク
- リストアイテムのリンク
- ナビゲーションのリンク（ヘッダー、フッター、サイドバーなど）
- 見出しのリンク
どうあるべき
- 下線の要否
- 周囲の文字色や背景色とのコントラスト比
- 閲覧済みとそうでない時の色を区別するかどうか
Taiga KIYOKAWAあくまで視覚的なアクセシビリティの話。関わってくるのは可読性と色覚特性。
Taiga KIYOKAWAWCAG 2.2 1.4.1 Use of Color
Taiga KIYOKAWAWCAG 2.1 日本語訳 1.4.1 色の使用
Taiga KIYOKAWA下線による可読性の低下について
特に日本語、特に漢字が下線で潰れてしまうことが挙げられる。あるいは、文章を流し読みしている時のブレーキになりがちで、最後までコンテンツが読まれない（離脱）の可能性も挙げられる。
単純な読みにくさについては、GitHubのように text-underline-offset を一定設けるとかで回避できそう。
Taiga KIYOKAWA1.4.1 は、色以外の手がかりを追加することを要求している。ただし、周囲の文字色に対して3:1以上のコントラスト比（輝度の差）を持つ場合はそれは色覚以外の手がかりと見なされる。
Taiga KIYOKAWAx = リンクの文字色
y = 背景色
z = 通常の文字色
x:y = 4.5:1 && x:z = 3:1 が満たされれば下線は無くても 1.4.1 および 1.4.3 は満たされる。ただし、ホバー時に追加の手がかりを要求している。
Taiga KIYOKAWA
コントラスト比を満たしていれば識別はできなくもないが、基本的には青色が望ましい。赤色や緑色が識別しづらい、できない人にとっても青は共通の手がかりとなりうる。
Taiga KIYOKAWA個人的な考え方
リンクの識別はつまりそのテキストがクリック可能かどうかの識別。
ナビゲーションなど、慣例的に明らかにクリックできる要素であることが分からない限りは、下線によってクリック可能なテキストであることを知らせるのが望ましい。
つまり、文中やリストアイテムとしてのリンクは、その色のコントラスト比が3:1以上かつ4.5:1以上で十分に要件を満たしている場合でも下線を引くべき。
ドロップダウンメニュー内の項目やフッター内のテキストは概ねクリック可能なものという慣例が身についているとして、下線は引かなくても良いと考える。ただし、ホバー時に何らかの視覚的変化、追加の手がかりはクリック可能なものであるという手応えを確かに与えるためにもあるべき。（フォーカス時のインジケータの表示は当然つける）
Taiga KIYOKAWA閲覧済みのリンクの色を変えるかどうか
Understanding Success Criterion 1.4.1: Use of Color | WAI | W3C より
Most user agents provide users with a color-only cue that a link has been previously activated by them ("visited"). However, several technical constraints result in authors having very limited control over these color-only indications of visited links. The technical constraints are as follows:
- User agents constrain the exposure of a link's visited state due to privacy concerns. Author queries to user agents will indicate all links have not been visited.
- Any available information on the visited state of a link would be inaccurate since it is both user and browser-dependent. Even if an author could accurately get information on previously activated links by a certain user, the author would be constrained to the current browser's preserved history, and would be unable to determine if the user had visited the page using a different browser (or if the history was not preserved, either from cache clearing or use of private sessions).
- Authors can only use color to modify the :visited CSS pseudoclass style. The technology constrains any non-color styling. Due to palette limitations, an author cannot use color alone to achieve 3:1 contrast between link and non-link text as well as between visited and unvisited links while also achieving 4.5:1 contrast for all link and non-link text.
- Authors also cannot set the visited state of links. The anchor element does not include a "visited" attribute; therefore the author has no ability to alter the state through an attribute setting. As such, authors cannot achieve 1.3.1 Info and Relationships or 4.1.2 Name, Role, Value in regard to visited links.
For these reasons, setting or conveying a link's visited status is not an author responsibility. Where color alone distinguishes between visited and unvisited links, it does not result in a failure of this Success Criterion, even where the contrast between the two link colors is below 3:1. Note that authors must continue to ensure that all text links meet contrast minimums against the page background (SC 1.4.3).
リンクの閲覧済み状態を設定したりユーザーに伝えたりすることはコンテンツ作成者の責務ではない。色のみでvisitedかunvisitedかを区別することは達成基準1.4.1の失敗とはならない。visitedとunvisitedのリンクの色のコントラスト比が3:1以下でも構わないが、背景色とは4.5:1以上にすべき。
Taiga KIYOKAWA閲覧済みリンクの色変化はやらなくてもいい。そこを色だけの変化で伝えてても1.4.1としては特に問わない。ただし、やるなら閲覧済みのリンクテキストの色も1.4.3にある背景色と4.5:1以上のコントラスト比は保ってね、という解釈。
Taiga KIYOKAWA- リンクテキストがクリック可能かどうか微妙なら下線を引く（文中、リストアイテム）
- クリック可能っぽい要素でもホバー時に追加の手がかりをつける（見出し、ナビゲーション）
- 閲覧済みの区別はやらなくてもいいし、やるとしても色だけの変化で問題ない（いずれにせよ背景色とのコントラスト比は守る）