画像のalt属性に関するベストプラクティスは何ですか？
たとえば、「スタッフの世話をします」というキャプション付きの画像があり、それに付随する画像は、バンの窓からカメラに向かって見ている男性の写真です。代替コンテンツには、次のようなものが必要です。
「スタッフのお世話になります」（画像キャプションのコピー）
また
「バンの窓からカメラに向かって見ている男性の写真」（画像の説明）
4 に答える
4
altタグはコンテキストに関連しているため、「間違った」または「正しい」書き方はありません。たとえば、次のシナリオを考えてみましょう。あなたのサイトでは、エンドユーザーは自分の好きな色を選ぶように求められます：
altタグは次のようになります。
<ul>
<li><a href="red.html"><img src="red.jpeg" alt="Red"></a></li>
<li><a href="green.html"><img src="green.jpeg" alt="Green"></a></li>
<li><a href="blue.html"><img src="blue.jpeg" alt="Blue"></a></li>
</ul>
2番目のシナリオは、Webサイトにリンクするロゴがある場合、altタグはリンクの説明である必要があります。
よく書かれたaltタグは次のようになります。
<a href="http://w3.org">
<img src="images/w3c_home.png" width="72" height="48" alt="W3C web site">
</a>
あなたのシナリオにより適しているのは、次の例です。
これは、ページコンテンツの主題に密接に関連しているが、直接説明されていない画像の例です。詩を暗唱するページにある、詩に触発された絵画の画像。次のスニペットは例を示しています。画像は「エシャロットの女」と題された絵画で、詩から着想を得ており、主題は詩に由来しています。したがって、代替テキストを提供することを強くお勧めします。alt属性には画像の内容の簡単な説明があり、画像の下にはドキュメントの下部にある長い説明へのリンクがあります。長い説明の最後には、絵画に関する詳細情報へのリンクもあります。
代替テキストには次のコードが必要です
<header><h1>The Lady of Shalott</h1>
<h2>A poem by Alfred Lord Tennyson</h2></header>
<img src="shalott.jpeg" alt="Painting of a young woman with long hair, sitting in a wooden boat. ">
<p><a href="#des">Description of the painting</a>.</p>
<!-- Full Recitation of Alfred, Lord Tennyson's Poem. -->
...
...
...
<p id="des">The woman in the painting is wearing a flowing white dress. A large piece of intricately
patterned fabric is draped over the side. In her right hand she holds the chain mooring the boat. Her expression
is mournful. She stares at a crucifix lying in front of her. Beside it are three candles. Two have blown out.
<a href="http://bit.ly/5HJvVZ">Further information about the painting</a>.</p>
ただし、....altタグをすべて一緒に省略できる場合があります。たとえば、すぐ下のページの画像に関連するコンテキストの説明を含む上記の画像がある場合：
キングストンアポンテムズの川沿いにあるボーターズバーで、毎週金曜日に中世のテーマナイトにご参加ください。
上記の例では、次のソリューションのいずれかが準拠しています。
<p><img src="shalott.jpeg" alt=""></p>
<p>Join us for our medieval theme nights every Friday at
Boaters Bar,on the riverside, Kingston upon Thames.</p>
または
<p><img src="shalott.jpeg" alt="Painting of a woman in a white flowing dress, sitting in a small boat."></p>
<p>Join us for our medieval theme nights every Friday at Boaters Bar,
on the riverside, Kingston upon Thames.</p>
于 2012-07-05T08:53:32.453 に答える
3
w3.orgから抽出
画像にコンテンツを理解するために重要な単語が含まれている場合、代替テキストにはそれらの単語を含める必要があります。これにより、代替テキストがページ上で画像と同じ機能を果たします。画像自体の視覚的特性を必ずしも説明するものではなく、画像と同じ意味を伝える必要があることに注意してください。
例1
ウェブサイト上の画像は、無料のニュースレターへのリンクを提供します。画像には「無料のニュースレター。無料のレシピやニュースなどを入手してください。詳細をご覧ください。」というテキストが含まれています。代替テキストは画像のテキストと一致します。
例2
Webサイトの画像は、建物の間取り図を表しています。画像は、各部屋にインタラクティブマップエリアがある画像マップです。代替テキストは「建物の間取り図です。部屋の目的や内容の詳細については、部屋を選択してください。」です。「部屋を選択する」という指示は、画像がインタラクティブであることを示しています。
于 2012-07-05T08:53:00.247 に答える
0
警告：この答えはかなり主観的です。
この属性は、特に特殊な機能を持つ画像で使用します。たとえば、ユーザーが何かを保存するためにクリックできるディスクの画像。その場合、altの値は「保存」になります。
しかし、私はあなたがすべての写真の説明を与えるべきではないと思います。「ギャラリー画像」などと言ってください。
于 2012-07-05T08:45:08.610 に答える
0
覚えておいてください、これaltは想像上のテキスト置換のためのものです。
多くの場合、alt = ""その想像に代わるテキストがないので、私は持っています。
また、1文字だけが最適な場合もあります。
<img src="fancy_bullet_point.gif" alt="*">
基本的な経験則を覚えておいてください。画像がなかった場合、代わりに何を配置しますか？
于 2012-08-31T15:31:30.820 に答える