画像の代替テキスト

ネットショップ開業
ネットショップ開業ネットショップ開業の基礎知識チェックポイントユーザビリティ・アクセシビリティ>ネットショップのコントラスト・配色

画像の代替テキスト / ネットショップのユーザビリティ・アクセシビリティ

画像はネットショップでも一般的に活用されるツールの一つです。こうしたテキスト(HTMLテキスト)よりもはるかにインパクトを与えることができるのも魅力ですし、写真などを使った説明が可能になるのも画像の魅力です。しかし、画像が使えない環境のユーザーがいることも忘れてはいけません。

 

ネットショップにおける画像には必ず代替テキストを入れよう

ネットショップでは、訪問したお客様にインパクトを与える目的で良く画像が用いられることがあります。例えば「なんと定価の50%オフ!」という文字だけの部分であっても画像化して目立つようにすることが多々あるかと思います。

こうした場合、一般のユーザーは確かに目立つ画像の方が購買意欲をそそるかもしれません。しかし、画像に書かれた文字や表現というものは、機械的に何が書いてあるかを判断できません。
どういうことかというと、最近では目が不自由な方もインターネットを使ってホームページを見ることが増え来ているそうです。そうした人はパソコンにインストールした「自動読み上げソフト」を利用しています。自動読み上げソフトはHTMLに書かれている文字を読み上げてくれます。

HTMLで書かれている本ページのようなテキストはしっかりと読み上げてくれますが、画像にはHTMLのソース上(<img src="URL" />)と書かれているだけで、何が書いてあるのを判断することができません。

そこで活用したいのが「代替テキスト」です。代替テキストとはHTML上の画像データに対して「この画像にはこうしたことが書いてあるんですよ」という画像を代替する文字です。HTML読み上げソフトなどでは、こうしたイメージの代替テキストを読み込んでくれます。

代替テキストの付け方は簡単です。 <img src="URL" />にalt="テキスト内容"とするだけです。具体的には、<img src="URL" alt="なんと定価の50%オフ"/>といった感じです。この代替テキストは、こうしたユーザビリティ・アクセシビリティの観点からも有効ですが、別途解説しますが、検索エンジン上も有効な手段です。

画像にはできるだけ代替テキストを入れるようにしましょう。

 

 

ネットショップ開業ガイド ネットショップ開業の基礎 ネットショップ比較 ネットショップ開業カタログ
リンク集 プライバシーポリシー

copyrights ©2006-2015 ネットショップ開業.com All rights reserved.
各コンテンツの著作権は放棄しません。無断転載は一切禁止します。