特にECサイトを運営している方は覚えておいてください。 今日の話で、売上が変わるかもしれませんよ。 今回のお話は画像についてのお話です。 ホームページを運営していると、画像は付き物です。 商品画像や状況を説明する画像、あるいはグラフや地図など。様々な場面で画像を使います。 それらの画像に【代替テキスト】は入っていますか? 意外と無視されがちな代替テキストですがこれが意外と重要なんです。 どのように重要なのかをご説明します。

代替えテキストaltタグはかなり重要です。

<img src="001T.png" width="785" height="200" alt="代替えテキスト"> 画像タグにあるaltタグに、入っている文章が代替テキストです。 機能として、代替テキストは画像が表示されない場合にブラウザー上に表示されるテキストを意味しています。 画像が表示されない状況は、現在ではリンク切れの画像ぐらいしか思い当たらないかもしれませんが、特定のユーザーには画像が表示されていても見えない方がいます。それは視覚障害者の方です。 そうした方達は【音声ブラウザー】と言う、音声でホームページを読み上げる特殊なブラウザーを使っています。 音声ブラウザーは、HTMLのソースコードを上から順番に音声で読み上げて行きます。 そこで画像があった場合は、どうなるのでしょうか? 音声ブラウザーは画像があった場合、altタグの内容を読み上げます。もし画像にaltタグが無ければ、音声ブラウザーは単純に【画像】としか読み上げません。 これって、すごく不親切ですよね。画像の説明を詳細にする必要はありませんが、せめてどんな画像なのかが解る程度の説明は必要です。 また、W3Cでは代替テキストについてこう定義しています。
W3C抜粋「HTML5: 有用な代替テキストを提供するためのテクニック」 代替テキスト [WCAG]は、視覚情報をアクセシブルにするための最も重要な方法です。これによりユーザーのニーズに合うように、任意の感覚様式(たとえば、視覚、聴覚や触覚)を介してレンダリングできるのです。代替テキストを提供する情報は、様々なユーザーエージェントの様々な方法でレンダリングすることができます。たとえば、画像を見ることができない人は、代替テキストが合成音声を使用して音声で読み上げることができます。 中略…… 特に指定されている場合を除き、alt属性を指定しなければならず、その値が空であってはなりません。値は画像に対して適切な置換でなければなりません。alt属性に対する具体的な要件は、以下の節で説明するように、ページでの画像の機能に依存します。 出典:W3C [HTML5: 有用な代替テキストを提供するためのテクニック]
後半に書いてあるのですが、代替テキスト=altタグは空ではいけない と明記されています。 つまり世界標準の決まりごとでは必ず入れなさい。と言っています。 Googleなどの検索エンジンはW3Cの規定を元にSEOの順位付けを行っているので、altタグの無いページは順位が下がる可能性も考慮しておいた方がいいかもしれません。(altタグの記述が無いだけで大幅な順位降下は無いとは思いますが) いずれにしても、ブログやホームページ運営している方は気にとめておいて損は無いので、制作時に代替テキストを入れる習慣を付けておきましょう。  

ECサイトでは必須です。

さて、altタグについては、理解していただけと思います。 次は、応用編です。 Googleの画像検索はご存知かと思います。 この画像検索、実は画像の前後文章と、altタグの組み合わせで表示しています。(yahooの画像検索もほぼ同じです) つまり、画像にaltタグが入っていないと、画像検索での表示順位が下がる可能性があります。 ECサイトで商品を売っていれば、当然商品画像があります。 それらの画像にaltタグが入っていない場合は…… 想像がつきますよね? TVなどの映像メディアで紹介された商品などは、商品名+画像で検索してくる人が多いので、画像のaltタグは重要になります。 ECサイトなどの場合は、画像点数が多い為についつい、altタグを省略してしまいがちですが、altタグを入れるだけで売り上げが変わるとしたらどうですか? ユーザビリティの観点からも、集客の観点でも、altタグは重要なタグです。 さっそく自分のホームページを確認してください。 ブログの内容に関するご質問・ご相談がありましたらご連絡ください。 またホームページやブログの運営に関するご相談も受け付けております。ご相談は無料ですので、お気軽に。   ]]>