HiGash.Net ホームページへ戻る

Home [Blog] » IMGのalt属性・title属性について考える(後編)

IMGのalt属性・title属性について考える(後編)

IMGのalt属性・title属性について考える(後編)

今回のエントリーは前回に引き続き「IMGのalt属性・title属性について考える」の続編です。

「alt属性・title属性について考える」とか言っておきながら前回のエントリーは、イメージ画像はIMGかCSSの背景画像かという話に終始してしまった感があります・・・。エントリーの結論としては サイト制作時のポリシー次第 ということにしましたが、僕の場合はどちらかと言えばIMG派。
前編に書いた通り、Webページの背景ではなく前景にイメージ画像があるのだったら普通にIMGでいいんじゃないかと思うのです。さらに制作者サイドとして正直なことを言えば、画像に対してテキストの回り込みをする場合など、 制作面の技術的な難易度を考慮した際にIMGを使うほうが楽 というのも僕がIMG派である大きな理由です。

そして今回は実際にイメージ画像をIMGで表示した場合にaltをどうするかということを中心に、alt属性について考えてみました。また、それに付随してIMGに関するtitle属性についても少しだけ触れてみます。

イメージ画像は無意味? 実際のところ

前回のエントリーの通り、「alt=""」というふうに空のaltを設定すること自体は文法的に何ら問題ありません。
とは言え実際のところ、空のaltっていうのはあまり気持ちのいいものではないし、「とりあえずaltは空で」っていう安易な考え方はあまり感心できないのも事実。そもそも イメージ画像だってコンテンツの内容と全くかけ離れた無意味なものであるはずはなく、何かしらコンテンツと関連があることを意図して配置する わけだから、altだって書こうと思えば書けないことはない気がしてきます。

というわけで、実際に下のようなコンテンツとともに配置されるイメージ画像について、空のaltも含めてaltとして考えられる4つのパターンを提示してみます。

代替テキストの指定方法

ページの整形を目的とした画像に対して、不要な代替テキストを指定しないこと。例えば、見出しや段落を装飾するために加えられた赤い丸の画像について、 alt="赤い丸"などとするのは、不適当である。こうした状況では、代替テキストは空文字列("")とする必要がある。何にせよ、著者は、ページの整形に画像を用いることを避けるようにすべきである。その代わりにスタイルシートを用いる必要がある。 — HTML 4.01仕様書(邦訳) より

1. alt=""(alt="空")

まずは素直に空のパターンです。正攻法といってよいと思います。空のaltは一般的なテキストブラウザでは認識されず、音声ブラウザでも読み上げられません。画像は無に等しい状態として扱われます。

2. alt="写真:後ろ姿の幼い男の子"(alt="画像の内容")

画像自体の内容を説明するパターンです。テキストブラウザや音声ブラウザなどで見た場合も、どんな画像があるのかはなんとなく把握できると思います。しかし、場合によってはコンテンツの内容との関連性がわかりにくく唐突なaltとなってしまう可能性があります。

3. alt="イメージ写真:代替テキストの指定方法"(alt="イメージの明示")

コンテンツの内容に関連するイメージ画像であることを潔く(?)明示するパターンです。ただし、画像自体がどんな内容なのかを推し量ることは困難になります。

4. alt="ページの整形を目的とした画像に対して、不要な代替テキストを指定しないこと"(alt="コンテンツの内容")

コンテンツの内容をそのままaltにしてしまうパターンです。実際、見出しなどのキーワードをそのままaltに埋め込んでしまっているWebサイトをよく見かけます。画像の情報については何も伝えないことになりますが、SEOとしては有効な手段かもしれません。

僕がざっと考えてみて思いつくのは大きく分けてこの4つのパターンです。

