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属性は分かりやすく付けて、目の見えない方にも優しいページを作りたいものですね。