リンクテキストを考える

ここではHTMLでいうところのA要素の内容、つまり始点アンカーのテキスト(以下リンクテキスト)を再検討する。結論からいうと終点アンカーとなる参照先を文脈に沿って的確に表現したものが、リンクテキストとして最も相応しいが、主に次の四つの形式がありうる。

終点アンカーのタイトルをリンクテキストとするケース

例1. 文書タイトルが不適切な場合は?
<a href="http://www.w3.org/MarkUp/Guide/">
Getting started with HTML (Dave Raggett's Introduction to HTML)
</a>

リンクテキストは、終点アンカーを的確に表現したものであれば、そのリンクがどこに繋がっているか一目瞭然であり、優れたハイパーリンクを形成する。特に終点アンカーの文書タイトルは、リンクされているリソースが何であるかを明確に表す可能性が高い為、まず検討すべきである。終点アンカーに不適切なタイトルがつけられている場合には適切なものに変更する。以下その例を示す。

例1の終点アンカーは著名なHTMLの入門だが、文書タイトルが不適切である。『Dave Raggett's Introduction to HTML』というシリーズ名がタイトルとなっているためこれを適切に修正し、より具体性のある「Getting started with HTML」の後に括弧でシリーズ名 「Dave Raggett's Introduction to HTML」を続けた適切なタイトルをリンクテキストとしている。さもなくば、『Getting started with HTML』と全く同じタイトルの別の文書『More advanced features』との区別がつかない。

始点アンカー側のハイパーテキストから見た終点アンカーの性質をリンクテキストとするケース

例2. ナビゲーションリンク
<a href="./html4.html"
    title="更に制約されたHTML4.01リファレンス"
    rel="contents">目次</a>

次に良くみられるのは、リンクする文書からみた終点アンカーの性質をリンクテキストとするパターンである。これは主にナビゲーションリンクとしてのA要素に用いられる手法で、リンクタイプをリンクテキストにしていると言い換えることもできる。

例2では、その文書からみて目次となる文書へのハイパーリンクを記述している。この場合「目次」という文字列がそれのみで終点アンカーを適切に表現しているとは言いがたいが、文脈上は終点アンカーが何の「目次」であるのかは自明である。ナビゲーションの役割を持つハイパーリンクは、文書タイトルが明示されていなくてもリンク先が何であるか文脈上自明である。そのようなときには、終点アンカーのタイトルを用いず、終点アンカーとの関係性を簡潔に明示するだけで十分であろう。例2ではそれが「目次」という文字列である。

さらに、例2では二つの属性が用いられている。

これらの属性は、ハイパーテキストを利用する「人間」が直接読むものではなく、基本的にその代理人(User Agent/WWWブラウザ)が利用するメタデータである。利用者は、間接的にこれらを利用することができる。ナビゲーションリンクの場合、これらの二つの属性を併用することで、より利用価値の高いリンクを形成可能となる。例えば例2の場合、ブラウザは目次というボタンをナビゲーションバーのような領域に形成し、ポイントしたときに「HTMLチュートリアル 目次」という文字列をポップアップするかもしれない。そして/あるいは、サイドバーのような領域にこの目次を表示し、並行閲覧を可能にするかもしれない。

文脈上の表現を内容とするケース

例3-1. 同一の異なる表現の二つの文書へのリンク
<a
    href="URI"
    title="Jakob Nielsen博士のAlertbox">
ページ内リンクの使用は避けよう
</a><a
    href="URI"
    hreflang="en"
    title="Avoid Within-Page Links (Jakob Nielsen's Alertbox)">
原文/英語
</a>

終点アンカーのタイトルが冗長となる場合、文脈上の表現を用いることもできる。前節のケースと同様、終点アンカーの内容が文脈上自明であることが条件である。そしてやはり前節同様、終点アンカーのタイトルはtitle属性に示しておくべきである。こうすることで、文脈を離れたときにも利用価値が出てくる。

例3-1では(原文/英語)という文字列で文書の原文にリンクしているが、内容は文脈上十分予測できるし、確かな文書タイトルはtitle属性にも示されているので、文脈を離れたときにも利用価値のあるリンクとなっている。

例3-2. 要素内容が述語、終点アンカーがその目的語
作り始める前に「そういえばそんな名前のアドオンがすでにあったような気がするんだが……」と思って「View Source in Tab」で検索してみたけど見あたらなかったのでそれなりに作り込んでさあそろそろ公開するか、と思ったところでふと「Open Source in Tab」で検索してみたら<a href="http://xxsionxx.blog17.fc2.com/blog-entry-100.html"> あっさり見つかったし </a>

例3-2のように終点アンカーを目的語にとる述語をリンクテキストとするケースは、文脈上ある程度終点アンカーについての予測はつくが、裏切られる可能性が低くない。例3-2は、予測される終点アンカーは文脈からいって「Open Source in Tab」という名前のFirefoxアドオンであり、読者はダウンロードが開始されるかどうか警戒するかも知れない。実際はウェブログの1エントリなのだが、それを確実に予想できるのはこの著者のリンク癖を知っているものだけであろう。また、他者のリソースを参照する方法として、主観的表現でラベル付けをするのは失礼である。

コマンドリンクのコマンド名を内容とするケース

例4-1. 注文の確定
<a href="servlet.jsp">注文を確定する</a>

コマンドリンクは、ハイパーテキストの参照機能というよりは、クライアントサイド、またはサーバサイドのプログラムを開始するトリガーの役目を果たすリンクである。プログラムにリンクしていると言い換えることもできる。このコマンドリンクの場合、何が起こるかをA要素の内容とし、十分な注意を喚起すべきである。

例4-1が機能するにはJavascriptに依存する必要がある。明らかにフォームとしてデザインすべき要素であろう。文書指向ウェブデザインは基本的にウェブアプリケーションを扱わない為、これ以上の詳細は述べないし、コマンドリンクは推奨しない。特にハイパーリンクの意味(セマンティクス)を破壊するようなハイパーリンクの表面上の「機能」を利用したものは避けるべきである。

例4-2. 移動
<a href="#top">ページ最上部へ移動</a>

よくある例として「ページ最上部へ移動」のようなハイパーリンクの好ましくない応用を挙げておこう。これは何を参照しているわけでもなく、ハイパーテキストを関係付けるというハイパーリンクのセマンティクスとは大きく異なる。ハイパーリンクが参照ではなく、どこかにジャンプするものであると誤解しているのでなければ、こういった例4-2のような誤用はやめることだ。

例4-2はページ最上部という位置にリンクしていると考えることも「可能」である。位置もリソースであるから、リソースを参照しているという意味において正しくリンクではある。しかしながら、問題はそのように「考えられる」ことではない。リンクを作成した人間の意図の問題である。位置なら位置で、それを参照する目的で設けられたリンクであるのかどうかが問題なのである。例4-2のようなリンクの多くは違うであろう。文脈上、何の関係もなく現れるのではないだろうか。文書の中で、何かの主張に必要な参照行為として明示されたリンクでないとすれば、それは文書指向においては本質的にリンクとは異なる「hack」であると考えるのである。位置にリンクしているというのは後付けの屁理屈である。何故なら著者の参照意思が伴っていないからだ。

さて「ページ最上部へ移動」というのは、「戻る」と全く同じくブラウザが提供すべき機能であり、単なる一ウェブサイトが提供しなければならないものではない。例えばブラウザの多くが「ページ最上部へ移動」の機能をスマートに備えたとしたら、邪魔で滑稽なものとなるだろう。殆どのウェブページにはこのような馬鹿げた機能はないので、閲覧者はスクロールバーをドラッグすることに慣れており、有難がるユーザがいるとしても、ウェブページの単純性を損ねてまで提供すべきかどうか、両者を天秤にかけるべきである。

title属性に補足的な情報を付加

例2. title属性で参照先を明示
<a href="http://www.google.com/"
    title="Google">よく使う検索エンジン</a>

title属性に参照先の文書タイトルを示し、A要素の内容は文脈に沿ったものにすることもできる(例2)。文脈上、A要素の内容を参照先の文書タイトルにすることが難しい場合に限られた次善の方法である。

典型的な失敗例

例3(失敗例). 「ここをクリック」
<a href="http://www.google.com/">ここ</a>をクリック!

典型的なまずい例「ここをクリック」は、参照先に関する情報が欠如しており、始点アンカーが何を参照しているか分からない。このようなハイパーリンクは印刷、読み上げ、リンク収集等のメディアにおいて使い物にならない互換性の低いハイパーテキストの主な原因となるであろう。互換性の欠如はウェブデザインの失敗を意味する

ページ内リンクについて

同一文書内の終点アンカーを参照すべきではないという考え方もある。仕様上は許されているが、 HTMLにおいてid属性やname属性をもった要素を終点アンカーとしてフラグメント識別子のついたURI参照でリンクする場合、そのハイパーリンクは終点アンカーの参照ではなく、その「位置」を指し示すことになるというのがスクリーンメディアにおける事実上の標準になってしまっている。これはハイパーリンクのセマンティクスとは異なっており、その欠陥はユーザビリティ上の問題として顕在化している。詳しくはNielsenによる指摘ページ内リンクの使用は避けよう原文/英語)を参照のこと。例6のようなリンクは可能なら避けたい。

