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

改善前

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

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

達成基準

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

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

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

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

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

改善後

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

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

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

達成基準を確認

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

インフォアクシアの植木さんが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 のスタイルを一緒にしてみるのもいいかもしれません。

今回、また少しブログのデザインをいじったので、さらっと（？）メモ。

タグとパーマリンク追加

わからないことがあって検索してる時に、その記事のタグから更に関連情報を拾うことがあります。が、自分のサイトでは、それができないことに気づきました。ということで、タグを記事の下部に追加しました。今は記事数が少ないので、あまり役に立たないのですが、後々便利になっていくと信じます。

もう一つ、ページ下部にパーマリンクをつけてみました。これは、ページ下部にタグだけだと締まりが悪かったので、とりあえずブログっぽくなるかなと置いてみました。もしかしたら、いつの間にか無くなっているかもしれません。

アイコンフォント増やした

前回ブログのデザインを変更した際、検索フォームに飛ぶためのボタンを右上に設置したのですが、そこにテキストと併記するかたちで、虫眼鏡アイコンを置きました。せっかく使い方がわかったのだからと欲が出て、新たに2箇所アイコンフォントを置きました。

1箇所は、記事上部の日付の部分です。カレンダーのアイコンフォントを設置しました。このブログでは、記事タイトルに独自の数字を入れていて、数字ばかりでごちゃっとしてしまっているので、メリハリをつける意味で置きました。

もう1箇所は、上記したタグの部分です。このアイコンフォントがあると、タグであるということがとてもわかりやすくなると思います。

アイコンフォントに関しては、これからもう少し改良する予定があって、それはアクセシビリティに関する改善です。装飾をしたためにアクセシブルでない箇所が出てきてしまってはいけないので、こちらのサイトを参考にさせていただいた上で改善する予定です↓

• アイコンフォントにラベルを付ける — Website Usability Info
• PUAアイコンフォントのアクセシビリティ – Unreviewed

run_prettify.js を prettify.js に変更

前回のブログデザイン変更時、ソースコードのハイライトツールを Syntax Highlighter から、 Google Code Prettify に変更しました。その際、勘違いして run_prettify.js を読み込んでいるのに、prettify.css も読み込んでしまっていました（prettify.css を _prettify.scss にして、style.css に @import していました）。

run_prettify.js は You can load the JavaScript and CSS for prettify via one URL とあるように、単独で JS と CSS を読み込めます。私の環境では、prettify.css を別途読み込んでおり、CSS が重複してしまうので、prettify.js に変更しました。

今後実施を考えているデザイン変更

• リンク文字色の変更（前回記事参照）
• アイコンフォントのラベル付け
• 記事タイトル一覧ページ作成