alt属性の正しい考え方

superficial

今回は小ネタである。
しかし、ほとんど知られていないことなので書いてみたいと前から思っていたテーマなのだ。

alt属性の正しい考え方

である。特にホームページの制作業者の方には読んでいただきたい記事である。

alt属性の考え方の原則論はこうである。
Googleは公式に画像に関してのガイドラインの中の最も重要な文を引用しよう。

画像に関する情報をできるだけ多く Google に伝える

画像のベスト プラクティス
Googleは公式に画像に関してのガイドラインを上記のように記している。

画像から読み取れることが記述してあるのであれば、基本的には何が書いてあっても問題はない。
具体例をガイドラインから引用する。


適切ではない例:
<img src=”puppy.jpg” alt=””/>

適切な例:
<img src=”puppy.jpg” alt=”子犬”/>

最適な例:
<img src=”puppy.jpg” alt=”持ってこいをするダルメシアンの子犬”>

次のような記述は避けてください。

<img src=”puppy.jpg” alt=”子犬 犬の赤ちゃん
小さな子犬 レトリーバー ラブラドール ウルフハウンド
セッター ポインター ジャックラッセル テリヤ
ドッグ フード ドッグフード 安い 子犬の餌”/>

私は、更にもっと極端な例を挙げてみたいと思う。
カブトムシの画像 全体の色はツヤのある黒。頭部にはツノが2本生えており、大きなツノは先端が大きく2つに割れていて、その先が更に2つに割れている。小さなツノは2つに割れていて、先端がやや下に向かって反り返っている。大きなツノの根元部分には目があり、節のあるくの字型の触覚がある。頭部と腹部の間には溝があり、中央部分には黄色い細かい毛が生えている。足は3つ部分に別れており、最も胴体に近い部分には後方だけに細かい毛が生えており、中央部分には2つの突起がある、先端部分はカギ状になっている
これはカブトムシの画像だが、画像のalt属性はこう設定してある。


カブトムシの画像 全体の色はツヤのある黒。頭部にはツノが2本生えており、大きなツノは先端が大きく2つに割れていて、その先が更に2つに割れている。小さなツノは2つに割れていて、先端がやや下に向かって反り返っている。大きなツノの根元部分には目があり、節のあるくの字型の触覚がある。頭部と腹部の間には溝があり、中央部分には黄色い細かい毛が生えている。足は3つ部分に別れており、最も胴体に近い部分には後方だけに細かい毛が生えており、中央部分には2つの突起がある、先端部分はカギ状になっている


こんなに書いてSEOスパム扱いされないのか?
という疑問が生じるかもしれないが、全く問題ない。
記述が正しいからである。
では、なぜ記述が正しければいいのか?

よく言われるのが、視覚障害者がページを読み上げブラウザでブラウジングしたり、テキストブラウザで見た時にわかるようにする必要があるという説明だ。
これは正しいのだけど、腑に落ちないと思う人も多いのではないか?
読み上げブラウザやテキストブラウザを使っている人は少ない。その人のために過剰に配慮すると、スパム扱いされる可能性があると心配になるということだ。
しかし、問題ない。

このような説明をしているページは見たことがないので、私は強調したい。

altは検索エンジンのために書くのだ

こう書くとaltは上位表示のために役立つと理解されてしまいそうだが、そういう意味ではない。
altはほとんど上位表示のためには役立たない。

画像の内容を検索エンジンに伝えるためだ。

先ほどのカブトムシの写真を掲載しているページが「夏休みの風景」だとする。この場合は通常テーブルの上の「プラスチックの切り株の上に止まったカブトムシ」といったaltを設定すると思う。もちろん作成者の意図を表現しており正解ではある。
カブトムシの形態を事細かにaltの中に描写することはホームページ作成者の意図とは異なる。それであっても、事細かに描写することは決して間違いではない。
それはなぜか?
画像の中に書いてある内容をaltに事細かに書くことで、検索エンジンが画像の情報を文章として記憶することができることが重要なのだ。

「カブトムシ 毛」
「カブトムシ 目」
「カブトムシ 触覚」

といった検索キーワードで検索する人は、カブトムシの体の部位について詳しく知りたいのである。
このページは夏休みの話題のページであったとしても、上記キーワードで検索した人に対して、非常に有益な情報を提供している。
altを事細かに設定しないと、Googleはこの有益な情報を提示できない。

というわけで事細かに書くことは、原則論として通常は間違いではない。
しかし、例外がある。


トップに戻る時にこのようなアイコンを使った場合には、同様にaltに


青い屋根で煙突のある小さいの家のイラスト


と設定することは避けたほうがよい。単に「HOME」と設定したほうがよい。

altの設定

当ブログでも扱っている画像だ。
この電球の画像に対して、


電球のイラスト、端子の部分が黒、ソケットの部分が黄色、電球は点灯中である


とaltを設定してもスパムにはならないが、このaltは誰に対しても何の利便性も提供せず、むしろ、視覚障害者やテキストブラウザを使うときには情報を把握する際に邪魔になる。こんな場合単にaltを空にする(alt=””)。

バナーを使っていて、中に文字が書いてある場合は必ず文字と一致させる。
たまに、バナーの中の文字と一致せずそれよりもかなり長い文字がaltに設定されているケースがある。これはスパムとして扱われる危険がある。

区切り線やごく小さくほとんど見えないような何ら閲覧者に対して利便性をもたらさない画像、

このようなものはalt=””とすればよい。


さて、ここまで書いてきたがまとめてみる。

  1. 基本は画像の内容を詳細に記述する
  2. 画像の内容を詳細に書くことよりも、画像が指し示す意味が重要な場合意味を記述する
  3. 画像自体に意味がなければ空にする

ということである。

参考
実践アクセシブルHTML 第一回
画像のalt属性について

コメント

  1. […] alt属性についての考え方には以下のサイトが参考になります。 ・alt属性の正しい考え方 […]

  2. […] altにいれる文章をどうすべきか良くわかっていない方はSEOとその周辺のalt属性の正しい考え方という記事をご覧になってください。 カブトムシ 触覚ってキーワードで上位表示されて […]

  3. ギルゲエム より:

    imgタグのalt属性にはタイトルと個体名を必ず付ける

    ブログ作成者向けの内容です。

    imgタグはご存知ですね?画像を貼ってるブログやサイトをやってる方にはお馴染みのあれです。
    そこでaltタグというのも見かけます。代替テキストとい…

  4. […] alt属性の正しい考え方 […]

  5. […] より詳細は、alt属性の正しい考え方をご覧ください。 […]

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