2009-03-05 12 views
7

<img>タグのalt属性の使用目的はなんですか?画像alt属性のベストプラクティス

イメージを記述するか、スクリーンリーダー(およびイメージがオフになっている人)にとって意味のある置き換えテキストを提供する必要がありますか?

たとえば、自分のウェブサイトに短い人物の略歴があり、それらの小さな写真を含めると、「Photo of John Smith」に視覚障害のあるユーザーが本当に意味を持ちますか?

答えて

18

HTML 5仕様では、この上huge sectionを持っています。

alt属性は、イメージをまったく使用していない場合、テキストとして表示されるものでなければなりません。あなたのイメージが純粋に装飾的なものならば、alt=""を使うことができます。説明はtitle属性に記載されています。

+0

true、装飾画像にalt属性を使用するべきではありませんが、盲人用のJohn Smithの写真があることを知る上で、どのような価値がありますか?徹底的に説明し、彼の特徴を説明しない限り、それはちょっと意味がないようです。 – nickf

+0

彼らもそれをカバーしています。本当に有用な代替テキストを提供できない場合や、ページテキストが十分なので何の意味もない場合は、属性を完全に省略してください。 – flussence

+7

属性を完全に省略しないでください。それをalt = ""のままにしておいてください。そうでなければ、一部のスクリーンリーダーはそれを "graphic " – Kai

2

何らかの理由で画像を読み込めなかった場合は、「代替」テキストが表示されます。あなたの例では、私はそれが適切であると言います。

0

画像が表示されない場合は、ユーザーに役立つものでなければなりません。

Btw IEの画像上にカーソルを置いたときのツールチップに、ALTがALTの正しい動作ではないことが表示されます。これにはタイトルが使用されています。

+0

をロードすることができません。それはTITLEの1つの可能な使用です。 – Sparr

1

googleの最初のヒット[img alt accessibility]はになります画像が表示されていないときのページの外観やサウンドを考えてみましょう。次に、それぞれの画像について、置き換えとして最もよく機能する代替テキストを書きます。Guidelines on alt texts in img elements

0

盲人と話しているかのように、イメージを簡潔に記述します。ものすごく単純。

この属性値は、Googleがイメージ検索のインデックスに使用していると確信しています。

3

w3.orgから:

代替テキストは非常に有用かもしれないが、それは注意して取り扱う必要があります。著者は、次のガイドラインに従ってください。ページをフォーマットすることを意図した画像を含むとき

  • は無関係な代替テキストを指定しないでください、例えば、ALT =「赤いボールは」飾るために赤いボールを追加した画像には不適切だろう見出しまたは段落。そのような場合、代替テキストは空の文字列( "")でなければなりません。著者は、どのような場合でもイメージを使用してページの書式を設定しないようにすることをお勧めします。代わりにスタイルシートを使用する必要があります。
  • 意味のない代替テキスト(例:「ダミーテキスト」)は指定しないでください。これはユーザーを苛立たさせるだけでなく、テキストを音声または点字出力に変換する必要があるユーザーエージェントを遅くします。
4

私は、altテキストを使って画像と同じ情報を伝達することを考えています。これはイメージが何であるかによって異なります。

ナビゲーションエレメントは、外観(「右矢印」)よりも機能(「次のページ」、「戻る」)によってよりよく記述されます。

などのジョン・スミスの写真はジョン・スミスの説明、または場所を取るイベントの説明に置き換えることがあり

2

「alt」属性は、イメージのセマンティクスの代替(テキスト)表現です。これはロードできない画像にのみ使用されるのではなく、スクリーンリーダーやテキストのみのブラウザーにも使用されます。

altテキストの種類を含めた特定のケースでは、そのページにその人物の写真が含まれているかどうかが重要であると考えるかどうかによって異なります。純粋に視覚的なアイテムであれば、altテキストは必要ありません。それが何らかの種類のリンクとしても使用されている場合は、おそらくを実行します。には、スクリーンリーダーを使用している人がリンクに続く可能性のあるものについての手掛かりを得るためのaltテキストが必要です。

0

私は私のウェブサイト上の 人の短い伝記を持っており、それらの 小さな写真が含まれている場合、それは本当に を読み出す「ジョン・スミスの写真を」持っている視覚障害者 に有意義 です彼らへ?

あなたがその代替テキストを持っていない場合、あなたは彼らが画像を想定していると思いますか? 「ジョン・スミスと彼の妻の写真」? 「オスカーを受け入れるジョン・スミスの写真」? 「JFKを暗殺したジョン・スミスの写真」? "彼のペットの象によって殺害された後、パティオで死んだジョン・スミスの写真"?

これはJohn Smithの写真です(はい、そうです)。それが他のものなら、そう言いなさい。

+0

男、ジョンスミスの男には素晴らしい冒険があります。私が指摘していた代替案は、オスカーや殺人虫を含まない写真にalt = ""を使用していました。 – nickf

0

alt属性は、imgタグで使用されます。

Altキーは、それが画像の短い説明するために使用される

代替を意味します。これは、場合ブラウザの画面上に表示される

タイトルテキストが利用できない場合IEのみALTテキストを示す画像

Click to Know more

+1

リンクがどのように問題を解決するのに役立つか説明してください。 – Phani

+0

あなたの答えも説明してください。 –

関連する問題