Moz - SEOとインバウンドマーケティングの実践情報

アクセシビリティとSEO共通の最適化――「文字サイズと色コントラスト」「リンクとアンカーテキスト」

「テキストのサイズと色のコントラスト」「リンクとアンカーテキスト」について解説

Moz 2016/10/3 7:00 SEO | 解説／ノウハウ

35 39 29

この記事は、前後編の2回に分けてお届けしている。「隠しテキスト」「キーワードの詰め込み」について紹介した前回に引き続き、今回は「テキストのサイズと色のコントラスト」「リンクとアンカーテキスト」について見ていこう。 →まず前編を読んでおく

テキストのサイズと色のコントラスト

ページを美しく見せたいという目的のためだけに、フォントのサイズが小さく低コントラストのテキストが使われることが、よくある。

SEO担当者も、他のコンテンツに影響を与えずにキーワードを追加しようと、低コントラストでフォントサイズを小さくしたテキストを使うことがある。

ちなみに、ここで詳しく取り上げる話ではないが、検索エンジンはフォントのサイズと色を考慮できる。検索エンジンはこちらの考えていることなどお見通しなのだ。

だが、サイズやコントラストはSEOに留まらない問題を引き起こす可能性がある。色覚異常や色覚に問題がある人は、一部の色を区別できなかったり、白黒やモノクロ階調のものしか見られなかったりすることがある（軽度から重度まで程度の差もあるが）。

以下の動画では、色覚に問題を抱えていない人でさえ見分けるのが難しい色のコントラストの例を紹介している。

さらに、高齢であったり、緑内障や黄斑変性など視力に影響を及ぼす病気に見舞われたりしているために視覚に問題を抱えている人は、サイズが小さすぎたり、調節できなかったりするコンテンツや、コントラストが低いコンテンツは認識しにくい場合がある（視力障害についてはここにわかりやすく例示されている）。

こうした場合に支援技術がどのように役立つかを正しく知るために、とてもよく出来た画面拡大ツール「ZoomText」のデモがある。このツールでは、色のコントラストを変えたり、マウスポインターに十字線や大きな円を表示したり、カーソルのフォーカスやアクティブな領域のフォーカスを強調表示したりすることもできる。

法定盲人である学生のキム・ラッセル氏のような人の場合、ZoomTextを使用して12～14倍に画面を拡大してサイトを見るようなこともある。これはとても大きな倍率だ。

フォントと色については、すべきこととすべきでないことがたくさんあるため、ページのデザインを変更しているときや、サイズが非常に小さくてコントラストの低いフォントの利用を検討しているときには、気をつける必要がある。

興味深いツールについてもっと知りたい方や、以下のすべきこと・すべきでないことのリストに載せた以上の詳しい情報は、記事末尾のリソースのセクションを参照してほしい。

テキストのサイズと色ですべきこと、すべきでないこと

テキストに画像を使用しない ―― 拡大表示するとガタガタになってしまうテキスト画像ではなく、可能な限り、実際のテキストを使用してほしい。
情報を提示するときに色のみに頼らない ―― 色がまったくなくなっても、ユーザーが内容を理解できるようにする必要がある。
リンクテキストが赤色のみで示されている場合、赤の識別が難しい色覚異常者にはリンクが見えなくなる可能性がある。しかし、リンクに下線を引けば、リンクが何色であっても識別しやすくなる。
テキストのコントラストをできるだけ大きくする ―― できれば、これにはロゴのテキストや画像内のテキストも含めたい。色のコントラストをチェックできるツールを使用して、前景と背景のコントラスト比を適切な値にしよう。
少なくとも、小さいテキストで4.5:1、大きいテキストで3:1にする必要がある。たとえば、「#757575」は、背景が白色のときに識別できる最も明るい灰色だ。
フォントサイズに相対値を使用する ―― 相対的な割合やemでフォントサイズを指定すれば、ピクセルやポイントといったサイズ指定よりも、適切なサイズ変更が可能になる。
読みやすいフォントを使用する ―― 草書体のフォント、幻想的なフォント（装飾フォント）、等幅フォント（Courierなど）の使用は避け、セリフやサンセリフ系のフォントから選ぶようにする。継続性を考えて、使用するフォントの種類はできる限り少なくしよう。

リンクとアンカーテキスト

スクリーンリーダーのユーザーは、［Tab]キーを使ってページ上のリンクを移動し、リンクのアンカーテキストからリンク先の情報を把握することが多い。

リンクのアンカーテキストはリンクごとに読み上げられ、その後に「リンク」という言葉が追加される。また、ユーザーは［Enter］キーを押すことで、フォーカスされているリンク先に飛べる。

