10

titleおよび属性の目的は理解してaltいますが、それらの最適な使用方法や、同じtitle/alt複数回使用できるかどうかがわかりません。

たとえば、犬に関するウェブサイトを見てみましょう。

私の理解では、すべてのimgタグにはalt属性が必要です:

<img src="Husky.png" alt="Husky" />
<img src="Rottweiler.png" alt="Rottweiler" />

alt同じ被写体の複数の写真に同じ属性を使用することは良い習慣ですか?

<img src="Husky2.png" alt="Husky" />
<img src="Husky3.png" alt="Husky" />
<img src="Husky4.png" alt="Husky" />

titleすべてのタグで/alt属性を使用するのは良い習慣ですか? 同じ属性を数回以上使用するのはどうですか?

例：

<ol title="This Dog">
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
  <li title="This Dog"> Dogs </li>
</ol>

<div id="body">
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
  <p title="This Dog"> </p> 
</div>

私の理解では、このtitle属性は、テキストにカーソルを合わせると表示されるツールチップとして機能します。新しいブラウザーで実行する必要がある種類のことですがalt、title古いブラウザーでも同じことをしていました。これらの属性は、検索エンジンが Web サイトを認識する方法としても機能します。

4

2 に答える 2

20

私の理解では、タイトルタグはツールチップとして機能し、新しいブラウザーでは情報タイプの上にカーソルを置き、古いブラウザーでは alt タグが同じことを行うために使用されます。

いいえ、属性titleとalt属性には異なる意味/目的があります (古い方法と新しい方法ではありません)。

題名

このtitle属性はグローバル属性です。つまり、すべての要素で使用できます。一般的に（いくつかの要素（abbr要素など）には特別な意味があることに注意してください）、次のように定義されます。

属性は、要素のtitle助言情報を表します […]

属性の定義を読む必要があります。使用方法が説明されています。

代替

この属性は、(画像ボタンの場合) および要素altでのみ使用できます。の場合、次の意味があります。areainputimgimg

alt属性の値はimg要素のフォールバック コンテンツであり、画像を処理できない、または画像の読み込みを無効にしているユーザーとユーザー エージェントに同等のコンテンツを提供します。

この属性を使用する (しない) 方法には多くのルールがあります。

したがって、alt属性は画像の代替です。画像を見るか、代替テキストを読みます。alt値は、画像への追加として与えたり提示したりしないでください。

このtitle属性は、両方 (画像を見るユーザーと代替テキストを読むユーザー) に提供される追加情報を提供します。ただし、属性を重要な情報の唯一の手段として使用しないでください。理由は…</p> title

  • … 典型的なプレゼンテーションは、多くの場合、ツールチップの後ろに「隠されています」 (ユーザーは、すべての要素にカーソルを合わせるわけではないため、ツールチップが存在することを必ずしも認識していません)。
  • …キーボードまたはタッチスクリーンのユーザーは、ホバーできないため、ツールチップがまったく表示されないことがよくあります
  • … スクリーン リーダーは、多くの場合、値を読み上げたり、通知したりしませんtitle(デフォルト設定では)
于 2012-10-31T21:47:40.010 に答える
3

ALT: 代替テキストは、ブラウザで画像を無効にすることを選択した人々や、単に画像を「見る」ことができないユーザー エージェントのための代替情報源を意味します。画像の内容を説明し、訪問者に興味を持ってもらいます。代替テキストがない場合、画像は空のアイコンとして表示されます: alt なし

Internet Explorer では、画像にカーソルを合わせると Alt テキストもポップアップします。さらに、Google は、画像が何であるかを理解しようとする際に、主に代替テキストに焦点を当てていることを公式に確認しました。

alt を含む画像ですが、画像が表示されません。

<img src="a.png" alt="Ann Smarty">

ここに画像の説明を入力

alt と画像のない別の画像が表示されません。

<img src="a.png">

ここに画像の説明を入力

タイトル: 画像のタイトル (および要素名がそれ自体を物語っています) は、追加情報を提供し、通常のタイトルの規則に従う必要があります。関連性があり、短く、キャッチーで、簡潔でなければなりません (タイトルは、「要素に関する助言情報を提供します」設定されています」）。FireFox と Opera では、画像にカーソルを合わせるとポップアップします: タイトルと表示画像のある画像。

<img src="a.png" title="Optimize Images For Search Engines, Social Media">

ここに画像の説明を入力

続きを読む: http://www.searchenginejournal.com/image-alt-text-vs-image-title-whats-the-difference/

于 2015-07-06T07:45:07.983 に答える