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を使用すると、画像が読み込まれなかったときや、ウェブクロール ボットによってアクセスされたとき、スクリーン リーダーが検出したときなど、画像が使用できない場合に使用される単純な文字列を指定できます。altは、画像が使用できない場合にのみ使用されるという点で、titleや他の種類のキャプションとは異なります。
役に立つ代替テキストを書くのは、ある種の技術です。文字列が使用可能な代替テキストとなるには、画像と同じコンセプトを同じコンテキストで伝える必要があります。
上記のようなページのヘッダーにリンクされたロゴ画像について考えてみましょう。この画像は「The Funion のロゴ」とかなり正確に説明できます。
<img class="logo" src="logo.jpg" alt="The Funion logo">
「ホーム」や「メインページ」などの簡単な代替テキストを指定したい気持ちはわかりますが、そうすると、ロービジョン ユーザーと視覚に優れたユーザーの両方に不便を強いることになります。
しかし、ページ上のマストヘッド ロゴを探しているスクリーンリーダー ユーザーを想像してみてください。alt 値を「home」にすると、実際にはより混乱するエクスペリエンスが生まれます。スクリーン リーダー ユーザーと同じように、視覚に障がいのあるユーザーも、サイトのロゴをクリックしたときに何が起こるかを把握する必要があります。
一方で、画像の説明が役立つとは限りません。たとえば、検索ボタンの中に虫メガネの画像があり、その中に「検索」というテキストが含まれているとします。テキストがない場合、その画像の代替テキストには「検索」という値を指定します。ただし、テキストが可視であるため、スクリーン リーダーは「検索」という単語を拾い上げて読み上げます。そのため、画像に同じ alt 値を設定するのは冗長です。
ただし、alt テキストを省略すると、代わりに画像ファイル名が読み上げられる可能性があります。これは無意味であり、混乱を招く可能性があります。この場合は、空の alt 属性を使用すれば、スクリーン リーダーは画像を完全にスキップします。
<img src="magnifying-glass.jpg" alt="">
要約すると、すべての画像に alt 属性が必要ですが、テキストが必要な画像はすべてではありません。重要な画像には、画像の内容を簡潔に説明するわかりやすい代替テキストを指定します。装飾的な画像には、空の代替テキスト属性（alt=""）を指定します。