HTMLimgタグのalt属性とtitle属性の使い方紹介

ブラウザベンダーが標準を歪め、ルールから外れたことを勝手に行うと、問題が発生したり、少なくとも混乱が生じたりすることがあります。その一例が、多くのユーザーを持つWindows版Internet Explorerのような、一部のブラウザによるalt属性（一般にaltタグと誤って呼ばれます）の扱い方です。
altテキストはツールチップとしてではなく、より具体的には、画像の追加的な説明情報を提供するためのものではありません。むしろ、title属性は、要素のための追加の説明情報を提供するために使用されるべきです。この情報は、ほとんどの画像ビューアでツールチップとして表示されますが、製造業者はtitle属性のテキストを他の方法で自由に表示することができます。 そのため
その
この2つの属性について、多くの人が混乱しているようなので（最近、Web Standards Groupのメーリングリストでもこの質問がよく出ています）、これらをどのように使って行くべきか、私の考えを書き留めておきます。
alt属性
画像、フォーム、アプレットを表示できないユーザーエージェント（UA）に対しては、alt属性を使って置換テキストを指定します。代替テキストの言語は、lang属性で指定します。出典はこちら。代替テキストの指定方法
Alt属性（"属性 "であって "タグ "ではないことに注意）には代替の説明が含まれ、画像や画像ホットスポットに必要です。img、area、input 要素（applet 要素を含む）でのみ使用することができます。input 要素の場合、alt 属性は送信ボタンの画像を置き換えるためのものです。例えば .
alt属性は、文書内の画像を見ることができない閲覧者に、テキストによる説明を提供するために使用されます。これには、画像表示を本質的にサポートしていないブラウザや画像表示をオフにしているブラウザを使用しているユーザー、視覚障害のあるユーザー、スクリーン・リーダーを使用しているユーザーなどが含まれます。置換テキストは、追加のキャプションテキストを提供するためではなく、画像を置き換えるために使用されます。
置換テキストを書く前に、その言葉が画像を見ることができない人への説明となるかどうか、また文脈上意味をなすかどうか、よく考えてから書いてください。装飾的な画像には、「blue bullet」や「spacer.gif」のような無関係な置換テキストではなく、空の値（引用符の間にスペースがないalt=""）を使用してください。無視しないでください。無視すると、スクリーン・リーダーの中には画像ファイルのファイル名を直接読み取るものがあり、Lynxのようなテキスト・ブラウザは画像ファイルのファイル名を表示し、あなたの視聴者にはあまり役に立たなくなるからです。
テキストを含む画像イメージに置換テキストを設定するのが最も簡単で、画像に含まれるテキストを一般的にalt属性の値として使用することができます。
置き換えテキストの長さについては、WCAG2.0（Web Content Usability Guidelines 2.0）に書いてあることを見てください。
Alt属性は英語100文字以下でなければなりません。または、ユーザーは置換テキストが可能な限り短くなるようにしなければなりません。
私はこれを「できるだけ短く、必要なだけ長く」と解釈しています。
ツールチップとして表示させたい場合でも、text要素のalt属性は使わないでください、そのような使い方は想定されていません。今のところ、私が知る限りでは、Windows版のInternet Explorerと老舗のNetscape 4.*（Windows版）でしか使えません。Macのブラウザでは、ツールチップとして表示されることはありません。
ブラウザがツールチップとして置換テキストを表示すると、alt属性を間違って使っている人はそれを助長することになりました。画像として表示できない置換ではなく、追加の説明メッセージと考えがちなため、意味のない置換テキストを書くようになった人もいました。また、チップ（ツールチップ）が表示されることを望まず、alt属性の値を書くことを全く無視する人もいます。これらの誤りはすべて、画像を見ることができない視聴者に困難をもたらすものです。
追加的な記述情報や必須でない情報については、title属性を使用してください。
タイトル属性
title属性は、それを設定する要素に対して提案される情報を提供します。 その
出典 title属性です。
title属性は、base, basefont, head, html, meta, param, script, title以外のすべてのタグで使用することができます。しかし、必須ではありません。そのためか、多くの人がいつ使えばいいのかわからないようです。 その
title属性は、本質的でない追加情報を提供するために使用します。ほとんどのビジュアル・ブラウザは、特定の要素にマウスを乗せるとタイトル・テキストをツール・チップとして表示しますが、タイトル・テキストをどのように表示するかは製造者の判断に委ねられます。一部のブラウザーでは、タイトル・テキストをステータス・バーに表示します。例えば、Safariの初期バージョン。
/{br
title属性は、特にリンク自体がリンクの目的をあまり明確にしていない場合に、リンクに説明のテキストを追加するのに有効な使い方があります。これによって、訪問者はそれらのリンクがどこへ行くのかを知ることができ、まったく興味のないページを読み込むことはなくなります。また、画像に日付やその他の非本質的な情報など、追加的な説明情報を提供することも可能です。
title属性の値は、alt属性の値よりも長く設定することができます。ただし、ブラウザによっては、長すぎるテキスト（ツールチップなど）は切り捨てられるので注意してください。例えば、Mozillaのコア・ブラウザーは、最初の60文字しか表示することができません。これはMozillaのバグと考えられており、気をつけたいところです。
使用前の検討事項
私からのアドバイスは、置換テキスト（altテキスト）を簡潔にすることです。ほとんどのアプリケーションでは、空白のまま、alt=""とする必要があります。(2つの引用符にスペースがないことに注意してください)。画像を見る人にどんな情報を提供するか、どんなテキストで説明するか、あるいは画像を見ることができない人にどんな情報を提供するか、考えてみてください。テキストを「写真」に置き換えたらどうでしょう。ビルの外に立つCEO、グレーのスーツに黒のネクタイ、空を見ている」と置き換えることが、本当に画像を見ることができない人のためになるでしょうか？そう思うのなら、どうぞ書いてみてください。多くの場合、置換テキストは空白にしておいた方がいいと思います。
title属性については、使い方を厳密に指示するのは難しいです。私は主に、同じページにある同じリンクテキストが、異なるリンク先のページにあるなど、自明でないリンクに使っています。また、ボタンやフォームの要素によっては、より説明的なテキストを提供することもあります。
長い説明文
画像にalt属性の制限以上の説明が必要な場合、以下の方法があります。
longdesc属性は、画像のテキストによる説明を含む別のページへのリンクを提供するために使用できます。この場合、見る人を別のページにリンクすることになり、理解しにくいことがあります。また、longdesc 属性に対するブラウザのサポートは一貫しておらず、あまり良いものではありません。
longdesc 属性は、他のページへのリンクではなく、現在のドキュメントの他の部分（アンカーポイント）へのリンクを含むことができます。Accessibility footnotes で、Andy Clarke がこれを適用する方法をうまく説明しています。
説明文リンクは、置換テキストを含むページへの通常のリンクです。このリンクは画像の横に配置され、すべてのブラウザで利用可能です。その有効性については異論が多く、私の個人的な意見としては、この注釈もWCAGも好きではなく、WCAG 2.0のためのHTMLテクニックのワーキングドラフトでは、説明リンクは「不承認」とされています。
もし、画像の長い説明文がどの閲覧者にとっても有用であるならば、別のページにリンクしたり隠したりするのではなく、同じ文書内にシンプルに表示することを検討する必要があります。こうすれば、誰もが読むことができます。これはシンプルでローテクなアプローチです。