例6. ページ内リンク
<p>これは<a href="#NOTE1">例文</a>である。
...
<p id="NOTE1"># 例文とはうんぬん

しかしユーザビリティ上の問題はハイパーリンク実装側の問題なのであって、このようなリンクの明示自体に不当性はないとも考えられる。実際、もともとハイパーリンクのデフォルトの挙動が読み上げ位置の移動であるスクリーンリーダのようなメディアでは全く問題を起こさない。厳密に言えば、スクロールによる移動というリンクトラバーサルに問題があるのだ。したがって、スクリーンメディアにおいてはブラウザによるデフォルトのリンクトラバーサルをJavascript等で上書きしてしまえば良い場合もあるだろう:

例7. リンクトラバーサルを上書き
<p>これは<a href="#NOTE1"
onclick="popup(this.href); return false;">例文</a>である。
...
<p id="NOTE1"># 例文とはうんぬん

popup(this.href)は、href属性に示された終点アンカーを何らかの方法でその場でポップアップする例である。popup関数は適当なものが別の場所で定義されているものとする。return falseで実質的にリンクトラバーサルをキャンセルしている。このようなイベントハンドラ属性にスクリプトを書く必要はなく、これは一例である。但し、イベントハンドラを使う必要はないというのは、javascript:スキームを使ってよいということではない。文書のロード完了時にaddEventListenerメソッドなどで与えることもできるという意味である。javascript:スキームをURIに指定するということは、ハイパーリンクそのものを消去してしまい、リンクトラバーサルのみを指定することである。したがってそのリンクトラバーサルを実行できない環境では、リンクを表現する代替手段がなく、ハイパーリンクが存在しない。「href属性は終点アンカーのURIを示す」という基本に念を押しているに過ぎないが、javascript:スキームを使用してはならない。リンクを表現する上では何時いかなる場合も劣性な方法である。例外として、例えばブックマークレットの提供など、ハイパーリンクではないことが明確な場合はこの限りではない。

webmaster@jintrick.net
Published: 2008-01-10 ,Updated: 2007-11-08