ナビゲーションとスペーサー画像

先日のエントリー【MovableTypeの小技(微技)】において、以下のようなご指摘をいただきました。

スペーサー画像を使用するのは、アクセシビリティに反するのではありませんか?

ナビゲーション読み飛ばしリンクや適切な見出しが無い場合など、リンク及びアンカーとしてもよく使う手段です。

アクセシビリティの解説サイト Webアクセシビリティのポータルサイト『Infoaxia(インフォアクシア)』 でもナビゲーション読み飛ばしリンクとして使用されています。

<a href="#contents_start"><img src="/shared/images/spacer.gif" width="1" height="1" alt="メインメニューをとばして、このページの本文へ" class="skip_link" /></a><a id="menu" accesskey="1" name="menu"><img src="/shared/images/spacer.gif" width="1" height="1" alt="ここからメニューです。" class="navigation_menu" /></a>

このように何も意味を持たない画像に高い意味を持つ代替(等価)テキストを付加すとことが必要です。

勿論、過去によく使用されていた、テーブルの特定位置へのレイアウト目的で代替テキストが無いスペーサー画像はアクセシビリティの面で利用すべきではありません。

Posted

コメント

そう言う使われ方があるとは知りませんでした。

人様のサイトのHTMLにケチを付けることになってしまいますが...

『Infoaxia(インフォアクシア)』さんの場合 id="main_contents"があるので、<a href="#contents_start">ではなく <a href="#main_contents"> とすることで スペーサー画像は外せますよね。

こういう方が、より良いのではないでしょうか。

投稿者 小夜鳴鳥 :

その通りですね。ID指定でリンクアンカーとなりえます。
しかし、この場合は1pxの画像を使用することにより、スタイルシートを切った状態での閲覧時にリンクボタンとして使用、音声ブラウザでナビゲーションすることを狙っているのかもしれません。

投稿者 @Style :