SEOとアクセシビリティを考慮した代替テキスト（alt属性）の設定

画像を表示させるタグ（img src）に、alt＝”テキスト”を挿入してアクセシビリティを向上させる

Webページにおける画像表示のためのHTMLタグ＜img src＞の中に「alt=” ”」を付け加えて、そこに画像に関する説明文を入れれば設定完了です。

割と、altテキストは設定を怠りがちなところですが、閲覧者の利便性を考えると重要なポイントなので、すべての画像にaltテキストを設定しましょう。

ちなみにWebページの画像にすでにalt設定がされているかどうかは以下のChrome拡張ツールの「Alt&Meta Viewer」を使用すれば、調べることができます。

一度このツールでWebページをチェックして、alt設定していない＜img src＞タグがあれば、テキストを入力して使いやすいサイトを目指しましょう。

Chrome拡張ツール：Alt & Mera Viewer

alt属性には、SEO対策を考慮して絞り込んだキーワードを入れ込む

画像とテキストの内容が乖離しないように配慮しながら、検索されやすいキーワードを使用する

altは、画像とテキストの内容が乖離しないように注意しましょう。特にSEOを考慮するならば検索してほしい「キーワード」を入れ込むべきですが、altひとつに多数のキーワードを入れ込み過ぎると結果として画像とテキストの内容がブレてしまい、検索エンジンにスパム行為とみなされて検索順位を落としてしまう恐れもあるため、関連性の高いキーワードのみに絞りましょう。

alt属性に使用するテキストは、簡潔に20文字前後にする

アクセシビリティの点からも、alt属性には要素を詰め込みすぎずシンプルする

altテキストは、長すぎず短すぎず簡潔に画像の内容が説明される20文字程度が望ましいです。

あまり要素を盛り込んでテキストが長くなってしまうと画像を正しく説明するものにならなくなってしまい、利用者はもちろん検索エンジンにとっても理解ができなくなってしまいます。キーワードを意識しつつ簡潔に「20文字程度」で説明するように心がけましょう。

それでは、実際にテンプレートを見ながらやってみましょう。

画像ファイルだけしか設定されていない場合

画像ファイルおよび表示サイズが設定されている場合

画像ファイル以外にclass/idなどが設定されている場合

※class/idは同じ条件属性のものをグループ化するものですが、ここでは詳細を割愛します。

なお、すべての画像にくまなく「alt属性テキスト」を記述しなければいけない訳ではありません。例えば、サイト上の「単なる装飾デザイン」として使用している画像・アイコンなどの特に意味を持たない画像であれば、「alt=""」といったように値は空白のままで記述しても、アクセシビリティにおいて問題はありません。

alt属性テキストは、HTMLファイルに手を加えることになるため、チェックした上でプログラマ/エンジニアに依頼するか、自分でCMSツール等をいじって対応するかは会社ごとに異なると思いますが、チェックしておくのが望ましいです。