要約

リンクであることを判り易く、周囲のテキストと区別できるようにします。

テクニック

例

例 1 — リンク先の完全なコンテキストを含むリンク

ユーザーは、 a要素内のテキストのみからリンク先を判断できます。

<p>For more information, refer to <a href="#…">Section 1.1
   of Web Publications</a></p>
例 2 — 代替テキスト付きリンク

title属性は追加のコンテキストを設けるのに使用します。

<a href="#…" title="The EPUB specifications">click here</a>
例 3 — 太字を使用した視覚的な区別

bolderを指定すると、中程度のフォントまたは太字のフォントが使用されるので、視覚的にリンクは周囲のテキストから目立ちます。

a {
   text-decoration: none;
   font-weight: bolder;
   color: rgb(51,102,204);
}
例 4 — borderを使った視覚的な区別

すべてのリンクに実線の代わりに点線の下線が付き、リンクが強調表示されます。

a {
   text-decoration: none;
   padding-bottom: 0.3rem;
   border-bottom: 0.1rem dotted rgb(100,100,100);
}

解説

ハイパーリンクを作成するときによくある問題は、リンク内のテキストにより何にリンクしているかについて十分なコンテキストを提供していないことです。ほとんどの人は、リンクはテキスト内に配置されている場所でしか表示されないと思い込んでいますが、実際には、ユーザーはセクションを読む前、読んでいる最中、読んだ後にリンクを繰り返し見るものです。意味のあるラベルを付けないと、「こちらを参照」や「続きを読む」などのリンクテキストがリンク先に関するヒントが示されないまま提供され、混乱を招く結果となりかねません。

この問題を回避するには、常にハイパーリンクのテキストがそれ自体で意味を持つようにしてください。リンクを周囲の文章の文脈から切り離して読み取ることができ、リンク先が明確に示されていれば、支援技術を使用するユーザーの体験を向上できます。

過剰使用

ドキュメント内のリンクの数にはさらに複雑な問題があります。リンクの数が多くなると、ユーザーが不便になる可能性が出てきます。たとえば、キーボードユーザーは、セクションを終了した後に、リンク先を探すには、多量のリンクをタブで移動しなければならないでしょう。もう１つの問題は、しばしばリンクされたテキストの前に「リンク」という単語がユーザーに対してアナウンスされますが、これが多すぎると読みの妨げになってしまいます。

複雑な要因は、ハイパーリンクの多用が多くのユーザーにとってのメリットにもなり得るためです。たとえば、キーワードは定義にハイパーリンクされることが多く、その結果、１つの章に数十から数百のハイパーリンクが付与された単語が発生することがあります。一部のユーザーにとっては障害となるものの、学習障害や認知障害のあるユーザーにとっては、アクセスがしやすくプロセスが容易になります。

EPUBから冗長なリンクを削除するのは良い考えですが、冗長なリンクを構成する要素については、ケースバイケースで対処する必要があります。たとえば、各章でキーワードの最初のインスタンスのみにハイパーリンクを設定することは、全体のリンクの数を減らす１つの方法かもしれません。

認識

リンクに関するもう１つの問題は、リンクが必ずしもユーザーに認識されるとは限らない点です（たとえば、色覚異常により、リンクが周囲のテキストから認識できない場合があります）。そのような場合、ユーザーは追加情報へのアクセスを逃していることさえ気付かないでしょう。

リンクが周囲に溶け込んでしまう問題を回避するには、ハイパーリンクされたテキストは色だけでなく他の要素でも見つけられるようにする必要があります。リンクに下線を引く必要はありませんが、下線を削除する場合は、他の視覚的な手がかりを提供する必要があります（例：フォントをより太くする）。

特に相互参照の多い作品では、訪問済みのリンクを未訪問のリンクと同じ色に上書きすることは避けてください。ユーザーがすでに訪問した場所を視覚的に区別できないと、一部のユーザーにとってナビゲーションの問題が発生する可能性があります。

また、コンテキストの変化によってユーザーが混乱してしまうのを防止するため、可能であれば、リンクをクリックすると新しいウィンドウが開くことをユーザーに警告するのも良いでしょう。

関連リンク