- 「altはないより、ある方がいいでしょ。」
- 「リンターに怒られるから、取りえずalt入れてるよ。」
- 「altナニソレオイシイノ」
このどれかに共感した方、この先へお進みください。
ようこそ （たいしたこと言ってないので読み飛ばしてどうぞ）
まず、ここまで進んで来てくれてありがとうございます。
初手でこんなことを書いておいてなんですが、かく言う僕もリンターとかに怒られるからとりあえずエイヤッでそれっぽいaltをつけていました。
が、去年からアクセシビリティに関するサービスに携わるにあたってaltと少し仲良くなれたので、今まで僕が勘違いしていたことを通して少しでもアクセシブルなウェブの世界に貢献できたら幸いです。
altとは （ここから本題）
まず、みなさん承知の上だと思いますが、altとはなんぞやっていうのをMDNさんで見てみましょう。
HTMLImageElement の alt プロパティは、
要素で指定された画像が読み込まれない場合に表示する予備（代替）テキストを指定します。
参考: HTMLImageElement: alt プロパティ
そうです、altは代替テキストです。
画像の代替として、主にスクリーンリーダーなどの支援技術によって使用されます。
お邪魔なaltとは
画像の代替なのにお邪魔もなにもあるの？って思いますよね。
なので、わかりやすいようにサンプルサイトでスクリーンリーダーを使った場合を見ていきます。
このようなニュース記事一覧のページがあるとします。
HTMLはこんな感じ。（style等は削除してます）
<section>
<h2>ニュース</h2>
<ul>
<li>
<img src="img/feature1.jpg" alt="すっごくいい感じのニュース記事のタイトルです">
<p>すっごくいい感じのニュース記事のタイトルです</p>
</li>
<li>
<img src="img/feature2.jpg" alt="ほんとにすっごくいい感じのニュース記事のタイトルです">
<p>ほんとにすっごくいい感じのニュース記事のタイトルです</p>
</li>
<li>
<img src="img/feature3.jpg" alt="めちゃくちゃすっごくいい感じのニュース記事のタイトルです">
<p>めちゃくちゃすっごくいい感じのニュース記事のタイトルです</p>
</li>
</ul>
</section>
一見すると、ちゃんと記事のタイトルaltにも入ってるしいいじゃん。と思うコードですが...
スクリーンリーダーで読み上げてみると、このようになります。
「すっごくいい感じのニュース記事のタイトルです、イメージ」
と読み上げられ、次の要素へ行くと
「すっごくいい感じのニュース記事のタイトルです」
と読み上げられてます。
同じことが二回続いて読み上げられてますよね。
スクリーンリーダーでは要素を読み飛ばしていくことが難しいため、同じことを二回読み上げられることで少なからずアクセシビリティは下がってしまいます。
なので、対処法としては、このようになります。
- 読み上げなくても良い画像の場合は、altを空文字に設定する
- 意味のある画像の場合は、その画像を説明できるaltを設定する
例）altを空文字にする場合
<section>
<h2>ニュース</h2>
<ul>
<li>
<img src="img/feature1.jpg" alt="">
<p>すっごくいい感じのニュース記事のタイトルです</p>
</li>
<li>
<img src="img/feature2.jpg" alt="">
<p>ほんとにすっごくいい感じのニュース記事のタイトルです</p>
</li>
<li>
<img src="img/feature3.jpg" alt="">
<p>めちゃくちゃすっごくいい感じのニュース記事のタイトルです</p>
</li>
</ul>
</section>
このように空文字を設定した場合は、画像の読み上げはスキップされるので必要な文言のみスクリーンリーダーが読み上げてくれるようになります。
じゃあaltはどうつけるの
そう思いますよね。正直正解なんてものはないと思ってるので難しいですが、
「画像自体がなにかの情報のときや、画像を読み上げることで意味が生まれるもの、なにかの説明となるもの」
に対してつけるっていうイメージが個人的にはしっくり来てます。
とはいえ、感覚でしか言ってないので、ちゃんとした条件がしりたい！っていう人はW3Cが出してるこちらのページがとっても参考になると思います。
https://www.w3.org/WAI/tutorials/images/decision-tree/ja
まとめ
僕自身まだまだ足りない知識の中手探りでやってますが、altなど、アクセシビリティに関することは、自分でスクリーンリーダーを使用してみたり、キーボードのみで操作してみたりすると解像度がグンと深まるのでおすすめです。
ほんの触り的な内容ですが、これで少しでもaltと仲良くなれた人がいたら嬉しいです。
最後まで読んでいただきありがとうございました。
おまけ
現在在籍している株式会社Kivaでは延長保証サービスや、ウェブアクセシビリティに関するサービス（ユニウェブ）を運営しています。
ウェブアクセシビリティに興味がある方は一緒に働きましょう！！