HTMLのimgタグ:タイトル属性とalt属性？

StackOverflow https://stackoverflow.com/questions/872389

  •  22-08-2019
  •  | 
  •  

質問

閲覧していました アマゾン 」と検索していて気づきました。1TB「IE を使用している場合、星評価画像の上にマウス カーソルを置くと、スコアのみが表示されます。別のブラウザを使用している場合、スコアは表示されません。

評価 3.8 と評価 4.2 は両方とも 4 つ星として表示されます。もちろん、3.8 つ星と 4.2 つ星 (スコア 76% と 84%) では違いが生じる可能性があります。

これは、標準的な表示方法であるためです。 alt テキストは、ユーザーがグラフィックスをオフにしたとき、またはブラウザーが「読み上げ」になっているとき (視覚障害のあるユーザー用のブラウザーなど) にのみ表示されます。ただし、IE ではホバー時にそれが表示されます。

したがって、Amazon がユーザーのブラウザに関係なく表示するのであれば、次のようになると思います。 title に加えて使用する必要があります alt. 。同意しますか？

役に立ちましたか？

解決

私は両方のために行くと思います。なし画像をブラウザで閲覧時のタイトルは、すべてのブラウザでの素敵なツールチップが表示され、altが説明を行います。

それは私が商品をブラウズする「ストア」に行くそこに「サーファー」は、実際に画像がオフになっているか、イメージをサポートしていないブラウザを使用しているどのように多くのいくつかの統計を見てみたい、と述べました。私は、人口の90％がInterWebに接続するために、28Kモデムを使用している日が終わっlooooongていると思います。

他のヒント

それらはさまざまな目的で使用されます。の alt 属性が使用されています その代わり 画像の。画像が表示できない場合、またはスクリーン リーダーで表示できない場合。

の title 属性が表示されます 平行 通常はホバー ツールチップとして画像とともに表示されます。

一方を他方の「代わりに」使用しないでください。それぞれを使用する必要があります きちんと, 、設計されたことを実行するためです。

代替 そして タイトル すでに述べたように、目的は異なります。一方、 タイトル 属性はツールチップを提供します。 代替 画像を表示できない場合に表示するテキストを指定するため、これも重要な属性です。(Firefox などの一部のブラウザでは、このテキストも表示されます その間 画像が読み込まれます）

私が指摘すべきもう 1 つの点は、 代替 属性は 必須 XHTML ドキュメントとして検証するのに対し、 タイトル 属性は、いわば「追加オプション」にすぎません。

彼らは異なる目的を果たすと、彼らの両方が1つだけでなく他の上を使用する必要があります。

ので、

それがあります

「ALTは、」あなたたちはすでにあなたはそれがすべての画像が（何らかの理由で）表示することができない場合についてです画像が何を見ることができますので、それはまた、視覚障害の人がイメージだかを理解することを可能にする、と述べた何のためにありますおよそます。

「タイトル」属性は、画像のためのタイトルでツールチップを表示するための正しいものである。

私の意見ではaltテキストは、常に画像が表示されていない場合のために、画像に表示されているかを説明する必要があります。

  

ALT =テキスト[CS]       画像、フォーム、またはアプレットを表示できないユーザエージェントの場合、この属性は、代替テキストを指定します。代替テキストの言語は、lang属性によって指定されます。

w3.orgする

私はALTが厳格なXHTMLに準拠するために必要とされると信じています。

他の人が指摘したように、

、タイトルがツールチップのためである（あると便利）、ALTは、アクセシビリティのためです。両方使用して、しかし、ALTが常に存在する必要がありますと何も間違っています。

いいえ、私はその属性の目的は、画像を表示することができないという場合に、「代替」のテキストを提供することであるためaltが優れていると思います（それは画像が欠落していることや、ブラウザ自体は表示することができないということかそれ）。

ASP.NET MVCのためのMVCFuturesは、両方を行うことを決めました。あなたは「ALT」を提供する場合、実際にはそれが自動的にあなたのための同じ値に「タイトル」を作成します。

私が手に、ソースコードを持っていませんが、迅速な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);
    }

img 要素には title 属性を使用しないでください。この背後にある理由は非常に単純です。

おそらく、キャプション情報は、デフォルトですべてのユーザーが利用できるべき重要な情報です。その場合は、このコンテンツを画像の横にテキストとして表示します。

ソース： http://blog.paciellogroup.com/2010/11/using-the-html-title-attribute/

HTML5.1 title 属性の使用に関する一般的なアドバイスが含まれています。

多くのユーザーエージェントがこの仕様で要求されているようなアクセス可能な方法で属性を公開していないため、title 属性に依存することは現在推奨されていません (例:ツールチップを表示するにはマウスなどのポインティング デバイスが必要ですが、これにはキーボードのみのユーザーやタッチのみのユーザー (最新の電話やタブレットを使用している人など) が除外されます。

ソース： http://www.w3.org/html/wg/drafts/html/master/dom.html#the-title-attribute

アクセシビリティとさまざまなスクリーン リーダーに関しては、次のとおりです。

  • ジョーズ 10-11:デフォルトではオフになっています
  • ウィンドウアイズ 7.02:デフォルトでオンになっている
  • NVDA:サポートされていません (サポート オプションがありません)
  • ボイスオーバー：サポートされていません (サポート オプションがありません)

したがって、次のように デニス・ブードロー 適切に言います： 明らかに推奨される行為ではありません.

ALT属性は、スクリーンリーダーを使用する視覚障害者のためのものです。 ALTは、任意の画像タグから欠落している場合は、画像のURL全体が読み込まれます。画像はサイトのデザインの一部のためのものであるならば、彼らはまだALTを持っている必要がありますが、URL、サイトのすべての部分のために読み取る必要がないように、彼らは空のままにしておくことができます。

ALT 属性

の alt 属性は一連のタグで定義されます (つまり、 img, area そしてオプションで input そして applet) を使用すると、オブジェクトに相当するテキストを提供できます。

同等のテキストは、次の一般的な状況において、Web サイトとその訪問者に次の利点をもたらします。

  • 現在、Web ブラウザは、さまざまな機能を持つさまざまなプラットフォームで利用できます。画像をまったく表示できないものや、限られた種類の画像しか表示できないものもあります。画像をロードしないように設定できるものもあります。コードの画像に 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 つの列の回答の選択肢に対応する各セルに質問とラジオ ボタンが含まれています。すべてのラジオ ボタンの title 属性は、回答の選択肢 (列ヘッダー) と質問のテキスト (行ヘッダー) をハイフンまたはコロンを区切り文字として連結したものです。

画像要素

で言及されている許可される属性 MDN.

  • alt
  • crossorigin
  • decoding
  • height
  • importance (実験用API)
  • intrinsicsize (実験用API)
  • ismap
  • referrerpolicy (実験用API)
  • src
  • srcset
  • width
  • usemap

ご覧のように title 属性は内部では許可されません img 要素。私は使うだろう alt 属性があり、必要な場合は CSS を使用します (例:疑似クラス :hover） の代わりに title 属性。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top