隣り合うリンクやボタンの間隔は十分に空いていますか?
JIS 5.3 g);
 
 
概要

Webページにある複数のリンク(a要素あるいはinput要素、button要素)が、連続(隣接)していると考えられる部分があります。もし、複数のリンクが左右あるいは上下に隣り合っている場合は、その間隔が十分に空いていることを確認してください。

 
 
修正/チェック方法

もし、Webページ上で複数のリンクが左右あるいは上下に隣り合っている場合は、ユーザーが誤って隣のリンクをクリックしてしまわないように、スペースの許す範囲でその間隔が十分に空いていることを確認してください。

 
 
修正/チェックのポイント

リンクのある文字や画像が隣接している場合、リンクの区切りを把握できないことがあります。

また、リンクのある文字や画像が隣接している場合や、それぞれの面積が小さすぎるなどの場合、上肢に障害のある利用者や高齢者は、意図したリンクを選択するのが困難な場合があります。

  • 適度なリンク範囲を確保できるように、文字列全体にリンクを設定するか、大きな画像・文字などを用いる。
  • 隣接するリンクの間に、充分な間隔を設ける。
  • テキストリンクが横に並ぶ場合、各テキストリンクの間に縦線( | )や斜線(/)などを入れる。
  • テキストリンクが縦に並んでいる場合は、行間を広く設定する。

『富士通ウェブ・アクセシビリティ指針 第2.0版』 © 2004 富士通株式会社

 
 
JIS関連項目

5.3 操作及び入力
g)
ハイパリンク及びボタンは,識別しやすく,操作しやすくすることが望ましい。
例4. ハイパリンク及びボタンは,誤操作しないように隣り合うものとの間隔をとる。

JIS X 8341-3:2004『高齢者・障害者等配慮設計指針-情報機器における機器,ソフトウェア及びサービス-第三部:ウェブコンテンツ』(© 財団法人 日本規格協会)

 
 
解説

マウスなどのポインティング・デバイスを使用してマウスカーソルを操作しているユーザーの中には、その細かい操作ができない、あるいは操作しづらいという人もいます。Webページにあるリンクをクリックしようとして、マウスカーソルを目的のリンクに移動させたとき、もしそのリンクが他のリンクと隣り合っていて、かつ間隔が十分に空いていないと、誤って隣り合っているリンクをクリックしてしまう恐れがあります。

リンクが左右に横並びで隣り合っている場合は、(X)HTMLソースコード上で両者の間にスペースを挿入したり、"|" (縦棒)や "/" (スラッシュ)を挿入したりするとよいでしょう。"|" (縦棒)や "/" (スラッシュ)を挿入すると、画面での見た目でも隣り合っているリンクが区別しやすくなるので、そういった意味でも効果的です。

また、リンクが複数行にわたっていて、上下に隣り合っている場合には、CSSでその行間を指定して、間隔を十分に空けることができます。

この隣り合っているリンクの左右あるいは上下の間隔はどれくらいあれば十分なのか、というのを判断する数値の基準などはありません。しかし、少なくとも前述のような方法をとるなどして、スペースの許すかぎり少しでも広めに間隔を空けるということが大切です。

 
 
JIS X 8341-3について

JIS X 8341-3 の内容は、以下のサイトにて規格番号「X8341-3」で検索して、規格票をご覧ください。

  • 閲覧:日本工業標準調査会(JISC)
    http://www.jisc.go.jp/
  • 購入:日本規格協会(JSA Web Store)
    http://www.webstore.jsa.or.jp/