お問い合わせ窓口

TOPWebマーケティング用語集 > 代替テキスト

代替テキスト

代替テキストとは、HTMLで規定されている要素の属性の一つで、画像などが表示できない場合に代わりに表示する文字列を定義するものです。

これは画像の意味をクローラーに伝えたり、目の不自由な人用の特別なブラウザで読み上げるために用いられるため、非常に重要とされています。

代替テキストによって定義された文字列のことを「代替テキスト」(alternate text)などと呼びます。

画像を埋め込むためのimgタグや、入力フォームのareaタグ、inputタグなどで用いられます。

入れ方としてはalt=”ここに画像の代わりの文字を入れる”です。

~例~

画像が都会の夜景の写真だったら

<img src=”画像へのパス” alt=”都会の夜景”/>

となります。

何かの理由で画像が表示されない場合 alt 指定の代替テキストが表示されます。

これは、画像が見えない環境下の方々のための手助けとなります。 画像が本分の内容上には無くてはならない重要な位置付けとして存在している場合には、画像が表示しなければダメージも大きくなります。

その場合 alt で画像の説明があれば、その文章を読むことによって、画像の情報を知ることができます。

特にページのタイトルに画像を使っている場合には気をつけなければいけません。はじめて訪れた方にとっては、そのページが何のページか解りにくいからです。

自分のブラウザで上手く表示されていても、 ページを訪れる側の環境はさまざまです。

古いブラウザで特定の画像形式が読み込めない、見る側で画像を表示しないよう設定している、テキストベースのブラウザを利用している、音声ブラウザを利用している等の場合は画像の中身は全く解りません。

なるべく多くの方に見ていただくためには代替テキストを記述する必要があります。

画像を指定する時にキチンと alt を使うことはとても大事なことです。HP作成者の義務かもしれません。

~メリット~

・アクセシビリティに良い。アクセシビリティとは簡単に説明すると思いやりです。見ている人に親切に作ったりすることです。
代替えテキストを入れていくと目の不自由な方が音声ブラウザを利用してホームページを見る場合、代替えテキスト(alt)の部分が読み上げられます。
このようにすべての方に利用しやすく作ることをアクセシビリティといいます。

・SEO対策に良い。
グーグルの検索ロボット(いいホームページか悪いホームページがチェックする機械)が皆さんが作ったホームページを見に来たときに代替テキストを入れておかないと配置されている画像(img)がなんなのか理解できません。
先ほど画像が都会の夜景の写真だったらと説明しましたが、私たち人間は写真を見たときに富士山の写真とわかりますが、グーグルのロボットはaltを入れておかないとそれが何の画像か認識しないとされています。
なので代替テキストをいれてグーグルのロボットにも意味をちゃんと教えてあげる必要があります。