前述の通り、非視覚系ブラウザでは空のaltは無視されるのが一般的なので、冗長な音声読み上げ(音声ブラウザ)や重要でないテキストの表示を排除する(テキストブラウザ)という点では 1. alt=""(alt="空") が最もスマートなaltの記述と言えると思います。
ただ、僕は 3. alt="イメージ写真:代替テキストの指定方法"(alt="イメージの明示") も「ありっちゃありかなぁ」と思っています。ほんとに簡潔に記されたaltならば。

とにかくSEOありきっていうサイトのあり方はどうなのかと思うけれど、でも商売として考えたらSEOは決しておざなりにするわけにはいかないんですよね。
実際にIMGのalt属性にしか存在しないワードで検索してみるとわかるのですが、重要度はどうあれ 現在のGoogleはaltの内容もきちんと拾っています (Yahoo!はaltの内容を見ていない気がする)。 4. alt="ページの整形を目的とした画像に対して、不要な代替テキストを指定しないこと"(alt="コンテンツの内容") までいっちゃうと、さすがにえげつないと感じるのですが、 イメージ画像であることを明示したうえで簡潔に記述し、かつアクセシビリティを損なう恐れがあることも理解したうえで、SEOを重視してあえてそういうaltを設定する というのであれば、それは認めざるをえないと思うのです。

これは、Webサイトが現在どのステージにいるのかという “サイトの市場価値” にも関連する話だと思います。すでに多くの人に認知され、ブランドとして成り立っているサイトは小手先のSEOよりもアクセシビリティを重要視すべきでしょう。アクセシビリティへの細やかな配慮など、サイトの品質面をより一層高めることで、おのずとサイトの価値も高まるはずですから。
逆に言えば、まだまだ自己の存在を一人でも多くの人に認知してもらおうというステージにいるサイトの場合は、アクセシビリティよりSEO重視という方針でaltを設定していくのも一様に悪とは言い切れないと思います。もちろん、altにキーワード入れまくりみたいなあまりに節操のないやり方には賛同しかねますけど。

Aタグ内のイメージ画像はリンク先を表す

イメージ画像であっても必ず空ではないaltを入れなければならない例外として、 Aタグ内に画像しか存在しない場合の画像 があげられます。つまりクリック可能で、クリックするとページ(またはページ内)を移動してしまうアンカー画像です。

なぜかというと、 Aタグ内に画像しかないときにaltが空だと音声ブラウザやテキストブラウザではリンクを使う手立てが無くなってしまうから です。だから、一般的にアンカーとして機能する画像のaltにはリンク先のページについての情報を記述すべきとされています。

次のような例を考えればわかりやすいでしょうか。HTMLソースを見れば、非視覚系ブラウザにおいてはAタグ内の画像はイメージ画像であれボタン画像であれ、アンカーとしての機能を持っていることが最重要であることが理解できると思います。

下のイメージをクリックすると「IMGのalt属性・title属性について考える」の前編が別ウィンドウで開きます。

IMGのalt属性・title属性を考える(前編)」を読む

下のボタンをクリックすると「IMGのalt属性・title属性について考える」の前編が別ウィンドウで開きます。

IMGのalt属性・title属性を考える(前編)」を読む

HTML


<a href="#"><img src="image.jpg" alt="「IMGのalt属性・title属性を考える(前編)」を読む" /></a>

空のaltを使わないで済むようにするには

イメージ画像のaltは空がベストというのはわかるけど、それでも空のaltは気持ち悪いのでできるだけ避けたいという人のために、なるべく空のaltを使わないで済む方法を2つほどあげてみます。

1. なるべく文字列と一緒にイメージ画像を切り出すようにしてみる

ブラウザ上で美しいフォントを表示できない現在のWeb事情では、デザイン性を重視するためタイトルの文字列を画像で表現することが多いですよね。たとえば下のようなデザインの場合、文字と画像を別々のパーツとして切り出すのではなく、1枚絵として切り出せばaltには必然的にタイトル文字の内容が入ることになります。

IMGのalt属性・title属性について考える(後編)

