alt 属性を使用して画像の代替テキストを指定する
画像は、ほとんどのウェブページで重要な要素であり、ロービジョンのユーザーにとって特に注意すべきポイントです。どのような種類の代替テキストを指定すべきか判断するには、画像がページ内で果たす役割を考慮する必要があります。この画像をご覧ください。
<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を使用すると、画像の読み込みに失敗したとき、ウェブ クロール bot がアクセスしたとき、スクリーン リーダーが見つけたときなど、画像が利用できないときに使用する簡単な文字列を指定できます。altは、画像が利用できない場合にのみ使用されるという点で、titleなどの任意のタイプのキャプションとは異なります。
有用な代替テキストを記述するには、ちょっとした工夫が必要です。文字列を使用可能な代替テキストにするには、画像と同じコンセプトを同じコンテキストで伝える必要があります。
上記の画像のように、ページのマストヘッドにリンクロゴ画像を表示することをご検討ください。 この画像は「Funion ロゴ」として正確に説明できます。
<img class="logo" src="logo.jpg" alt="The Funion logo">
「ホームページ」や「メインページ」などのシンプルな代替テキストを提供したくなるかもしれませんが、それはロービジョン ユーザーと目の見えるユーザーの両方に悪影響を及ぼします。
しかし、スクリーン リーダーのユーザーがマストヘッドのロゴをページ上で表示したいとします。この場合、Alt 値として「home」を指定すると、実際には混乱を招くことになります。目の見えるユーザーは、スクリーン リーダーを使用するユーザーと同じ課題に直面します。サイトのロゴをクリックするとどうなるかを理解することです。
その一方で、画像を説明することは必ずしも有益ではありません。たとえば、検索ボタン内に「Search」というテキストが付いた虫メガネの画像があるとします。テキストが存在しない場合は、その画像の alt 値に「search」を設定します。しかし、可視テキストがあるため、スクリーン リーダーは「search」という単語を選択して読み上げます。したがって、画像上で同じ alt 値を使用するのは冗長です。
ただし、alt テキストを省略すると、代わりに画像ファイル名が読み上げられる可能性があります。これは役に立たず、混乱を招く可能性もあります。この場合、空の alt 属性を使用するだけで、スクリーン リーダーで画像が完全にスキップされます。
<img src="magnifying-glass.jpg" alt="">
まとめると、すべての画像に alt 属性が必要ですが、すべての画像にテキストがある必要はありません。重要な画像には、画像の内容を簡潔に説明する説明的な alt テキストが必要です。装飾的な画像では、Alt 属性が空になっている（alt=""）必要があります。