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

ウェブサイトを利用する際の方法としてマウスやタップがありますが、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 ページにも書いたとおり、私がブログを書いている理由の一つに、困っている人の助けになりたいというものがあるので、困っている人が凄く古い記事をガッツリ参照して更にドツボにはまることが無いように、記事が書かれた日付というものを重視するようにしています。

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

リンクテキスト色を修正した話と Colour Contrast Analyser のカラーピッカー機能を発見した話

以前の記事「0045-140827 文字色のコントラスト比を確認したら、リンクテキストの色を修正することになった – mzmjp.net::blog」で書いた通り、リンクテキスト色のコントラスト比が WCAG2.0 の 等級AA にあたる「最低限のコントラスト」すらクリアしていない問題がこのブログでありました。

今回はこの問題を解消したことについてのメモ書きと、上の記事内で Colour Contrast Analyser というアプリケーションについて書いたことの訂正です。

リンクテキスト色を修正した話

ずっとほっぽらかしていたリンクテキスト色修正。なんで放置していたかというと、色の決め手が無かったからです。青系の色にするのは決まっていたのですが、どんな色がいいんだろうと考えていました。

で、リンクテキスト色について参考になるページは無いかなと探していたところ、クリック率の高いテキストリンクの色は?【2013年版】 | ウェブ力学というページにたどり着きました。こちらのページでは、「有名なサイトではリンクテキストにどんな色を使っているのか」が表でまとめられています。

こちらを参考にして、いくつか試した結果、リンクテキスト色は color: #1122cc; にしました。Google の2013年1月時点でのリンクテキスト色です。問題だったコントラスト比は“8.60”になりました。これで問題解決です。

Colour Contrast Analyser でカラーピッカー機能を発見した話

コントラスト比の問題を書いた記事内で、コントラスト比を調べるアプリケーション“Colour Contrast Analyser”のことを書きました。その時は気づかずに「スポイトのアイコンが無いので、カラーピッカー機能が無い」と書いてしまったのですが、数日前にカラーピッカー機能を発見しました。以下に、どうやって色をピックするかを書いておきます。気づいてしまえば、なんてこと無いことでした。。。

Colour Contrast Analyserの初期画面

Foreground(前景色)の Colour select という項目の色を表示している部分をクリックすると、“Colors”というウィンドウが出てきます。

色を調節するためのウィンドウ

このウィンドウの左下の部分にスポイトがありました。そのアイコンをクリックしたら、無事カラーピッカーとして動いてくれました。何で前にさわった時は気づかなかったんだろう。。。