サイトのデザインや記事内に画像(img 要素)を挿入するときの alt 属性の使い方

画像には alt 属性を用意しておこう

記事に画像を挿入することは多いですね。WordPress では投稿画面で、左上にある「メディアを追加」ボタンをクリックすれば、簡単にアップロードし、挿入することができます。

ビジュアルモードであれば指定した通りの画像が表示されます。これをテキストモード(HTML)に切り替えると、画像表示ではなく、以下のようなソースコードが表示されています。

<img src=”画像ファイルのURL” alt=”画像の説明となるテキスト情報“>

ここで「img src=”●●●”」というのは表示させたい画像を指定していますが、「alt=”▲▲▲”」というのは「画像をテキスト情報として置き換えた内容」 を示すものです。

W3C の指針

4.7 Embedded content — HTML5 公式ページ

どうして alt 属性を記述しておくべきなのでしょうか。W3C のガイドラインには以下のように書かれています(4.7.1.1.2 一般的なガイドライン | 4.7 埋め込みコンテンツ — HTML5 日本語訳)。

4.7.1.1.2 一般的なガイドライン

特に指定されている場合を除き、alt属性を指定しなければならず、その値が空であってはならない。値は画像に対して適切な置換でなければならない。alt属性に対する具体的な要件は、以下の節で説明するように、ページでの画像の機能に依存する。

適切な代替テキストを判断するには、画像がページに含まれている理由を考えることが重要である。その目的は何か?このように考えることは、読者に意図する画像に関して何が重要かを理解するのに役立つ。すべての画像は、有用な情報を提供する、機能を実行する、インタラクティブな要素を分類する、美意識を高めるまたは純粋に装飾的といったページ上に存在する理由を持つ。したがって、画像が何のために存在するのかを理解することは、適切な代替テキストの記述を容易にする。

サイトにアクセスしてくる人が画像を見ることができる状態でないことも考慮して、alt 属性を用意しておくべきだと W3C は考えています。

視覚情報ではなく音声情報だけでサイトにアクセスし、書かれている内容を音声によって読み取る人もいます。たとえば、テキストのみのブラウザを使う人もいるかもしれません。非常に低速な接続では、画像の表示を無効化している場合があります。また、認知能力や視覚能力に困難な状況を抱えている人は、音声ソフトウェアを使ってテキストのみでサイトを閲覧するでしょう。ユーザーがサイトの利用をしやすいようにするための工夫が alt 属性の使用といえそうです。

ようするに、「相手が画像を見ることができない状況であっても、代替テキストを音声で読み上げるだけで、相手に画像の内容が何なのかを正確に伝えられるように書くことが重要だ」ということです。ちなみに、『カルタ付 HTML5マークアップ 現場で使える最短攻略ガイド (WEB PROFESSIONAL)』(浜俊太郎/アスキー書籍)では「その画像を電話越しに伝えるにはどう説明するか?」と考えればよいと説明されていました。

 

alt 属性の使い方に関しては、こちらに W3C の詳しいチュートリアルも用意されています。

Images Concepts • Images • WAI Web Accessibility Tutorials 公式ページ

Images Concepts • Images • WAI Web Accessibility Tutorials

内的 SEO としての alt 属性

alt 属性を入れておくことは検索エンジン最適化(SEO)にも有効です。検索エンジンのクローラーは定期的にサイトを訪れて、更新状態などをチェックしていきます。このとき画像に代替テキストがないとクローラーは画像の内容を認識できません。

たとえば、ある記事に以下の画像(WordPress の公式ロゴ)を挿入するとします。

WordPressのロゴ

そのとき「WordPress の公式ロゴ」という代替テキストを用意しておくことで、「この記事は WordPress の公式ロゴに関連した内容である」とクローラーには認識されるでしょう。また、この代替テキストの用意された画像の周辺にある文章は、「WordPress の公式ロゴ」に関連の深い内容であることも伝えられます。

さらに、画像の代替テキストを入れておくことで、検索エンジンの「画像のみ」の検索でもヒットされやすくなります。クローラーにとって、代替テキストがなければ、記事内の画像は「内容が何なのかわからない画像」でしかありませんので、どれだけおもしろく重要な画像であっても、認識されなければ検索結果に表示されないでしょう。

