其の38 リンクの表記と配置に注意 | デザインってオモシロイ -MdN Design Interactive-
【サイトリニューアル!】新サイトはこちらMdNについて
タイトル画像

レベル中級其の38

リンクの表記と配置に注意


リンクが貼られている文字や画像が隣接している場合に、ユーザーがリンクとリンクの区切りを把握できず、複数のリンクをひとつのリンクと見誤ってしまうことがある【1】。

リンク間の間隔が不十分な例
【1】リンク間の間隔が充分にとられていないので、見づらい

リンク箇所それぞれの面積が小さすぎて、目的のリンク部分を選択するのが困難な場合があるので、注意しなければならない。

テキストリンクが横に並ぶ場合は各テキストリンクの間に縦線( | )や斜線(/)などを入れる工夫が必要である【2】。

リンク間の間隔を十分に確保した例
【2】ある程度の間隔をとり、リンク間に「|」を入れた

また、それぞれのリンク箇所の間隔や上記のような縦線や斜線を入れたとしても、横に並んでいると見づらい場合もある。レイアウト的に制約があるだろうが、できるだけ改行して縦に並べるほうが望ましい。

スクリーン・リーダーや音声ブラウザでは、それぞれのリンク箇所に対してスペースが入っていないとリンクテキストが続けて読み上げられてしまうことも忘れないようにしたい。


お作法一覧へ
twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在