ハイパーリンクをより良い物に

本質を理解する

最終更新
2002-09-08T18:39:02+09:00
  • 「リンクする」とはリソースとリソースの関係を明示すること

リンク先にジャンプするのはブラウザが行っていることであって、この現象はリンクする行為と直接関係がありません

問題点を指摘されるリンクの用い方というのは、必ずと言っていい程この基本を蔑ろにしたものとなっています。従って、極めてシンプルなこのリンクの本質を知っておけば:

  • 間違えた用法でアクセシビリティを低下させてしまう

といった事態を自然に防ぐことができる筈です。

簡単な例を挙げます。「ココをクリック」の「ココ」という文字列をアンカーにする行為は、しばしば批判されます。しかし「なぜ間違っているのか」については個々の具体的な問題としてしか説明されません。これでは、いつまで経ってもこれと類似した間違った方法でリンクしてしまう方が後を絶たないわけです。

この「ココをクリック」の問題点は実はたった一つです。もといそう考えるべきです。

この例では、「ココ」という文字列と、終点となるリソースが関係付けられていることになります。つまり、これをやってしまった制作者は、終点リソース(例えば http://www.google.com/ 等)と、「ココ」という文字列を関係付けたことになってしまっています。しかし、制作者にそのような意図は無い筈です。

要するにこれが問題点です:

  • 関係付ける意図が無いにもかかわらず、関係付けてしまった

何故このようなことをしてしまうのでしょうか。リンクを次のように考えてみると納得できます。

  • リンクはリンク先にジャンプさせる為のものである

これが、数々の間違いの元凶となる考え方です。「ココ」をクリックさせて「ジャンプ」させる為に、この制作者は「ココ」という文字列をアンカーにしたのです。これは極めて自然な行為であり、疑いなど抱く筈がありません。

  • リンクは「ジャンプ」させる為のものではなく、「関係を明示する」為のものである

このように覚えて下さい。

リンクしたいリソース(例えば http://www.google.com/)と一体何を関係付けたいのか、この一点をきちんと意識しておくことで、大抵のミスは防ぐことができます。

ハイパーリンクにおいては、ある文字列とリソースの関係を明示することしかできません。http://www.google.comと最も関係の深い文字列は「Google」ではありませんか? ですから:

と、このように両者(「Google」と「http://www.google.com」)をリンクさせるのが自然です。「ココ」と http://www.google.com に、一体全体どういう関係があります? とても不自然で奇妙に思えませんか? そう思えたなら、もう大丈夫です。印刷されても、アンカーリストを抽出されても、マウスを操作できない閲覧者が利用しても、音声ブラウザで利用されても、何れにしても体裁が保たれた、立派な「ハイパーテキスト」を作れるようになる筈です。

確認しておきたい基本事項

最終更新
更新はありません

「リンク先に何があるのか」をできるだけ明確に分かるようにする。

「駄目な」例1

今日、とても面白い話を見つけました。

→「今日、とても面白い話(最先端ロボット技術)を見つけました。」等とすべき。

「とても面白い話」を既に知っている人ならクリックはしないで済むことでしょう。リンク先の文書がなんであるかを説明するのに、抽象的な言葉、形容詞などでは不十分です。なるべくならば、その文書のタイトルを使います。タイトルが存在しないなら、最も重要度の高いキーワード、見出しなどを選択すべきです。

次善策として、「最先端ロボット技術」のようなハイパーリンクの説明を、()内ではなく、A要素のtitle属性に記述するのも手です。

「駄目」な例2

詳細な情報は、こちらをクリックしてください。

→「この件に関する詳細情報です。」等とすべき(「この件」には要約を記述します)

「駄目」な例3

戻る

HomeTop、または「?へ戻る」等とすべき

非常に良く見かけるこの「戻る」リンクには、大きく分類して2つの欠点があります。

  1. 検索エンジン等から直接やってきた訪問者にとって、「戻る」とは検索結果等のリンク元のページに戻ることを意味する(言葉が不適切)
  2. 複数のページからリンクしていた場合、誤まったページに「戻」らされてしまう可能性がある

何がまずいのか

  • アンカーリストを抽出した際、使い物にならない
  • 閲覧者が情報を判断する材料を制限してしまう
  • デッドリンクになってしまったとき、アンカーを検索しても何も得られない

ハイパーリンクリストなどに再利用した際に使いづらくなること、そして、閲覧者が情報を判断する術を制限してしまうことは当然起り得る障害ですが、その他、他所のサイトの文書にリンクする場合に注意したいのがデッドリンクです。きっちり管理できるなら良いかも知れませんが、量が多いとこれは難しい問題となります。しかし適切な語句でリンクしておけば、語句を検索してデッドリンクとなった文書を探し出すことも可能になります。また、他所のサイトの文書を参照する際には、きちんとした説明をつけないと失礼です。

Back to the topについて

最終更新
2002-09-08T19:51:22+09:00

「ページトップへ」「ページ最上部へ」「Page top」「Back to top」。このような文字列を、ページのトップに位置する要素へのアンカーにするのは、「リンク」=「ジャンプ」と考えている証拠です。害といった害はありませんが、不自然な行為です。

http://foo.com/bar.html#top というURLを持ったリソースは、#topというid属性をもった要素です。この要素と「ページトップへ」という文字列にどういう関係があるのでしょうか。「へ」って何ですか? また、突然このようなアンカーが出現する文脈上の必然性も謎です。この不自然な行為は、例えば印刷した時に意味が失われます。確かに大した問題ではありませんが、実際に起る問題の多寡を「問題」にしているのではありません。不自然な行為自体を問題にしているのです。

ちなみに、ページの最上部にスクロールするというのは、何をどう考えてもブラウザが提供すべき機能です。少なくとも、文書とは独立した「機能」として、外部ファイルとして分離されたJavaScriptか何かで提供するのが自然です。

HTMLは「動作」しません。

デザイン先行とハイパーリンク

最終更新
2002-08-10T19:17:49+09:00

ハイパーリンクの文字列は、リンク先の文書の説明です。少なくとも閲覧者はそこから情報を読み取ろうとします。しかし、ページレイアウトが重要な問題である場合、どうしてもハイパーリンクの文字数に自ら制限をかけてしまうことになります。例えば「戻る」「次へ」「前へ」「HOME」「TOP」その他のナビゲーション用のハイパーリンクです。これらの短い単語の問題点は、ページ作者によって意味が微妙に異なることです。例えば「TOP」。これは、ページの最上部にジャンプするという意味で使っている人もいれば、コンテンツのトップ(目次)を開くという意味で使っている人もいます。これはしばしば混乱の元になります。

こういった短い単語を使わざるを得ない場合、補助的な解決策がいくつかあります。

解決策1 title属性を用いる

<a href="#" title="コンテンツの目次に戻ります">TOP</a>

この方法によって、ハイパーリンクの補助的な説明を加えることが出来ます。title属性を解釈するブラウザ等は、この属性値をポップアップ表示してくれたりします。しかし、一番良いのは、title属性を用いなくてもリンク先の文書の概要がわかるようにすることであることを忘れないようにしたいものです。

解決策2 DynamicHTML(DHTML)を用いる

title属性を用いた時に一部のブラウザなどで期待されるポップアップ表示を、DHTMLを用いることで意図的に実現することが出来ます。これは、title属性を用いた際の補助的なものだと考えてください。DHTMLの技術を利用できないブラウザなどでは意味を持ちません。(参考:HotWired Japan : Webmonkey : dynamic_html

しかしこれは、HTMLソースが汚くなるのでオススメしません。「HTMLソースが汚くなる」ということは、フレキシビリティが損なわれることを意味します。いわゆる一般的なDynamicHTMLは、HTML文書にプレゼンテーション要素を紛れ込ませる形で成り立っているものが非常に多いのです。

解決策3 Document Object Modelを用いる

長くなったので別項にて(補足 - Document Object Modelを用いる方法 -

解決策4 メタファを用いる

文字の代わりに、家の形をしたアイコン、矢印のアイコンなど直感的な画像を使う方法もあります。alt属性に代わりとなるテキストを記述しておきます。

解決策5 スタイルシート(CSS)を用いる

スタイルシート(CSS)で、冗長と思われる部分を非表示にしてしまいます。

例えば、8月分のウェブ日記へのリンクは:

<a href="weblog200208.html">ウェブ日記 2002-08</a>

このようにし、そのリンク単体でもリンク先が分かるようにした方がベターです。しかしこの「ウェブ日記」という文字列が、デザイン上冗長、あるいは文脈上自明である場合には省略したいことも多いことでしょう。その場合、「ウェブ日記」をclass属性付きのspan要素などでマークアップし、CSSで非表示にすれば、リンクの価値は変わらず、かつ、文脈やデザインを妨げません。

CSS
.prefix{ display : none }
HTML
<a href="weblog200208.html">
  <span class="prefix">ウェブ日記</span>
  2002-08
</a>

文章の流れとハイパーリンク

最終更新
更新はありません

ハイパーリンクは、しばしば文章の流れを妨げる原因になります。例を挙げます。

これらは、それぞれの用語を解説するページへのハイパーリンクになっています。こういったことができるのが、ハイパーリンクの良い点なのであって、ページ作成者は既にウェブ上にある資源を有効に活用することが出来るわけですが重要度が低い場合には、かえって文章の流れを妨げることになり、閲覧者は本文に集中できなくなるかも知れません。

この場合、いわゆる「別窓」で開かせる(target="_blank")という方法が取られる場合が非常に多いですが、これは閲覧者の操作系に著しく干渉することになり、好ましくありません。

  • 同じ窓で開きたいと思う閲覧者には迷惑でしかない
  • 「別窓」で開きたい場合は、閲覧者は自分の意志で、簡単に実現することが出来る

という2つの理由からも、「別窓」がよろしくないことは明らかです。すべきことでもないのに、製作者が手間をかけるのは馬鹿馬鹿しいことです。

では他にどういった解決策があるでしょうか。残念ながら、この例のように他者の情報源に頼る限り、特に有効な方法はありませんが、このような外部へのリンクは、スタイルシートを用いて色分けなどすると、親切かも知れません。

補足 - Document Object Modelを用いる方法 -

最終更新
2003-02-20T20:01:12+09:00

title属性によるポップアップはタイムラグがあることが多く(IE等)、アンカーをポイントした瞬間にポップアップさせたい場合、通常次のような記述を余儀なくされます。

  • <a href="foo.html" onmouseover="bar()">内容</a>

イベントハンドラ、onmouseoverを使って、bar()関数を呼び出す方法です。しかし、これはJavaScript依存の悪しき方法であります。補足的な説明にはtitle属性を使うのがHTML的に自然な方法であり、onmouseover等を一々記述しなくても、同様の効果を得られるのが、Document Object Model(以下、DOM)です。

つまり、製作者は、自然なHTMLを書くだけで、便利な機能はすべてDOMが引き受けてくれる、という形が理想なのです。外部CSSを利用する利益をご存知の方は、この理想が良く理解されることでしょう。

  • <a href="foo.html" title="説明">内容</a>

では実際、この例に全く手を加えず、どうやってポップアップさせるのか、という問題を、DOMで解決してみます。うちは、サンプルスクリプトを配布する性質のサイトではありませんので、一つの例として参考にしてください。サンプル:メンテナンスフリーのポップアップ

サンプルはご覧になりましたでしょうか。利点と欠点をまとめます。

利点
  • title属性を記述するだけで、ポップアップを実現できるので、プレゼンテーションを意識することなくHTML文書を作成することができる
  • まっとうにマークアップをしてきたのであれば、それまでのHTML文書に外部JavaScriptを組み込むだけで、実現可能
  • ポップアップ部分のスタイルは自由に変更することが出来る
欠点
  • Document Object ModelをサポートしていないUser Agentには無意味

利点の前者は、製作者の負担が変らないことを意味しますので、私は特に重要だと考えます。

NetscapeCommunicator4.xなどは、DOMをサポートしていません。このようなブラウザを視野に入れた場合、ポップアップを実現するのに毎回、特別な配慮が必要となり、制作意欲を減退させる要因となりかねません。 標準規格DOMを無視したUserAgentは、ユーザーに配慮するウェブ製作者の敵であります。 ……なわけないですね。

忘れてはならないこと

  1. ポップアップなどの仕掛けが無くても、情報価値が等価であるよう常に配慮する。
  2. title属性を適切に、より柔軟に扱うのは、本来ブラウザなどのUserAgentがすべき仕事。つまり、title属性を記述することは、一過性の対処ではなく、将来に渡って有効な手段であリ得るということ。

その他参考記事/関連記事

最終更新
2003-02-20T20:05:03+09:00

いくらWAIだの何だのといっても、上っ面の説明しかないものはあまり参考にならないです。個人製作者が「有りうる個々の事例」を全部覚えるなんて出来っこありません。そうではなくて、原理的にどうして宜しくないアンカーなのかということを説明する文章というのは中々見つからないものでして。

この記事では共通すべきユーザーインターフェイスの仕事をウェブページ製作者が横取りするのは賢くないというシンプルなお話を読むことが出来ます。