【HTML】alt属性を使って代替えテキストを設定する方法

このページについて

このページではHTMLで使う事ができるalt属性を使って代替えテキストを設定する方法の解説をしています。

alt属性は画像に対する説明をテキストで設定する機能を持っています。これは代替えテキストと言って、非常に重要なものとなっています。

通常は画像の表示が行われていて、その画像を見れば済みますよね。ただネットの不調やそもそもの画像URLの設定ミスなど、画像が表示されないケースが全く無いとは言えません。それにユーザーがスクリーンリーダーを使っている場合、画像を読み上げるなんてことはしません。

スクリーンリーダーとは簡単に言えばSiriにWebサイトを読み上げてもらっているみたいな感じですね。この時Siriをはじめとしたスクリーンリーダーは画像ではなく、その画像に設定されているalt属性のテキストを読み上げます。

そのためalt属性は使えるタグは限られていますが、使えるなら適切に使っていくべき属性と言えます。そんなalt属性が使えるタグは3種類あります。それぞれのタグごとに解説していきます。

areaタグで使う場合は、その範囲の説明になります。

<area shape="形" alt="代替えテキスト" href="リンク先URL">

areaタグは「1枚の画像に範囲を指定してクリック可能な領域を与える」みたいなものです。つまり1枚の画像の中でも、複数の代替えテキストを場所ごとに設定できることになります。href属性を使った場合、alt属性が必須となります。

imgタグはドキュメント中に画像を挿入するというタグになります。上でも書いた通り、スクリーンリーダーでは画像を読み上げることはせず、alt属性を読み上げます。なのでこのimgタグに関してはかなり重要です。

ちなみにですがimgタグにはalt属性は必須となっています。

<img src="画像URL" alt="代替えテキスト" />

このように書きます。

inputタグはユーザーから入力を受け付ける場所だったりデータの送信ボタンだったり、いろいろとできる事があります。そんなinputタグにもalt属性を使う事ができるんでうが、これはinputタグでtype=”image”を選んだ時だけです。

type=”image”は「inputタグのボタンに画像を使う」と言うものです。つまりこのボタンとして使っている画像に対する代替えテキストを与えましょうってことになります。

<input type="image" alt="代替えテキスト" />

type=”image”以外であれば、alt属性は不要です。

参考までにテキストや画像に対する説明を与えるものとしてtilte属性というものもあります。title属性は「マウスを乗せた時に表示する」機能であり、スクリーンリーダーで読み上げたりはしません。

スクリーンリーダーで読み上げてもらうテキストの場合はalt属性で設定しましょう。

alt属性は画像に対する説明を設定する属性として、areaタグ、imgタグでは必須であり、inputタグでは使い方次第で必須となります。title属性との使い分けの仕方もしっかりと覚えておきましょう。