alt 属性を使用して画像の代替テキストを指定する
画像はほとんどのウェブページで重要な要素です。もちろん、 特にロービジョンのユーザーが 直面する課題を明らかにしましたこの役割は、責任ある AI を 画像がページで再生され、どのような種類の代替テキストがあるかが判断されます。 こちらの画像をご覧ください。
<article>
<h2>Study shows 9 out of 10 cats quietly judging their owners as they sleep</h2>
<img src="imgs/160204193356-01-cat-500.jpg">
</article>
10 匹中 9 匹の猫が睡眠中に飼い主を静かに判断しているという研究結果
このページには、猫の写真と、猫に関する
よく知られた判断的な行動です。この画像をスクリーン リーダーが読み上げるには、
リテラル名 "/160204193356-01-cat-500.jpg"。そのとおりだが
役立ちます。
alt 属性を使用すると、これに代わる有用なテキストを指定できます。
画像（例: 「宇宙を見つめている猫を見つめている」）。
<img src="/160204193356-01-cat-500.jpg" alt="A cat staring menacingly off into space">
これにより、スクリーン リーダーは画像の簡潔な説明（ 黒い VoiceOver バーに表示されます）。 ご覧ください。
alt について、いくつかコメントがあります。
altを使用すると、画像が常に使用されるシンプルな文字列を指定できます。 が利用できない場合（画像の読み込みに失敗した場合や、ウェブからアクセスされた場合など） クロールボットで検出されたか、スクリーン リーダーで検出されました。altは、titleなどの任意のタイプのキャプションとは異なり、のみ使用されます 画像がない場合は、
便利な代替テキストを記述するには、ちょっとした工夫が必要です。文字列を使いやすいものにするには、 テキスト代替テキストでは、画像と同じコンセプトを、 説明します。
上記のようなページのマストヘッドに、リンクされたロゴ画像を表示することをご検討ください。 この画像は「The Funion ロゴ」と非常に正確に記述できます。
<img class="logo" src="logo.jpg" alt="The Funion logo">
「自宅」というシンプルな代替テキストに切り替えたくなるかもしれませんまたは「main」 ロービジョンの方と目の見えない方の両方にとって不快な思いをすることになります。
スクリーン リーダーのユーザーが、 page;alt 値として "home" を割り当てます。混乱を招くため 体験できますそして、視覚に障がいを持つユーザーも同じ課題に直面します。 スクリーン リーダーのユーザーは、サイトのロゴをクリックした場合に行う操作について簡単に説明しました。
その一方で、画像の説明は必ずしも有用なわけではありません。たとえば
検索ボタン内にある虫メガネの画像で
「Search」。テキストがなければ、その画像に代替テキストを付けるでしょう。
"search" の値を使用します。しかし、表示されるテキストがあるため、スクリーン リーダーは
「search」という単語を選んで読み上げます。したがって、alt は
イメージが冗長になります。
ただし、alt テキストを省略すると、おそらく
代わりに画像のファイル名を指定する必要があります。これは役に立たず、混乱を招く可能性があります。イン
この場合は、空の alt 属性を使用するだけで、スクリーン リーダーが
画像全体をスキップできます
<img src="magnifying-glass.jpg" alt="">
まとめると、すべての画像には alt 属性が必要ですが、すべての画像に必要というわけではありません。
テキストがあります。重要な画像には、簡潔でわかりやすい代替テキストを使用する必要があります
画像の内容を表し、装飾的な画像には alt を空にしてください
つまり alt="" です。