説明を含むリンクや情報を与えるリンク

説明を含むアンカーテキストがあるリンクは、検索エンジンやスクリーンリーダーにとって最適だ。リンク先に関する説明があるリンクは、スクリーンリーダーと検索エンジンの両方にコンテキストを提供する。

[Tab]キーを利用してリンクを移動するスクリーンリーダーのユーザーには、リンク先が何であるのかを説明し、SEOの面では、リンク先ページの内容に関してコンテキストを提供することになるからだ。

後者の場合は、そのフレーズやトピックでのリンク先の検索順位の向上に役立つ可能性もある。

リンクにコンテキストを提供することは、スクリーンリーダーにとっても役立つ可能性がある。下の動画で、ひどいアクセシビリティのウェブページの例を見てほしい。

最初のロゴのリンクをスクリーンリーダーが読み上げる様子が、かなり笑える状態になっている。ほかにも、

画像説明だけのリンク
コンテキストを提供していないためにページ上で視覚的に表示されている関連記事とのつながりがわからない「MORE>>」リンク
SEO担当者にはなじみのマイナス材料要素として知られる悪名高い「click here」（こちらをクリック）リンクや「read more」（詳細を読む）リンク

があることに気づくだろう。

実際のひどいアクセシビリティのページ

この動画と、同じウェブページを正しく作成したバージョンの動画を比較すると、後者のほうが、スクリーンリーダーでも、ヘッダーやリンクを使った操作がはるかにスムースだ。

実際の正しく作成したページ

そして、私が気に入っている実に悲惨なアクセシビリティのウェブサイトを紹介しよう。実際に見なければ信じてもらえないかもしれないので、このサイトのリンクがどうなっているのかを下の動画で見てほしい。

リンクやボタンを疑似的なもので代替してはいけない

これはSEOとアクセシビリティの共通点というテーマに必ずしも関係ないが、アクセシビリティに関してこの記事で注意喚起するべき重大な問題だ。

リンクやボタンを支援技術でクリックできるようにするためには、適切なマークアップを使用してリンクやボタンを作成することが重要になる。

ルールは簡単で、次のとおりだ。

他の場所に移動するためにはリンクを使用する
動作を開始するためにはボタンを使用する

こういった場合に<span>要素や<div>要素を使用してはいけない。これは正しいマークアップではなく、支援技術ではうまく動作しないことがあるためだ。

この違いについて詳しく解説したカール・グローブ氏の素晴らしい記事では、いくつかの例を示しながらこれが問題となる理由をあげてくれている。

パンくずリンク

SEO担当者がパンくずリンクを好むのは、もちろん、それがリンクだからだ。さらに、パンくずリンクにはキーワードを多く含めることができる。

だが、パンくずリンクにコンテキストが提供されていないと、スクリーンリーダーにとっては混乱のもとになる場合がある。

先に取り上げた隠しテキストの手法を使って、「あなたは今ここにいます」などのちょっとしたコンテキストをスクリーンリーダーに提供することを検討しよう。

下の動画で、「you are here」（あなたは今ここにいます）という隠しテキストが読み上げられるているのを、聞いてほしい。

この隠しテキストが記述された実際のWebAIMのページはこちらで見られる

リンクのアンカーテキストですべきこと、すべきでないこと

リンクにキーワードを詰め込まない ―― たとえば、シアトルの情報を伝えるウェブサイトで、新しいコーヒーショップの開店を伝える記事があるとしよう。
この記事で、「コーヒーショップ」「シアトルのコーヒーショップ」「シアトルにあるコーヒーショップ」など考えられるすべてのフレーズにリンクを張り、すべてのリンク先をそのコーヒーショップのウェブサイトにするといったスパム的な行為をしたらどうなるだろうか。
視覚障害のない人にとってもある人にとっても、この記事は面白いものではなくなるだろう。こんなことはしてはならない。
説明を含むリンクを作成する ―― スクリーンリーダーを使用しているときには、[Tab]キーを使ってページ上のリンクを移動できる。だが、すべてのリンクが「こちらへ」と読み上げられたら、特定の情報があるリンク先をそのページから見つけようとしているスクリーンリーダーのユーザーにとって、あまり便利だとはいえない。
リンクとボタンの適切なマークアップを使用する ―― <div>要素や<span>要素はリンクでもボタンでもない。href属性がなかったり、ハッシュタグのリンク先が空白（href="#"）だったりする空の<a>アンカーは、どれも問題を引き起こす可能性がある。
パンくずリンクに説明を加えることを検討しよう ―― スクリーンリーダーのために、「あなたは今ここにいます」などのちょっとした説明用の隠しテキストを、パンくずリンクの前に加えてほしい。