HTMLでコーディングするときにimgタグのalt属性をいい加減に付けてしまいがちです。
多くの方はalt属性を「画像が読み込まれなかった時に表示するテキスト」という認識を持っています。
しかしこのalt属性は目の見えない方には大変重要な役割があります。
その点を考えつつ、どのように付けるのか考えてみましょう。
WHATWG HTML Living Standardのalt属性のところには次のように書かれています。
the intent is that replacing every image with the text of its alt attribute does not change the meaning of the page.
日本語にすると
すべての画像をその`alt`属性のテキストに置き換えても、ページの意味は変わらないという意図です
となっています。
つまり「画像がコケても目の不自由な方がスクリーンリーダーで読んでも全く同じに伝わる」ということですね。
MDNでも同様に
alt属性は画像のテキストによる説明で、必須ではありませんがアクセシビリティのために非常に有用です。スクリーンリーダーがこの説明を読み上げることで、画像が何を表すかをユーザーが知ることができます。
と書かれています。
ではどのようにalt属性を付ければいいのでしょうか？
W3CのWeb Accessibility Initiativeにいい指針がありました。
An alt Decision Tree（alt決定ツリー）という記事になります。
上から下に向かって質問にはい・いいえで選択していく表になっています。
ざっと日本語にすると・・・
・その画像は文字を含んでいるか？
・その画像のそばに画像内と同じ「本当の」テキストもあるか？
・alt属性は “” を使う
・画像は純粋に装飾目的か？
・alt属性は “” を使う
・画像には固有の機能があるか？（例：アイコン）
・alt属性はその機能を伝える文字を入れる
・画像内の文字は他のどこにもない
・alt属性は画像内の文字をそのまま使う
・その画像はリンクまたはボタンで、その画像がないとリンク/ボタンを押すのが困難か？
・alt属性はリンク先の情報か、ボタンを押すアクションを伝える文字を入れる
・その画像はそのページや、書いてある文脈に意味を与えているか？
・アイキャッチ目的の画像やイメージ写真
・alt属性は意味が伝わるような画像の簡単な説明を使う
・グラフや複雑な情報を表している
・ページ内の別の個所に情報を含めましょう
（alt属性は何の情報かの簡単な説明でよい）
・その画像と重複するテキストが近く書いてあるか？
・alt属性は “” を使う
・その画像はユーザーに何かを指示したりしておらず、純粋に装飾だけが目的ですか？
・alt属性は “” を使う
・上記以外はhttps://www.w3.org/WAI/tutorials/imagesを見よう
となっています。
それぞれのシーンでどうすべきかが分かります。
（チャートにしてみました。クリックすると別ページで表示します）
ここで問題になるのは、画像の意味や役割などをaltに入れる必要があるときです。
クライアントから「適当に付けて」と言われているなら、自分が考えうる最良のものを付ければ良いと思います。
そうでない場合は、クライアントに確認すべきでしょう。
できるだけalt属性は分かりやすく付けて、目の見えない方にも優しいページを作りたいものですね。
