【アクセシビリティ】aタグにおける visited のスタイル変化、どうするべき？
はじめに
aタグには visited および link という擬似クラスがあります。これはリンクが訪問済みかどうかを表示するもので、通常これらの擬似クラスがもたらすことのできる変化は色の違いのみです。端的に言い換えれば、「訪問済みかどうかを見分けるために、色の変化によって違いを表すための擬似クラス」とすることもできます。
しかし、WCAG の達成基準を見ていると、こんな項目が存在します。
色が、情報を伝える、動作を示す、反応を促す、又は視覚的な要素を判別するための唯一の視覚的手段になっていない。
視覚的な情報の伝達に色のみを用いてはならない、ということです。色の見え方が人によって異なる場合があることや、色のみの変化ではなにを表現しているのか不明な場合があるため、定められた項目です。
visited ができることと相反していますね。visited が達成すべき要件と、アクセシビリティ対応の塩梅について、考えていきます。
結構メジャーな擬似クラス、visited
visited は、アンカー要素に用意されている擬似クラスのなかでも目にすることが多いものではないでしょうか。CSS 初学者だった頃の自分も「訪問済みリンクの色が変わることは、なんとなくよくある仕様」という認知がありました。
また、visited のスタイリングは開発者ツールで簡単にデバッグできます。影の薄い擬似クラスも多いなか、これはかなりメジャーな部類のカスタマイズ要素ではないかと思います。
代表的な利用例から見る visited でのスタイルの変化
一般的に、リンクの色は青色、訪問済みリンクの色は紫色、といったイメージがあると思います。現在よく用いられている代表的な例としては Google や Yahoo などの検索エンジンでしょうか。このカラーリングは、CSS のデフォルトスタイルに由来するものです。
CSS のデフォルトスタイルを反映した a タグ
Google や Yahoo では以下のような色が採用されていました。
Google と Yahoo! 検索における未訪問及び訪問済みリンク
どちらも色のみで visited が表現されていることがわかります。さらに、実はこの二色、明度にも大きな差はありません。
CSS のデフォルトスタイルを反映した a タグがモノクロである場合
Google と Yahoo! 検索で、未訪問及び訪問済みリンクがモノクロである場合
Google や Yahoo などの大手サイトであったとしても、visited の変化は色覚のサポートすらも然程考慮されていないということになります。
visited の表現が必要なユーザーとは
昨今の Web サイトにおいては、そもそも visited が表現されること自体が少なくなっています。検討はプライバシー保護の観点からなされたようですが、そこにデザイン的な流行もプラスされていると考えています。元々はメジャーな表現だったにもかかわらず、時代によって異なる視点が入り込み、現在では徐々に影が薄まっているというわけですね。
では、例に挙げた検索エンジンでは、どうしてこれが現存しているのでしょうか。
visited は、訪問済みであることを視覚化するための表現です。訪問済みかどうかが視覚化されることで、大きな恩恵を受ける場面があるということです。
例えば検索エンジンを利用するとき、ヒットした沢山の Web サイトが一覧で表示され、それらから私たちは必要な情報を探さなければなりません。多くのページを開いたり、時には何度も検索しなおすことで、「あれ、このサイトって開いたんだっけ？」と混乱してしまうことがあります。記憶力が低下していたり、短期記憶のハンデを持つユーザーにとって、これは尚更バリアとなってしまいます。
こういった場面において、訪問したことを表現することは、かなりプラスに働くのではないでしょうか。
Zenn の記事一覧における未訪問及び訪問済みリンク
わずかな違いですが、 Zenn や Qiita の記事一覧でも visited によってスタイリングが分けられています。これらについても同様の理由ではないかと考えています。沢山の情報が掲載されているコンテンツですから、自分の求めている情報に辿り着くために、既に閲覧しているかどうかが分かると便利ですね。
結論
visited は、メジャーな擬似クラスでありながらも、新しい観点や流行から現在は用いられる場面が減少しています。また、visited が採用されている場面でも、デフォルトスタイルにおけるアクセシビリティ的な懸念点が大きく払拭されることはない印象です。
しかし、これが重要視されるサービスもあります。検索エンジンや記事を投稿する媒体では、「訪問済みかどうか」は大きな情報源です。
バリアフリーな表現をするにおいて優先順位こそ下がるものの、シーンによっては大事な役割を持つことが分かりました。サービスやデザインとの調和を考えつつ、検討すべき内容だと考えます。
Discussion