リンクを色だけで表現しないようにする

ブログ改善シリーズ。今回は、リンク箇所に下線を表示する改善を行いました。これ自体は全く難しいことではないのですが、何故そうしたかを書いていきます。

改善前

まず改善前の画像を見ていただきたいと思います。リンクは青色、通常の文字は黒色。一応、リンクと通常の文字は見分けられる。ちなみに、もう修正済なのですが、以前はリンクにホバーすると下線が引かれるようになっていました。

改善前のブログ画面

一見何も問題ないように見えますし、このようなスタイルのウェブサイトはいくつも見てきました。が、アクセシブルかどうかでいうと、問題があるようです。

達成基準

当然、色の使用に関しても、しっかり JIS X 8341-3:2010 では達成基準が設けられています。

情報を伝える、何が起こるか若しくは何が起きたかを示す、利用者の反応を促す、又は視覚的な要素を区別する視覚的な手段として、色だけを使用してはならない。

7.1.4.1 色の使用に関する達成基準 : 富士通

前の記事でも参照させていただいた、インフォアクシアの植木さんのJIS X 8341-3:2010を『日本語訳』してみる!~Webアクセシビリティの基本の『キ』~ というスライド(PDF) の 96 ページを参照すると、上記の文章は色の違いが分からなくても理解できるようにするという意味のようです。

グレースケールでこのブログを見てみる

では、色の違いが分からない状態で、このブログを見てみるとどうなるか確認してみます。(un)clrd というブラウザの画面をグレースケールにできるアドオンがあります。Chrome 用Firefox用があります。このアドオンで私のブログをグレーにして見てみます。

グレースケールで見たブログ画面

グレースケールにすると、リンクであることがわかりづらくなります。太字にはなっているけど、これだと <strong> による強調と区別がつかないので NG 。

改善後

この状態を改善するために、リンクに下線をつけました。以下が改善後のブログをグレースケールで見た画面です。

改善後のブログ画面

これで、色の違いが分からない環境で見ているユーザーさんでも、通常の文字とリンクの違いがわかりやすくなりました。

リンクにフォーカスした時のスタイルを設定しました

ウェブサイトを利用する際の方法としてマウスやタップがありますが、tab キーを利用する方法もあります。tab キーを押すとリンクごとにフォーカスがあたっていくのですが、そのフォーカスが当たっていることを、よりわかりやすくするような装飾を、このブログで設定しました。

達成基準を確認

このフォーカスですが、アクセシビリティにおいて基準が設けられています。アクセシビリティの分野ではおなじみ、JIS X 8341-3:2010 では以下のようになっています。

キーボード操作が可能なユーザインタフェースには、キーボードフォーカスの状態が視覚的に認識できる操作モードがなければならない。

7.2.4.7 視覚的に認識可能なフォーカスに関する達成基準 : 富士通

インフォアクシアの植木さんがAccSell Meetup 008 『集まれ!アクセシビリティー・ビギナーズ!2015』というイベントで発表されたJIS X 8341-3:2010を『日本語訳』してみる!~Webアクセシビリティの基本の『キ』~ というスライド(PDF) の 85 ページを参照すると、上記の文章が言いたいことはキーボードフォーカスの位置が分かるようにするということのようです。このスライド 、難しい日本語で書いてある JIS X 8341-3:2010 を噛み砕いて解説しているのでオススメです。

ブラウザのデフォルトスタイルシート

フォーカスされた際のスタイルは、もともとブラウザが持っているデフォルトスタイルシートで設定されています。例えば、Chrome では要素が :focus された際には以下の CSS が適用されます。

outline-color: rgb(59, 153, 252);
outline-offset: 0px;
outline-style: auto;
outline-width: 5px;

Chrome のデフォルトスタイルシートだと、フォーカスされた箇所に青い枠が出る感じですね。調べてみたら、見栄えのために打ち消す指定をしている方もいらっしゃるようでしたが、私はわざわざそれを消したり変更したりすることはしませんでした。