ようするに、クローラーはテキスト情報にもとづいてサイトをチェックし、検索結果の表示に利用していると考えて、alt 属性で代替テキストを用意しておくことが大切なようです。

alt 属性の使い方

画像に代替テキストを用意するといっても、いろんなケースが考えられます。サイトロゴであったり、デザイン上の背景画像であったり、リストの点や数字の代わりの画像だったり、記事に挿入された表・グラフ・イラスト・写真などであったり、多岐にわたります。

以下、いくつか説明しておきましょう。

alt 属性の例(サイトロゴのリンク)

たとえば、W3C のロゴの場合。

W3C サイト

この画像をリンク付きで表示するとしたら、簡単な説明だけでかまいません。「alt=”W3Cサイト”」のように書いておきます。

alt 属性の例(写真)

ノートパソコンに載せたiPhone 5 の画像

写真を挿入したいのであれば、

というように、できるだけ言葉で伝わるように代替テキストを用意します。

alt 属性の例(イラストなど)

スプライト画像の例で、左上に丸、右上に△、左下に×、右下に四角が描かれている

こちらはどう説明したらいいかわからず「サンプル画像1」とかで済ませてしまいがちですが、できるだけくわしく具体的に書くところです。

スプライト画像の例で、長方形を4つのスペースに分けており、左上に丸、右上に三角、左下にバツ、右下に四角が描かれている。

では、次の場合はどうしたらいいでしょう?

 alt 属性の例(数値ありの画像など)

回線速度の計測結果

数値などがくわしく書かれている画像も同じです。できるだけくわしく文字や数値を代替テキストにしてしまいます。

利用しているパソコンの回線速度計測結果が表示されています。下り速度が88.7Mbpsで上がり速度が37.4Mbpsとあり、数値のところが大きく表示され、強調されています。下にコメントとして「とても速いです!インターネットのすべてを楽しめる環境です。価格.comならお得なプランがいっぱい、料金も安くしよう!」と書かれている。

と書いておけばいいでしょう。

もっとくわしい使い方

くわしい使い方は公式ページに具体例つきで、たくさん載っています。もし画像の代替テキストをどうすればいいのかわからなければ、下の日本語訳リンク先を参考にしてみるとよいでしょう。

4.7.1.1 画像に対して代替として動作するテキストを提供に対する要件 | 4.7 埋め込みコンテンツ — HTML5 日本語訳

さいごに

Google 社は検索エンジンの技術をどんどん進化させています。いずれは画像の説明をこちらで用意しなくても、検索エンジンが自動的に音声テキストに変換してくれるようになるのかもしれません。

Research Blog: A picture is worth a thousand (coherent) words: building a natural description of images

ただし、まだそんな技術が実用化されるまでには時間があるはずです。しばらくは、画像に alt 属性を用意して人にも検索エンジンにも親切な状態にしておきましょう。

関連記事

WordPress 初心者が「wpX レンタルサーバー」へ移転するときに参照するマニュアルの補足事項

「wpX レンタルサーバー」へ移転してみました。そこで、サーバー移転の初心者である自分がつまずいてしまった点を書いておきます。自分の失敗が、これからサーバー移転を考えている人に役立てば幸いです。 ちなみに以下の内容はレンタルサーバー側の問題…

検索エンジンに残ったウェブページのキャッシュを削除する方法

基本的に、検索エンジンにキャッシュされているウェブページの古い情報を消去したいときには「noarchive タグ」を利用します。 たとえばネットショップの商品ページで、商品の種類や値段が頻繁に変わる場合などに使われるそうです。メンバーシップ…

eo光ネットのファミリーパックなら「多機能レンタルルーター+総合ウイルス対策ソフト+迷惑メールチェック機能+メールアドレス5つ」が月額477円!

eo光ネットなら「ファミリーパック」がおすすめ ケイ・オプティコムのeo光ネットではいろんなサービスがありますけど、それらをセットにして加入できるプランが用意されています。なかでもありがたいのが「ファミリーパック」で、我が家でも利用していま…