ウェブのアクセシビリティ

アクセシビリティ豆知識−alt属性

ウェブサイトを、少しでも簡単にアクセシブルなページにするための豆知識・その2。
今回は、alt(オルト)属性についてです。

alt属性は、画像を貼付ける時に使うimgタグに付ける属性で、その画像が何を表しているかを説明するためのものです。

具体的な働きとしては、ウェブブラウザでサイトを閲覧する時に、画像を表示しない設定をしている場合には、画像の替わりにalt属性で指定したテキストが表示されますし、読み上げソフトもalt属性を読み上げるので、なくてはならない属性とも言えます。

サンプルメニュー画像 画像にリンクを張っている場合、alt属性がなければ、読み上げソフトを利用しているかたはリンク先を見つけることが出来ません。
画像にリンクを張る時は、リンク先がどこなのかを必ずalt属性で伝えたいですね。

(記述例)
<img src="img/menu.gif" alt="トップページへ">

しかし、なんでもかんでもalt属性で画像の説明をすればいいというわけでもなさそうです。

メニューまたはリストなどで、テキストの先頭にちょっとしたワンポイントの画像を付けるとします。

みかん
りんご
いちご

画像の説明として、 <img src="img/point.gif" alt="ワンポイント画像"> と記述して、読み上げソフトを使うと「ワンポイント画像 みかん ワンポイント画像 りんご ワンポイント画像 いちご」と読み上げます。
この画像の説明は適切でしょうか。なんだか、不要な気がしますね。

この画像は、情報を伝える上で説明はいらないんじゃないかなという時は、空のalt属性を使う方法があります。

<img src="img/point.gif" alt="">

同じような理由で、飾りのための画像や画像で作った区切り罫なども、空のalt属性を利用したほうが伝えたい情報だけを相手に伝達できるのではないかと思います。

かくいう私も、数年前まで、全ての画像にはalt属性で説明が必要だ!と、レイアウトを整えるための画像にでさえ「レイアウト用画像」とalt属性に記述していました。
さぞしつこかっただろうと思います。

altとは、英語のalternateの略で、意味は代替えです。

伝えなくてはならない画像、説明を加えたい画像、説明はいらない画像を見極めて、伝えたい情報が伝わるページを作っていきたいですね。

(なお、この豆知識は「ホームページリーダー3.02」で読み上げた結果を元にしておりますので、他の読み上げソフトでの結果とは異なる場合があります。)