ナビゲーションとスペーサー画像
Posted by @Style : 
22:38
| 
コメント (2)
| 
トラックバック (1)
先日のエントリー【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>
このように何も意味を持たない画像に高い意味を持つ代替（等価）テキストを付加すとことが必要です。
勿論、過去によく使用されていた、テーブルの特定位置へのレイアウト目的で代替テキストが無いスペーサー画像はアクセシビリティの面で利用すべきではありません。
前のエントリー：display:noneと検索エンジンスパム
次のエントリー：label要素を隠すにはCSS
関連記事
- MovableType 4でkeywordsを記述する【改訂版】
- MT4 テンプレート 2Columnのカスタマイズ その1
- Markup Validation Service
- WebInspector 5.02 Java6対応版
- Web Designing 2007年 05月号 元原稿
- XHTML 1.1
- フッターにデザインを入れてみる
- ナビゲーション
- Web Designing
- 文字サイズを考える
トラックバック
このエントリーのトラックバックURL:
http://atstyle.biz/blog/mt-tb.cgi/39
このリストは、次のエントリーを参照しています: ナビゲーションとスペーサー画像:
» ナビゲーションのスキップと文書構造 from 【WebSite コーディネータ】
ウェブコンテンツJIS【JIS X 8341-3】
<引用>
5..開発及び制作に関する個別要件
5.3 操作及び入力
h) 共通... [続きを読む]
トラックバック時刻: 2005年10月28日 02:06
コメント
そう言う使われ方があるとは知りませんでした。
人様のサイトのHTMLにケチを付けることになってしまいますが...
『Infoaxia（インフォアクシア）』さんの場合 id="main_contents"があるので、<a href="#contents_start">ではなく <a href="#main_contents"> とすることで スペーサー画像は外せますよね。
こういう方が、より良いのではないでしょうか。
投稿者 小夜鳴鳥 : 2005年10月 9日 00:19
その通りですね。ID指定でリンクアンカーとなりえます。
しかし、この場合は1pxの画像を使用することにより、スタイルシートを切った状態での閲覧時にリンクボタンとして使用、音声ブラウザでナビゲーションすることを狙っているのかもしれません。
投稿者 @Style : 2005年10月 9日 00:33
スポンサード リンク
