ここでは、自分のサイト内におけるナビゲーションツールとしてのリンクについて焦点を当てたいと思います。リンクの張り方の善し悪しで、リンク先を参照してもらえるかが決まりますし、サイト全体の使い勝手の善し悪しにもつながります。
| テキストリンクに勝るモノはなし | リンクに画像を使うことについて |
| リンクアンカーの大きさ | テキストリンクの下線について |
| リンクの色 （2001-6-4追加） | Click Here?? |
| 工事中へのリンク | プルダウンメニューの功罪 |
| その他JavaScriptを使ったリンク | 一歩進んだリンクの貼り方 |
ユーザビリティ＆アクセシビリティを最大限考慮した場合、リンクを張るのに、最も適しているのは何か？
これは、テキストです。
なぜなら、テキストリンクには以下のようなメリットが存在するからです。
特に重要なのが３番目のメリットです。リンク先のページを既に閲覧したかどうかという情報が訪問者に伝わることで、無駄にサイト内をうろつくことなく、スムーズにWWWサーフィンを楽しむことが出来るからです。
リンクに画像を使うのは、ページに彩りを添えるという意味では有用です。テキストばかりのページはどうしても味気ないものになってしまいますし。しかし、リンクに画像を使うのであれば、テキストブラウザの利用者、画像を読み込まない設定にしている人や、視覚障害者に対する配慮が絶対必要です。その配慮の仕方は、ズバリ
「alt属性を指定しておくこと」
です。alt属性を指定しておけば、画像をロードしない設定にしている場合にも、画像部分で×印に真っ白(Internet Exploerの場合）なんてことはなくなり、その部分にalt属性で指定した内容が表示されます。テキストブラウザであるLynxであれば、URLではなくて、alt属性で指定した内容が反映されます。音声ブラウザでは、alt属性の内容を読み上げてくれます。
イメージマップ（画像の特定領域をクリックするとリンク先へジャンプする）でも、IMG、AREA要素で、alt属性を使えば、画像は表示できない場合でも、リンクとして機能させることができます。
ちなみに、Internet ExplorerやNetscapeで画像をロードする設定の場合は、ツールチップとしてalt属性の内容が反映されます。ということで、高解像度の設定で画像が小さくなってしまって画像に乗せた文字が見えにくくなったり、イメージマップ上のリンクを探す時にも役に立ちますね。
画像によるリンクでalt属性を使うときは、リンク先に関する説明をきちんとしましょう。
それと、画像にリンクを張るときは、border属性の値を0にするようにして下さい。はっきり言って、画像にリンクの枠がついているのは、見栄え上問題があります。特に透過GIF画像の場合は、なんのために透過画像を使っているのかわからなくなります。
サムネイル（小さな画像）から大きな画像へのリンクになる場合は、説明文があった方がWWWサーフィン初心者には親切です。
ただし、画像によるリンクでは、リンク先のページが訪問済みかどうかというのは判らないという重大な欠点があります。ページを訪れたかどうかというのも、訪問者にとっては大切な情報です。この点をカバーするのであれば、小さくても良いのでテキストによるリンクが必要になります。
参照記事：画像のalt属性について （当サイト）
テキスト、画像、いずれにリンクを張る場合でも、配慮しておきたいのが、リンクアンカーの大きさです。
リンクアンカーの大きさが小さいと、カーソルをより正確にリンクアンカーへ合わせないと、リンクとして機能しなくなります。
これは、手に障害があったり、パソコン初心者でポインティングデバイスを上手に使いこなせない人にとっては、カーソルを合わせるだけで一苦労します。
テキストについては、１文字だけにリンクを貼るのではなくて、３文字以上は欲しい所です。また、極端に小さな文字にリンクを貼った場合、これまたポイントする部分が小さくなってしまいます。文字のポイント数で言えば、9pt(Windows）は欲しい所です。
また、画像については極端に小さなサイズの画像（アイコン）にリンクを設定するのは困りものです。20px
× 20px以上は欲しいところです（数値は作者の主観ですが）。
最近では、リンクの下線はじゃまだ！と言って、テキストリンクの下線をわざと外しているページも増えてきました。そのかわり、マウスを文字列に合わせると、背景色と文字色が変化したり、カーソルが変化してリンクであることが判明する仕掛けにしてあることが多いです。
確かに、リンクが多いと、下線でサイトがごちゃごちゃしている印象を受けるのも事実です。
しかし、よく考えてみて下さい。自分が超・初心者だった頃、何を目印にWWWサーフィンをしていましたか？間違いなく、リンクの下線でしょう。文字の下に下線があれば、よそのページ（サイト）を参照することができるというのは、WWWサーフィンの基本中の基本です。
多少ごちゃごちゃしていようが、ナビゲーションの良さという観点から言えば、テキストリンクの下線は必要だと思います。
で、ついでに言っておきますが、リンクでない文字列に対して、u要素やスタイルシートで下線を引くのはやめておきましょう。訪問者がリンクだと思ってクリックしても他ページへジャンプしないと混乱してしまいますよ。
テキストリンクの色に関してですが、基本的な色というのが決まっています。ハイパーリンクは青系、表示済みのリンクは紫系というものです。
でも、表示済みでないリンクの色が青というのは、生理学的に言えば、目立たない色なんですよね・・・。参照先として目立たせたいハイパーリンクなのに。目立つという意味では、黒や赤の方がより優れていますが、すでに定着してしまった以上、いまさらブラウザの基本設計として変更させることはできないでしょう。
もちろん、サイトを作るときにリンクの色を変えることはできますが、変えてしまうと少しばかりナビゲーションの良さは落ちてしまいます。ただ、形式上（下線が引いてあるか、ボタン状になっているか等）リンクがリンクであることがきちんとわかるかどうかの方が余程重要です。
色に関しては、ハイパーリンクと表示済みのリンクの色を別にして、訪問済みかどうかをきちんと訪問者に理解させることが大切です。色設定の基本は、背景色に対してより目立つ方にハイパーリンク色、ハイパーリンクよりやや目立たない色を訪問済みリンク色とします。
ただし、ハイパーリンクに紫系を使ったり、訪問済みリンクに青系の色を使ってしまうと、訪問者としては、デフォルトの色から受けるイメージがあるので、あべこべに解釈されてしまう可能性が大きいです。この点は注意しましょう。
(この段落は2001/6/4追加）
また、最近、リンク色と訪問済みリンク色を全く同じにしていたり、色の区別がほとんどつかないサイトもちらほら見かけますが、これでは、テキストリンクの良さを殺していると言っても過言ではありません。
背景を黒にするなと言われることもありますが、リンクに関して言えば、標準状態では青や紫が見にくいからなのです。
正直言うと、この項は書いている本人にも耳が痛い話で、個人ページでは、リンク色がバラバラというちょっと困った設定にしてしまってるんです(^-^;
未だに、"Click Here" や「ここをクリック」なんて言葉で、リンクを張っているサイトもありますが、、、勘弁していただきたいモノです。同様に、「赤い文字の所をクリック」なんていうのも同様。音声ブラウザで、このような内容を読み上げられても訪問者は困ってしまいます。色でのリンクだと、音声ブラウザ以外にも文字ブラウザでも訪問者が困る羽目になります。リンクは内容がわかるようにして下さい！
穴掘りしている工事のおじさんのイラストやアニメーションがあれば、致命傷。
ページをロードする時間と金が無駄なだけなので、やめておきましょう。せっかくリンクをクリックしたのに、実は工事中なんてことほど、がっくり来ることはないです。
サイトは、日々とまでは言わなくても進化していくという意味で、永遠に工事中なのですから。
プルダウンメニューを使ってコンパクトにリンクをまとめているページも見かけます。ナビゲーション関係で場所をとらないので、その分だけ画面あたりのコンテンツを充実させることができるというメリットがある一方、一見してどんな機能があるのかわからないと言う欠点もあります。
さらに致命的な欠点として、プルダウンメニューはJavaScriptを使用していますので、JavaScriptを使わない設定にしていたり、使えないブラウザでは、全くの役立たずリンクになってしまいます。
プルダウンメニューを使いたいのであれば、下の方にでも、小さくてもいいのでテキストリンクをつけて下さい。そうすれば、スプリクトが使えなくても、WWWサーフィンを楽しむことができますよね。
よく使われるのが、ボタンを使ったものですが、おすすめできません。理由はプルダウンメニューと同様です。
どうしても使いたいというのであれば、テキストリンクもつけて下さい。というより、noscript要素できちんとリンク指定をして下さいね。
といいつつ、これまた作者も頭の痛い状態になりつつある・・・別窓閉じるのに、JavaScript使っている関係で、注意書きを書いてますけどね。
対応しているブラウザの種類が少ないのが難点ですが、リンクタイトルを付けることで、テキストリンクでも、訪問者がリンクを選択前にリンクの短い説明をポップアップさせることができます。すなわち、画像にalt属性をした時と同様の働きを持つようになります。
対応していないブラウザでは、リンクタイトルの表示がされないだけで、ページが見られなくなるなどの障害は出ないので、安心して使って下さい。
ただし、テキストリンクで、ある程度内容が理解できるようにしてあることが前提です。あくまで、リンクタイトルはテキストリンクの補助でしかありませんので。
テキストリンクと全くテキストをリンクタイトルとして指定してしまったり、文脈上リンク先が判明している場合は意味がないばかりか、かえってユーザビリティが落ちてしまいますので、要注意。
対応していないブラウザもありますが、a要素やフォーム等で、accesskey属性を指定しておけば、キーボードショートカットができるようになります。Windows版Internet Explorer4以上だと、「altキーと指定したキーの同時押し」で、実現させることができます。Macの場合は、対応ブラウザでコントロールキーと指定したキーの同時押しです。また、tabindex属性を使えば、tabキーを押したときにフォーカスの移動順序を自由に設定することができます。フォーカスが当たったところで、Enterキーを押せば、指定したリンク先へジャンプする仕組みです。この属性は指定しなければ左上から順になります。
これによって、ポインティングデバイスが使いにくい、単にマウスを使うためにキーボードから手を離すのが嫌だという人にとっては、ずいぶんと操作がしやすくなります。また、運動障害があって、マウスの微妙な操作が困難な人にとっては、キーボード操作はWWWサーフィンの助けとなります。
ただし、キーボードショートカットを使うときは、ショートカットキーを明記するのを忘れずに。でないと、役立たずになってしまいます。それと、いくつかのキーは、ブラウザでのメニューキーとして割り当てられていますので、これらのキーは使わない方が無難です。少なくとも、accesskey対応ブラウザで使われているキーは外しましょう。
なお、Windows版の主要グラフィカルブラウザでのショートカットキーは以下の表の通りです。他のOSに関する情報歓迎します。
| ブラウザ | ブラウザ側で使われているショートカットーキー |
|---|---|
| Internet Explorer4.x以上 （accesskey属性対応） |
F,E,V,A,T,H＋D |
| Netscape6.x （accesskey属性対応） |
F,E,V,S,G,B,T,H |
| Netscape4.x （accesskey属性未対応） |
F,E,V,G,C,H |
| Opera6.x （accesskey属性未対応） |
F,E,V,N,B,M,S,W,H＋P |
この記事を書いた当初（2000年）は、accesskeyに対して肯定的な立場を取っていましたが、その後いろいろと考えさせられる機会があって、考え方を変えております。一考・accesskey&tabindexをお読み下さい。（2004-5-6追記）
携帯電話対応の場合、アクセスキーをつけていないと、操作性がかなり悪くなりますので、是非つけておいて下さい。PCとは異なり、アクセスキーとして使えるのは０〜９までの数字のみです。ちょっとした気遣いで、使いにくい携帯電話ブラウザ用のWebサイトの使い勝手を少しは向上させることができますよ。
（補足） 機種によっては、#,*キーも使えるようですが、あくまで一部の機種のみです。基本的なナビゲーション部分は、数字キーのみにしましょう。
リンクに関してはご自由にどうぞ。