ALTの扱い
Posted at 2005/05/25 (Wed) 16:14 +09:00 in Web Designing
SEO、アクセシビリティの観点から、ALTに代替文字を入れることは必須ですが、適当にALTを設定しておけばいいというものではありません。場合によっては、ALTはとても重要なナビゲーションとなることもあります。ちょっとしたALTネタを。
- 音声UA用のサイト構成アナウンス
- Spacer（透明GIF）を適宜配置し、ALTによってユーザーの閲覧をサポートすることができます。
※この時、空のtitle属性を併せて設定すれば、ALTのポップアップを非表示にすることができます。（IE）<img src="spacer.gif" width="1" height="1" alt="ここからメインメニューが始まります。" title=" ">
※Spacer（透明GIF）を配置し、ALTを空にしてリンクを設置すれば、音声UAを対象としたナビを埋め込むこともできます。 - 箇条書きのアイコン画像
- 箇条書きのリストアイコンのように画像を用いているのならば、この画像のALTは空でもいいですが、「＊（アスタリスク）」、「・（中黒）」、「●（黒丸）」なら意味合いをそのまま保持できます。
<img src="arrow.gif" width="10" height="10" alt="●">商品のラインナップ - テキストと同じ意味の画像
- メールアドレスの記載箇所などに、よくメールアイコン画像とセットでアドレスが表記されている場合がありますが、実際のリンクテキストとアイコンのAltが重複すると、音声UAでは連続して読み上げてしまいます。アクセシビリティ処置として、空にすることも考えられます。
<img src="mail_icon.gif" width="10" height="10" alt="e-mail"><a href="mailto:***@**.com">e-mail:***@**.com</a>