HTML


<h1><img src="image.jpg" alt="IMGのalt属性・title属性について考える(後編)" /></h1>

2. イメージ画像にアンカーとしての機能を持たせる

前述の通り、アンカー画像のaltにはリンク先の情報を記述してやるのが基本です。下の例のようなデザインはよく見かけますが、画像にリンクを設定してあげればaltにはリンク先情報を記述することになります。ユーザビリティ的に見てもこういった画像はクリックできると考える人が多いですし、画像をアンカーにすることでサイト内リンクの数を増やすことにもつながります(SEO対策)。

「IMGのalt属性・title属性を考える(前編)」を読む

IMGのalt属性・title属性を考える(前編)

HTMLをマークアップしている時に、IMGのalt属性に何て書こうか悩むことってありますよね。最近 「alt属性が空なら、CSSで背景画像として扱うべきなの?」 という面白い記事を発見したので、ちょっとalt属性や背景画像について自分なりに整理してみることにします。 続きを読む

HTML


<a href="#"><img src="image.jpg" alt="「IMGのalt属性・title属性を考える(前編)」を読む" /></a>
<h5><a href="#">IMGのalt属性・title属性を考える(前編)</a></h5>
<p>HTMLをマークアップしている時に...<a href="#">続きを読む</a></p>

ざっと思いつくのはこんなところでしょうか。もちろんaltが空の画像を嫌うのであれば、CSSの背景画像にしてしまうという手もありますよね。

ツールチップはaltが出しているという勘違い

最後にtitle属性について少しだけ触れてみます。

HTML 4.01仕様書(邦訳) によれば、titleは「当該要素に関する助言的情報を提供する」とされています。altが画像を表示できなかった場合に表示されるテキスト(代替テキスト)であるのに対して、titleは画像の補足説明といった扱いでしょうか。少しわかりにくい属性ですが、画像上にマウスをポインタした際に表示されるツールチップの内容がそれです。

未だに勘違いしている人が多いようですが、IEで画像上にマウスをポインタした際に表示されるツールチップはaltの内容とは限りません。 FirefoxやSafari、Operaなど視覚系ブラウザの多くはツールチップにtitle属性の内容を表示します。 alt=代替テキスト・title=助言的情報という属性の定義を考えれば、これが本来の視覚系ブラウザの挙動といってよいと思います。
IEも基本はtitleをツールチップとして表示するのですが、 titleが未指定でaltが指定されている場合になぜかaltをツールチップとして表示する という特殊なクセがあります。よくaltを確認するためにツールチップを表示させている人がいますが、あれは必ずしもaltの確認とはなりませんのでご注意を。

titleがツールチップに表示されるということを利用すれば、IEでaltをツールチップとして表示したくない場合は <img alt="ほげほげ" title=""> と記述すればOKです。

というわけで。長い長いエントリーとなりましたが、まとまったかな・・・。alt属性に関する考察はいろんな観点からたくさんの方が行っていらっしゃいますので、下記のリソースもぜひ参照されたし。

Share & Bookmark
このエントリをFacebookでシェアする
このエントリをTwitterでつぶやく
このエントリをはてなブックマークに追加
Delicious
livedoorクリップ
Yahoo!ブックマーク
Buzzurl

コメント/トラックバック

1 件のコメント/トラックバックをいただきました。ありがとうございます!!

  1. 『姉ログ』 より:

    alt属性に入れる内容の基準は
    alt属性に何を入れるか悩んでいる記事を読んで、自分の場合はどうかな〜とちょっと考えをまとめてみる。 前回のエントリーの通り、「alt=""」というふうに空のaltを設定すること…

ぜひこのエントリーに対するコメントをお聞かせください。

以下のURLでトラックバックも受付けています。

http://higash.net/20081120/alternate-2.html/trackback/

Preview

トラックバック
http://higash.net/20081120/alternate-2.html/trackback/

Page Top