HTML imgタグ：title属性とalt属性？
私は Amazon をブラウズしていたのですが、「 1TB 」を検索すると、星の評価画像の上にマウスカーソルを置くと、IEを使用している場合にのみスコアが表示されます。別のブラウザを使用している場合、スコアは表示されません。
評価3.8と評価4.2は、両方とも4つ星として表示されます。もちろん、3.8星対4.2星（76％対84％のスコア）が違いを生む可能性があります！
これは、altテキストを表示する標準的な方法は、ユーザーがグラフィックスをオフにしたとき、またはブラウザーが「読み上げられた」とき（視覚障害のあるユーザー向けのブラウザーなど）のみであるためです。 IEただし、ホバー時に表示します。
したがって、ユーザーのブラウザに関係なくAmazonで表示する場合は、titleに加えてaltを使用する必要があります。同意しますか？
両方に行きます。タイトルはすべてのブラウザで素敵なツールチップを表示し、altは画像のないブラウザで閲覧したときに説明を表示します。
とは言うものの、商品を閲覧するために実際に画像がオフになっているか、画像をサポートしていないブラウザを使用している「ストア」に行く「サーファー」の統計を参照してください。人口の90％が28kモデムを使用してInterWebに接続する時代はもう終わりだと思います。
それらはさまざまな目的に使用されます。 alt属性が使用されます代わりに画像。画像を表示できない場合、またはスクリーンリーダーで（と思われる）。
title属性は、画像とともにに沿ってで表示されます。通常、ホバーツールチップとして表示されます。
一方を他方の「代わりに」使用しないでください。それぞれがを適切に使用して、設計された目的を実行する必要があります。
altとtitleは、すでに述べたように、異なるもののためのものです。 title属性はツールチップを提供しますが、altも重要な属性です。これは、画像を表示できない場合に表示するテキストを指定するためです。 （また、Firefoxなどの一部のブラウザーでは、このテキストwhileが読み込まれます）
私がすべきもう1つのポイントは、XHTMLドキュメントとして検証するためにalt属性がrequiredであるのに対し、- title属性は、単なる「追加オプション」です。
それは、それらが異なる目的に役立つためであり、それらは両方を一方だけでなく他方で使用する必要があるためです。
「alt」は、皆さんが既に言ったことを表します。そのため、画像を表示できない場合（何らかの理由で）、それが何であるかを見ることができます。
「タイトル」属性は、画像のタイトル付きのツールチップを表示するための正しい属性です。
私の意見では、画像が表示されていない場合、代替テキストは常に画像に表示されているものを記述する必要があります。
alt = text [CS]画像、フォーム、アプレットを表示できないユーザーエージェントの場合、この属性は代替テキストを指定します。代替テキストの言語は、lang属性によって指定されます。
XHTMLに厳密に準拠するには、altが必要だと思います。
他の人が指摘しているように、タイトルはツールチップ用であり（必要なもの）、altはアクセシビリティ用です。両方を使用しても何も問題はありませんが、altは常に存在する必要があります。
ALT属性は、スクリーンリーダーを使用する視覚障害のあるユーザー向けです。 ALTが画像タグから欠落している場合、画像のURL全体が読み取られます。画像がサイトのデザインの一部である場合は、ALTを引き続き使用する必要がありますが、空のままにしておくと、サイトのすべての部分でURLを読み取る必要がなくなります。
ASP.NET MVCのMVCFuturesは両方を行うことを決定しました。実際、「alt」を指定すると、同じ値を持つ「title」が自動的に作成されます。
ソースコードはありませんが、簡単なGoogle検索でテストケースが見つかりました！
[TestMethod]
public void ImageWithAltValueInObjectDictionaryRendersImageWithAltAndTitleTag() {
HtmlHelper html = TestHelper.GetHtmlHelper(new ViewDataDictionary());
string imageResult = html.Image("/system/web/mvc.jpg", new { alt = "this is an alt value" });
Assert.AreEqual("<img alt=\"this is an alt value\" src=\"/system/web/mvc.jpg\" title=\"this is an alt value\" />", imageResult);
}
alt属性は、タグのセット（つまり、img、area、およびオプションでinputおよびappletの場合）で定義され、オブジェクトに相当するテキストを提供します。
同等のテキストは、次の一般的な状況でWebサイトとその訪問者に次の利点をもたらします。
- 現在、Webブラウザーは、非常に多様なプラットフォームで非常に異なる容量で使用できます。画像をまったく表示できないものや、制限された種類の画像のみを表示できるものもあります。一部は、イメージをロードしないように構成できます。コードの画像にalt属性が設定されている場合、これらのブラウザーのほとんどは、画像の代わりに指定した説明を表示します
- 視覚障害者、色覚異常者、弱視者などの訪問者の一部は画像を見ることができません。 alt属性は、ページに何が含まれているかを知るためにalt属性に依存できる人々にとって非常に役立ちます。
- 検索エンジンボットは、上記の2つのカテゴリに属します。Webサイトをインデックスに登録するだけでなく、値付けする場合は、alt属性を使用して、ページの重要なセクションを見逃さないようにします。
この手法の目的は、ユーザーがtitle属性でヘルプ情報を提供することにより、フォームにデータを入力する際に状況依存ヘルプを提供することです。ヘルプには、形式情報や入力例が含まれる場合があります。
例1：検索の範囲を制限するプルダウンメニュー
検索フォームでは、プルダウンメニューを使用して検索範囲を制限します。プルダウンメニューは、検索語の入力に使用されるテキストフィールドのすぐ隣にあります。検索フィールドとプルダウンメニューの関係は、視覚的なデザインを見ることができるユーザーには明らかです。視覚的なデザインには、ラベルを表示する余地がありません。 title属性は、selectメニューを識別するために使用されます。 title属性は、スクリーンリーダーで読み上げたり、画面拡大鏡を使用しているユーザー向けのツールヒントとして表示したりできます。
<label for="searchTerm">Search for:</label>
<input id="searchTerm" type="text" size="30" value="" name="searchTerm">
<select title="Search in" id="scope">
...
</select>
例2：電話番号の入力フィールド
Webページには、米国の電話番号を入力するためのコントロールが含まれており、市外局番、交換、最後の4桁の3つのフィールドがあります。
<fieldset>
<legend>Phone number</legend>
<input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" >
<input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" >
<input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" >
</fieldset>
例3：検索機能Webページには、ユーザーが検索語を入力できるテキストフィールドと、検索を実行するための「検索」というラベルの付いたボタンが含まれています。 title属性はフォームコントロールを識別するために使用され、ボタンはテキストフィールドの直後に配置されるため、ユーザーはテキストフィールドに検索語を入力する必要があることがわかります。
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
例4：フォームコントロールのデータテーブル
フォームコントロールのデータテーブルは、各コントロールをそのセルの列ヘッダーと行ヘッダーに関連付ける必要があります。タイトル（または画面外のLABEL）がなければ、非視覚的なユーザーは、フォームをタブで移動しながら支援技術を使用して、対応する行/列ヘッダー値を一時停止して問い合わせることは困難です。
たとえば、調査フォームの最初の行には、質問、同意、未決定、反対の4つの列ヘッダーがあります。次の各行には、3つの列の回答の選択に対応する各セルに質問とラジオボタンが含まれています。すべてのラジオボタンのタイトル属性は、回答の選択肢（列ヘッダー）と質問のテキスト（行ヘッダー）を連結したもので、ハイフンまたはコロンが区切り記号として使用されます。
[〜＃〜] mdn [〜＃〜] で言及されている許可された属性。
altcrossorigindecodingheightimportance（実験的なAPI）intrinsicsize（実験的なAPI）ismapreferrerpolicy（実験的なAPI）srcsrcsetwidthusemap
ご覧のとおり、title属性はimg要素内では許可されていません。 alt属性を使用し、必要に応じてCSSを使用します（例：疑似クラス:hover）title属性の代わりに。
いいえ、altの方が優れていると思います。なぜなら、その属性の目的は、画像が表示できない場合（画像が欠落している場合やブラウザ自体が機能していない場合）に「代替」テキストを提供するためです表示する）。
Img要素にはtitle属性を使用しないでください。この背後にある理由は非常に簡単です。
おそらくキャプション情報は、デフォルトですべてのユーザーが利用できる重要な情報です。その場合、このコンテンツを画像の横にテキストとして提示します。
出典：http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/ =
HTML 5.1には、title属性の使用に関する一般的なアドバイスが含まれています。
多くのユーザーエージェントは、この仕様で要求されるようにアクセス可能な方法で属性を公開しないため、タイトル属性に依存することは現在推奨されていません最新の携帯電話やタブレットを持っている人など、タッチのみのユーザー）。
出典：http://www.w3.org/html/wg/drafts/html/master/dom.html#the-タイトル属性
アクセシビリティとさまざまなスクリーンリーダーに関しては：
- ジョー10-11：デフォルトでオフ
- Window-Eyes 7.02：デフォルトでオン
- NVDA：サポートされていません（サポートオプションなし）
- VoiceOver：サポートされていません（サポートオプションなし）
したがって、 Denis Boudrea 適切にそれを置いてください：明らかに推奨されるプラクティスではありません。