Safari 5およびChrome 6における「訪問済みリンク」の識別

以前の記事「色だけに依存しない(その1その2)」で触れたように、色覚特性を持ったユーザーに対する配慮として、情報内容を識別する手がかりを色だけに頼ってはいけないというのは、Webアクセシビリティを実現する上で基本的な考えかたのひとつです。当サイトでは、その一環として、リンクテキストの表示(未訪問と訪問済みの区別)を、色ではなく、下線の種類で識別できるようにしています。未訪問は実線、訪問済みは点線、という具合です。

下図は、リンクテキスト「Flash」「JIS X8341-3」「WCAG 2.0」が訪問済みリンクになっている状態を示しています。訪問済みリンクの下線が、点線で表示されているのが、おわかりいただけるかと思います。
未訪問リンクは実線、訪問済みリンクは点線で表示の例

ところが、Safariではバージョン5になってから、またGoogle Chromeではバージョン6になってから、訪問済みリンクを点線で表現することができなくなっています。未訪問、訪問済み、どちらも下線が実線で表示されるため、識別ができないのです(下図は、Mac OS X の Safariでの表示例です)。
訪問済みリンクが点線で表示されないSafariの例

なぜこのようになってしまったか、少し技術的な仕組みをお話ししますと、CSSによる視覚デザインのコード記述の解釈方法が、SafariおよびChromeにおいてバージョンアップを機に変更されたためです。具体的には、CSS擬似クラス「a:visited」で指定できるプロパティが「色の指定」に限られてしまったため、「border:dotted;」のように、borderプロパティを点線にするというCSSコード記述は、SafariおよびChromeでは無視されるようになってしまったのです。

このような対応の背景には、セキュリティの問題があるようです。悪意を持って制作されたサイトにユーザーがアクセスしてしまった場合、JavaScript の「getComputedStyle()」などによって、ユーザーの履歴が抜き取られ、どのサイトに訪れていたのかを知られてしまう恐れがあるそうです。詳しくは、「Safari 5 で :visited の挙動が変更に : Safari Realized」や「:visitedの挙動変更がSafari 5に反映(ミツエーリンクス Web標準Blog)」などの記事が参考になります。

現時点では、このような対処がなされているのはWebkitをベースに開発されているSafariとChromeだけです。ところで同じSafariでも、iOS(iPhoneやiPad)に搭載されているSafariは「a:visited {border:dotted;}」を意図通り解釈してくれています(訪問済みリンクの下線を点線で表示してくれる)。ただこれも、パソコン用のSafariと同じ仕様に変更されるのは、恐らく時間の問題ではないかな、と予想しています。

また、Mozillaでも同様の動きがあるようです(詳しくは、Mozilla Developer Street というサイトの「CSS によるブラウザ履歴の漏えいを防ぐ取り組み」や「CSS の :visited に行われるプライバシー対策」をご参照ください)。となると、いずれはFirefoxでも、同じような仕様変更が施される可能性は十分にあると言えるでしょう。

というわけで、当サイトでは、リンクが未訪問か訪問済みかを識別するために、線種だけでなく色も変える必要がある、という判断に至り、実装することにしました。多くのユーザーのメンタルモデルに合わせる意味で、一般的に見られるカラースキームに合わせて、未訪問リンクは青系、訪問済みリンクは紫系の色にしています(下図は、Mac OS X の Safariでの表示例です。FirefoxやOperaでは、単に色だけが紫色に変わるだけでなく、下線も併せて点線で表示されるようになります)。
訪問済みリンクを紫色で表示するSafariの例

ただしこの、一般的に多くのサイトで見られる、未訪問リンクと訪問済みリンクの色による区別(青と紫)は、色覚特性を持つユーザーにとっては識別しにくい、という問題があることは、ぜひこの機会に提起しておきたいと思います。下図はシミュレーションツールで表示してみた例ですが、色覚特性のない人の見えかたと、P型特性(赤の視感度がないか弱い)を持った人の見えかたを比較したものです。リンクテキスト「Flash」「JIS X8341-3」「WCAG 2.0」は訪問済みリンク(紫色で表示)ですが、色覚特性を持った人には、未訪問リンクとの区別が難しいことが、おわかりいただけると思います。
色の区別だけによる訪問済みリンク表示の見えかたを、色覚特性の有無で比較した例

これに対して「色覚特性のある人でも識別できるような色の違いを採用すればいいだけでは?」というご意見もあるかもしれません。ただし、実際トライしていただくとおわかりいただけると思いますが、そのような色の組み合わせを頑張って探したとしても、多くの場合、ブランドイメージなどを配慮して設定した色遣い(カラースキーム)に大きな影響を及ぼすことになるでしょう。よほどうまく色を選ばないと、いわゆる「センスのない無節操な色遣い」になってしまうのがオチになると思います。

その意味では、色だけで未訪問か訪問済みを識別させるのは限界があり、アクセシビリティの観点で問題があると感じています(リンクが訪問済みかどうかは、ユーザーがサイトを回遊する上で有用な手がかりになりますが、その恩恵にあずかれるのは、色覚特性を持たないユーザーに限られるということになります)。できるだけ多くのユーザーに対して利便性を提供するためには、たとえば、borderプロパティにおいて、線の太さや線種といった、色だけでない要素についても許容されればいいなと、切に思います。セキュリティの絡みで難しいのかもしれませんが、このままの方向性で他のブラウザも追随して仕様変更が進むとしたら、残念だなというのが正直な印象です。