PR

【HTML】imgタグのalt属性(代替テキスト)とは?必要性やSEOの影響について解説!

WEB制作技術系

imgタグには、alt属性(代替テキスト)を指定できるのですが、意味や使い方をご存知でしょうか?

alt属性はWEBアクセシビリティ向上に関して重要な役割を担っています。
※WEBアクセシビリティとは、高齢者や障害者を含め、誰もがストレスなく情報や機能を利用できることを指します。

今回の記事では、alt属性意味や必要性、SEOの影響について解説していきます。

alt属性とは?

alt属性とは、何らかの理由で画像が表示されなかった場合、代わりとして表示されるテキスト(代替テキスト)を指定できる属性です。

WEBサイト上で、下記のようなものを見たことがある方は、多いと思いますが、このテキストの部分を設定できるのが、alt属性となります。

代替テキスト例
↑代替テキスト例

このalt属性を正しく設定することで、何らかの理由で画像が表示できなかった場合でも、その情報を閲覧者に伝えることができます。

alt属性の指定方法

お悩みさん
お悩みさん

そもそも、alt属性を指定する方法が分からない・・

指定方法がよく分からないと言う方の為に、簡単ですがご紹介をしておきます。指定するには、HTMLタグのimg要素に以下のように記述をします。

<img src="画像のパス" alt="画像の代わりになるテキストを入力">

上記のaltの、「””」の間に画像の代わりになるテキストを入力する形になります。

どんなテキストを指定すべきか?

結論から言うと、「声で読み上げても意味が伝わるか」が重要となります。では実際に、店内の案内図を例として出してみます。

alt属性指定例

どんなテキストを設定するかで、伝わり方が違うのがご理解いただけたでしょうか?左は、店内の案内図が入ることがしっかりと伝わりますが、右は、何の図が入るのかイマイチ伝わっていません。

alt属性を指定する場合は、適当にテキストを入力するのではなく、声で読み上げても意味が伝わるかどうかが重要です。

・声で読み上げても意味が伝わるかどうかが、良い判断基準になる

alt属性は音声読み上げ機能で読み上げられる

先ほど、「声で読み上げても意味が伝わるか」が重要であると解説しましたが、それはalt属性で指定したテキストは、音声読み上げ機能で読み上げられるからでもあります。視覚障害を持っている方や、高齢の方は、WEBサイトの内容を理解する為に音声読み上げ機能を利用するのが一般的です。

身体的な理由や、何らかの原因で画像が見れない方の為にも、alt属性の指定は必要不可欠であると言えます。

お助け猫
お助け猫

WEBアクセシビリティの観点からも、意識したいポイントです。

検証ツールを使えば、代替えテキストが丸見え

alt属性で指定した代替えテキストは、検証ツールで確認すれば、簡単に確認出来てしまう点にご注意ください。
※検証ツールとは、WEBページのHTMLやCSSの構造を簡単に確認できる便利なツールの事。

検証ツール丸見えイメージ画像
↑検証ツールで見ると、丸見え

なので、alt属性をメモ代わりに使用(あまりいないと思いますが)するのは、NGです。

・検証ツールを使えば、指定した代替えテキストは簡単に確認出来る
・alt属性を、メモ代わりに使用しない事!

指定の必要性について

alt属性を指定する事の重要性は理解していただけたと思います。しかし、サイト内全ての画像に指定すべきかと言われるとそうではありません。例えば、サイトの装飾の為に使用している画像やアイコン等は、alt属性の値を「alt=””(空白)」にしておけば大丈夫です。

お助け猫
お助け猫

サイト内で、「意味を持つ画像」には積極的にalt属性をつけるという認識で問題ありません。

SEOに影響は?

SEOイメージ画像

一般的にですが、alt属性を指定することで、検索結果の画面の順位を上げるという点では、直接的なSEOの効果は無いと言われています。

しかし、画像の内容をクローラーに正確に伝えられる為、画像検索で上位表示を狙えるようになると言われています。なので、SEOに全く効果がないとは言い切れません。

※クローラーとは、検索エンジンが検索の順位を決めるための要素を、サイトを巡回して収集してくるロボットの事です。

まとめ

alt属性は、しっかりと指定すべき意味がある事を理解していただけたと思います。特に何も意識する事なく指定していたと言う方は、この機会に見直してみてはいかがでしょうか?

コメント

タイトルとURLをコピーしました