先日のエントリー【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>
このように何も意味を持たない画像に高い意味を持つ代替(等価)テキストを付加すとことが必要です。
勿論、過去によく使用されていた、テーブルの特定位置へのレイアウト目的で代替テキストが無いスペーサー画像はアクセシビリティの面で利用すべきではありません。
コメント
そう言う使われ方があるとは知りませんでした。
人様のサイトのHTMLにケチを付けることになってしまいますが...
『Infoaxia(インフォアクシア)』さんの場合 id="main_contents"があるので、<a href="#contents_start">ではなく <a href="#main_contents"> とすることで スペーサー画像は外せますよね。
こういう方が、より良いのではないでしょうか。
投稿者 小夜鳴鳥 :
その通りですね。ID指定でリンクアンカーとなりえます。
しかし、この場合は1pxの画像を使用することにより、スタイルシートを切った状態での閲覧時にリンクボタンとして使用、音声ブラウザでナビゲーションすることを狙っているのかもしれません。
投稿者 @Style :