BlogでHTML日進月歩

HTML及びCSSの理解を深め、Webサイト作成初級者からの脱却を目指します。

エントリー記事

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

このページの一番上へ

代替テキスト

画像を用いると、テキストよりも豊かな表現が可能になります。しかし、ナローバンド環境(*1)や携帯電話環境を中心に画像を読み込まないようにしているユーザーが存在します。また、音声ブラウザのように画像を視覚的に捉えられない環境が存在します。これらの環境を考慮して、画像には代替テキストの指定が必須とされています。

alt属性に記述するのは画像の説明でなく代替テキストです。画像の代わりに置き換えても意味の通じるテキストを記述する必要があります。

記述例
  • <p>私は今日<img src="phone.gif" alt="携帯電話" />を買いました。</p>
  • <p>私は今日携帯電話<img src="phone.gif" alt="" />を買いました。</p>

このように、同じ画像を指定しても記述の仕方により代替テキストの内容は異なります。

画像の中身を説明するにはlongdesc属性を利用します。画像を視覚的に認識できない音声ブラウザはlongdesc属性に記述されたアドレスへのリンクを生成します。

<img src="enquete.png" alt="2004年度アンケート集計結果" longdesc="enquete.html" />

単に装飾の目的で使われている画像の場合、alt=""と記述します。しかし、装飾画像は構造上の意味を持たないことより、スタイルシートを用いて背景画像として読み込ませる方が適切でしょう。

h3{ padding-left: 20px;
background: url(decoration.gif) no-repeat left center;
}

(*1)
平成16年通信利用動向調査の結果によると、2004年末時点における世帯のブロードバンド利用率は62.0%。つまり、ユーザーのおよそ3分の1は未だナローバンド環境です。
スポンサーサイト

このページの一番上へ

連絡先、広告

copyright © 2005-2006 セロリ
Powered by FC2ブログ.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。