outline: none; とかの指定をして、デフォルトスタイルシートの指定を打ち消すことをしなければ、アクセシブルではあると思うのですが、もう少しフォーカスをわかりやすくするために、ブラウザのデフォルトスタイルシートにプラスしてスタイルを指定するようにしました。

:hover と同じスタイルを設定

今回フォーカスのスタイルを指定するにあたって、どういうスタイルにしようか悩んだのですが、今回はホバー(:hover)した時と同じスタイルにしました(一部を除く)。何故、そのような指定にしたかというと、ホバーとフォーカスが同じ段階にあると考えたからです。

例えば、リンクをクリックしてページ遷移するという行動を考えた時、マウスとtab キーでは、以下のような段階を踏みます。

マウスの場合
  1. マウスを動かして、リンクにホバー
  2. マウスをクリックしてページ遷移
tab キーの場合
  1. tab キーを押して、リンクにフォーカス
  2. Enter キーを押してページ遷移

ページ遷移をする1段階前の行動という意味で、この2つは同じ段階にあると考えました。もし、:focus のスタイルに悩んだら、とりあえず :hover:focus のスタイルを一緒にしてみるのもいいかもしれません。

記事タイトルの付け方を変更します

記事タイトルの付け方を変更することにしました。記事番号と日付を外します。前回の記事を例にすると、以下のようになります。

  • 以前:0048-141217 リンクテキスト色を修正した話と Colour Contrast Analyser のカラーピッカー機能を発見した話
  • これから:リンクテキスト色を修正した話と Colour Contrast Analyser のカラーピッカー機能を発見した話

元々は shiology というブログの真似

この特徴的な記事タイトルの付け方には元ネタがありました。Mac を購入したての時に物凄く参考にしていた shiology というブログがこのような記事タイトルの付け方をされていました。で、自分でブログを始めた際に shiology の真似をしたということです。

やめることにした2つの理由

  1. 書くのが面倒
  2. 検索された際に表示される記事タイトルの文字数が少ない

1. 書くのが面倒

これは、もうそのまま。結構前から、いちいち今回の記事は何番かなと調べたり、日付を打ったりするのが面倒になっていました。あと、0043-140625 ブログデザイン変更点メモを更新する際、日付変更付近で作業していたため、記事タイトルは 140625 なのに、WordPress で付けられる更新日時が 2014-06-26 になってしまったということもありました。記事タイトルに日付を書かなければ、そのズレでモヤモヤすることもなくなります。

2. 検索された際に表示される記事タイトルの文字数が少ない

これは少し前に気づきました。今回記事タイトルの付け方を変更しようと思った理由の大部分がこれです。何で記事番号と日付を外そうと思ったかは以下の検索結果の画面を見ていただくとわかりやすいと思います。

「svg 表示されない」というキーワードの Google 検索結果画面

上から4つ目に私のブログ記事が掲載されているのですが、記事番号と日付があるせいで、記事タイトルの後ろの方が表示されていません。今サッと調べたところ、2014年3月時点で Google 検索で表示される記事タイトルの文字数は 30から28文字 以内が目安とのことです。表示される文字数は諸説あるようですが、どのみち記事番号と日付があるせいで、記事タイトルの後ろの方が省略されていることに変わりはありません。

日付に関しては、更新日が Google 検索結果画面でも表示されますし、記事内でも一番上に表示するようにしているので無くしても問題ありません。

ちなみに、私が日付表示を重視するのは、調べ物をしている時に見つけた記事がいつ書かれたものかわからずに困った経験があるからです。特に、Web 関連の技術は変化が早いので、1年前の記事を参照しても全く意味が無かったりすることもあります。about ページにも書いたとおり、私がブログを書いている理由の一つに、困っている人の助けになりたいというものがあるので、困っている人が凄く古い記事をガッツリ参照して更にドツボにはまることが無いように、記事が書かれた日付というものを重視するようにしています。

本題に戻りまして、記事番号に関しては、これはもう完全に管理する側の事項であって、読んでくれている人にとってはほぼ意味が無いものだと思うので、こちらも無くしてよいと判断しました。