リンクはウェブサイトを構成する基本的な機能です。リンクの使い勝手やわかりやすさ次第で、そのウェブサイトの操作性が大きく左右されます。そこで今回はリンクを提供する際に配慮すべきポイントについて説明します。ここでは特にテキストのリンクについて述べます。
リンクテキストの文字色が他のテキストと同じ色で、かつ、通常表示されるリンクの下線が消されている場合には、リンクであると判断することが困難です。
また、リンクテキストは通常、ブラウザ上で青色で表示されますが、ページ内のリンク部分が他の色に変えられているとユーザーはリンクであることを認識しづらくなります。
これらは基本的なことですが注意が必要です。
こちら
、ここをクリック
、リンク
、詳細情報
といった言葉だけをリンクとして用いているケースが頻繁に見受けられますが、これらは一部のユーザーにとって好ましいものではありません。
通常、音声ブラウザにはページ内を効率的に読み進めるためにリンクだけを読み上げる機能があり、音声ブラウザのユーザーの多くがこの機能を利用しています。その際、こちら
などにしかリンクが指定されていないと、リンク先の内容を予想できず、情報をたどることができません。
以下は画像による例示(実際のリンクテキストではありません)
さらにもう一歩!音声ブラウザのユーザーにやさしいリンクテキスト
できる限りリンクテキストにはリンク先のページタイトルと同様の言葉を用いると良いでしょう。なぜなら音声ブラウザでは通常、開いたページのタイトルを最初に読み上げるため、進んだ先で最初にリンクテキストと同様のページタイトルが読み上げられれば、ユーザーは目的のページに確実に進めたという安心感が得られます。
一文字にしかリンクが設定されていない場合のようにリンクに十分な大きさがとられていないと、細かいマウス操作が困難なユーザーにはクリックすることが難しくなります。そのため、文字列全体にリンクを指定するなどの工夫をしましょう。
上下左右に隣接するリンクに十分な間隔がとられていないと、謝って隣接するリンクをクリックしてしまう恐れがあります。あらかじめ隣り合うリンクとの間隔を十分に確保しましょう。
リンクが横に並ぶ場合には、各リンクの間にリンクを設定していない|(縦棒)や/(斜線)を入れるのも方法のひとつです。
以下は画像による例示(実際のリンクテキストではありません)
スタイルシートによる行間の指定例(li要素に対して行間を指定する場合)
li {line-height: 150%;}
行間を指定する単位は、pt(ポイント)等の絶対値指定ではなく、%(パーセント)やem、exなどの相対値指定が好ましいでしょう。