ハイパーテキスト(リンク)が設定されている文字列や画像等の事を、リンクアンカーもしくは、ただ単にアンカーと言います。htmlでは、開始タグ<a href="リンク先のURI">と終了タグ</a>の間に挟まれた部分が、リンクアンカーとなります。
一般的な視覚系ウェブブラウザー(インターネットエクスプローラー等)は、ユーザーが特に設定を変更していない場合、未訪問のアンカーテキストの部分は、アンダーラインを付けて、文字の色を青色に変えて表示(レンダリング)します。同様に訪問済みのリンクアンカーは、アンダーライン付きの紫色の文字色で表示されます。
このようなウェブブラウザーの表示は、ページ製作者側が、htmlの<BODY>要素のlink属性、vlink属性を使って表示色を指定することで、比較的簡単に変更することができます。あるいはCSSの擬似クラスを記述することによって、表示色を変更する事や、アンダーラインを出さないようにする事も可能です。
しかしこのようなリンクアンカーは、サイト製作者側が意図的に指定しない限り、ユーザー側のウェブブラウザーによって決められた一定のルールに従って表示されます。ユーザーは、普段利用しているウェブブラウザーの表示ルールに最も慣れ親しんでいます。
したがって、リンクアンカーの表示方法を、サイト製作者側が変更してしまうと、ユーザーによっては操作にとまどってしまったり、未訪問のリンクと、訪問済みのリンクの区別がわかりにくくなってしまい、混乱の原因になる場合があります。
リンクアンカーの表示方法は、特に理由が無い限り、サイト製作者側で指定を行うのは避けて、ユーザーそれぞれのウェブブラウザーによる、ユーザー自身のルールに委ねる方が、ユーザーにとって利用しやすくなります。
上記の一般原則の例外として、まずはデザイン上の必要性があげられます。
例えば、青色や紫色が、その企業や団体にとって特に重要な意味を持っている場合があります。ある企業にとって上記の2色、もしくはそのどちらかの色が、対外的なイメージカラー、すなわちコーポレートカラーとなっている場合、他の媒体(テレビコマーシャルや、パンフレット、ノベルティグッズ、名刺、ポスター等)は、当然のことながら、そのコーポレートカラーを基調としたデザインを用いられる事が多くなります。
このような場合は、その企業のウェブサイトも、コーポレートカラーを基調としたデザインを用いる方が、ユーザーにとっても、自然に受け入れ易く、より利用しやすいサイトになると考えられます。
その他にも、例えば「海」や「水」に関する情報を扱っているサイトの場合は、サイトのベースカラーには、ブルーや水色などの青系の色を用いられる方が、より自然な感じがするかもしれません。
同様に京都パープルサンガをテーマとしたサイトの場合にもやはり、サイトのベースカラーは紫色である方が、なんとなく、しっくりきます。
ベースカラーは、サイトロゴやイメージ画像、ページの背景色や背景イメージなどに積極的に使用されます。
背景色や背景画像を用いる場合には、特に注意が必要です。背景色として、白又は黒以外のカラーを用いる場合は、前景色は背景色に対して、一定のコントラスト(特に2色の明度・色相の差)を確保しないと、可視性(見やすさ)や可読性(読みやすさ)が低下してしまいます。
例えば背景色として青色を用いる場合、リンクアンカーの表示色については、サイト製作者側で、あらかじめ別系統の色を指定しておかないと、青色の背景に青色の文字が重なって、ユーザーからは全く文字が読み取れない状態になる場合があります。
背景色とリンクアンカーの文字色が重なって、識別不能になっています。
リンクアンカーの表示色を変更しています。青色の背景に対して、未訪問リンクには濃い緑色を、訪問済リンクには、やや淡い緑色を指定しています。
背景画像の一部とリンクアンカーの文字の一部が重なって、識別不能になっています。
リンクアンカーの表示色を変更しています。青色の背景に対して、未訪問リンクには濃い赤色を、訪問済リンクには、やや淡い赤色を指定しています。ただし赤色の文字は、クライアントによっては、敬遠される場合があるので注意してください。
上記の配色パターンは一例です。充分なコントラストが確保できるのであれば、他の配色パターンでも特に問題はありません。ただし色彩については、モニターのクオリティーや、身体的な特性(色覚異常など)等のユーザー特性も充分に考慮するようにしてください。
未訪問リンクと訪問済リンクの表示カラーは、できるだけ同系統の色を指定する方が無難です。なぜなら、赤色系統のテキストと緑色系統のテキストという風にしてしまうと、そのサイトに初めて訪れたユーザーが、それぞれのアンカーテキストに対して、それが未訪問のリンク先であるのか、あるいは既に訪問済のリンク先であるのかを判断する事が、難しくなります。
さらにリンクアンカーのカラーを変更する場合は、サイト内で統一するようにしてください。ページを移動する度にコロコロ変わるようでは、ユーザーはやはり混乱してしまいます。
インターネットエクスプローラーやネットスケープナビゲーター、オペラ等、一般的な視覚系のウェブブラウザーは、リンクアンカーとなっているテキストを、ユーザーが認識しやすいように、特別な表現でレンダリングする機能を備えています。デフォルトの設定の場合、アンカーテキストとなる文字列は、アンダーライン付きの青色のフォントカラーで表現します。これは、ほとんどのウェブブラウザーに共通した仕様です。
そのため、ほぼ全てのユーザーが、アンダーライン付きの青色のテキストを見た場合、反射的にリンクアンカーであると考えます。
したがってリンクアンカー以外の文字列を、アンダーライン付きの、青色のフォントカラーで表示するのは、絶対に避けてください。ユーザーがリンクであると誤解して、無駄なクリックをしてしまったり、自分のパソコンに何か異常があるのではないかと不安に思ってしまいます。
たとえアンダーラインが無い場合でも、青色のフォントカラーは、リンクであると誤解される恐れがあります。また青色以外の場合でも、他とは違う文字色にしている場合や、アンダーライン付きのテキストは、リンクアンカーであると誤解される可能性があります。
本文中の特定の文字列(重要な語句、キーワード)等を強調したい場合は、まずは論理強調の<STRONG>要素でマークアップするようにしてください。
逆に、サイト製作者側がハイパーテキストを設定しているリンクアンカーは、よほど特別な理由が無い限りアンダーラインを非表示にしたり、青色以外のフォントカラーで表示するのは避けてください。
理由は前項と全く同じです。
アンカーテキストを青色以外のフォントカラーで表示したり、アンダーラインを非表示にすることで、ユーザーは前項で述べた誤解と、全く逆の判断をしてしまうために、リンクアンカーを見落としやすくなります。
即ち、ユーザーがリンクを見落としやすくなるということは、せっかく用意したユーザー導線が全く機能しなくなるということであり、ウェブマスター側にとっては、実に重大な損失を意味します。
リンクアンカーとして、イメージ画像を利用する場合でも、ユーザーがリンクアンカーであることを、認識しやすくするための工夫は重要です。
例えば、画像をリンクアンカーにしている場合、プレーンな角丸矩形よりもエンボス加工されている場合
の方が、ユーザーはリンクのためのボタンであることを、より理解しやすくなります。
また単なる商品写真よりも、写真の文字をのせている場合の方が、ユーザーはリンクアンカーとして認識しやすくなり、さらにユーザー側もある程度リンク先のページの内容を把握しやすくなるというメリットがあります。
未訪問のリンク先と、訪問済のリンク先を区別するのは、ユーザーが快適にブラウジングするための、ウェブブラウザーの最も重要な機能のひとつです。したがって、前述のような特別な理由から、<BODY>要素のlink属性や、vlink属性を、ウェブマスター側が指定する場合でも、未訪問リンクと訪問済のリンクを同色に設定することは避けてください。
例1は、アンカーテキストとアンカーテキストの間に、約2文字分のスペースがあり、一見すると特に問題無さそうに見えますが、スタイルシートの記述によって、強制的に間隔(マージン)を取って表示させているだけで、htmlソース的には、何の区切りもありません。このようなケースは、何らかの理由で、製作者側の意図したスタイルシートがサポートされない状況では、 素晴らしき日々西部警察探偵レミントン・スティールと表示されてしまいます。
例2は、アンカーテキストとアンカーテキストの間が、「 ・ 」だけで区切られています。しかしほとんどの音声ブラウザーは、「・」や「|」のような記号を読み飛ばしてしまうために、音声のみでアクセスしているユーザーには、「きょうとふしがけんおおさかふ」のように、連続して読み上げられてしまうために、それぞれが別々のリンクアンカーであることが、わかりにくくなってしまいます。
ウェブコンテンツアクセシビリティガイドライン1.0では、リンクとリンクの間には、include non-link, printable characters (surrounded by spaces)
前後をスペースに囲まれた、非リンクで、印刷可能な文字を入れておくことが推奨されています。
テキスト・画像に関わらず、隣接するリンクアンカー同士は、充分な間隔をあけるようにしてください。
リンクアンカーとリンクアンカーの間に、充分な間隔(マージン)がないと、ユーザーが操作を誤って、異なるリンクアンカーをクリックしやすくなります。
動作環境・使用方法のご案内はこちら
メールでのご注文はここをクリック
メール
動作環境・使用方法
メールでのご注文へ
メール
アンカーテキストは、具体的にリンク先の内容が理解できるようにする。
アイコン画像とテキストを併用する場合は、画像のalt属性は、”□”(空)にする。(二重に読み上げられるとかえって聞き取りにくくなるため)
リンクアンカーテキストに、ここ、こちら、click hereなどの、指示代名詞のみを指定すると、特に音声ブラウザーでアクセスしているユーザーにとっては、リンク先の内容が把握しにくくなってしまいます。
俗に、here症候群と呼ばれるケースです。
インターネットエクスプローラーには、ウェブページ内のリンク先の一覧だけをまとめて印刷する機能があります。(「ファイル」→「印刷」→「オプション」タブをクリックして、「リンクの一覧を印刷する」というチェックボックスにチェックを入れてください。)また、音声ブラウザーの中には、ウェブページ全体の中から、リンクの部分だけをピックアップする機能があります。
もしもユーザーがこれらの機能を利用しようとした場合に、抜き出されたリンクのラベルが、ここや、こちら、click hereでは、リンク先の内容が全く理解できません。したがってユーザーにとって、全く価値のない情報になってしまいます。