総務省トップ > 組織案内 > 地方支分部局 > 東海総合通信局 > ウェブアクセシビリティ > その5 使いやすくわかりやすいリンクの提供

その5 使いやすくわかりやすいリンクの提供

 リンクはウェブサイトを構成する基本的な機能です。リンクの使い勝手やわかりやすさ次第で、そのウェブサイトの操作性が大きく左右されます。そこで今回はリンクを提供する際に配慮すべきポイントについて説明します。ここでは特にテキストのリンクについて述べます。

対策方法

ポイント1 リンクであることを認識しやすくする

 リンクテキストの文字色が他のテキストと同じ色で、かつ、通常表示されるリンクの下線が消されている場合には、リンクであると判断することが困難です。

  また、リンクテキストは通常、ブラウザ上で青色で表示されますが、ページ内のリンク部分が他の色に変えられているとユーザーはリンクであることを認識しづらくなります。

  これらは基本的なことですが注意が必要です。

ポイント2 リンクテキストだけでリンク先の内容を予想できるようにする

 こちらここをクリックリンク詳細情報といった言葉だけをリンクとして用いているケースが頻繁に見受けられますが、これらは一部のユーザーにとって好ましいものではありません。

  通常、音声ブラウザにはページ内を効率的に読み進めるためにリンクだけを読み上げる機能があり、音声ブラウザのユーザーの多くがこの機能を利用しています。その際、こちらなどにしかリンクが指定されていないと、リンク先の内容を予想できず、情報をたどることができません。

以下は画像による例示(実際のリンクテキストではありません)

悪い例
画像1:交通案内はこちら(「こちら」にしかリンクが指定されていない例)
良い例
画像2:交通案内はアクセスマップのページへ(この場合、「アクセスマップのページへ」にリンク指定されているためリンクだけを読み上げてもリンク先を予想できる)

さらにもう一歩!音声ブラウザのユーザーにやさしいリンクテキスト

 できる限りリンクテキストにはリンク先のページタイトルと同様の言葉を用いると良いでしょう。なぜなら音声ブラウザでは通常、開いたページのタイトルを最初に読み上げるため、進んだ先で最初にリンクテキストと同様のページタイトルが読み上げられれば、ユーザーは目的のページに確実に進めたという安心感が得られます。

ポイント3 リンクには十分な大きさをとる

 一文字にしかリンクが設定されていない場合のようにリンクに十分な大きさがとられていないと、細かいマウス操作が困難なユーザーにはクリックすることが難しくなります。そのため、文字列全体にリンクを指定するなどの工夫をしましょう。

ポイント4 隣接するリンクとの間隔を十分にとる

 上下左右に隣接するリンクに十分な間隔がとられていないと、謝って隣接するリンクをクリックしてしまう恐れがあります。あらかじめ隣り合うリンクとの間隔を十分に確保しましょう。

 リンクが横に並ぶ場合には、各リンクの間にリンクを設定していない|(縦棒)や/(斜線)を入れるのも方法のひとつです。

以下は画像による例示(実際のリンクテキストではありません)

悪い例
画像3:横にリンクテキストが密接して並ぶ例 画像4:縦にリンクテキストが密接して並ぶ例
良い例
画像5:横にリンクテキストが並ぶ例(十分な間隔が確保されている) 画像6:縦にリンクテキストが並ぶ例(十分な間隔が確保されている)

スタイルシートによる行間の指定例(li要素に対して行間を指定する場合)
li {line-height: 150%;}

 行間を指定する単位は、pt(ポイント)等の絶対値指定ではなく、%(パーセント)やem、exなどの相対値指定が好ましいでしょう。

ページトップへ戻る