Mozillaのウェブサイトにある画像の代替テキストが細かすぎて衝撃を受けた話
- 投稿した日
- 更新した日
- 書いたひと
- ひらたけ
先日、Firefox の開発などを行っている Mozilla のウェブサイトを見ていたときに、ふと何気なくサイト内にある画像に設定されている 代替テキストを覗いてみたらめちゃくちゃ詳細に画像の説明をしたテキストが指定 されていて衝撃を受けたという話です。
代替テキストというのは、HTML を書いている人であれば知っていると思いますが、たとえばネットワークの通信状況などの影響で 画像を表示することが出来ない場合に画像の代わりに表示 したり、目が見えないなどの理由で 画面を閲覧することが出来ない場合に読み上げ たりするものです。
最近では X（旧 Twitter）などの SNS でも、画像を投稿する際に代替テキストを設定できるようになっているものが多いように感じます。
画像を見ることができない場合に表示・読み上げるものなので、どのような画像であるかを 可能な限り詳細に説明するテキストを指定するのが望ましい です。MDN の <img> タグのページにある alt 属性の説明にも、
altには可能な限り役に立つ値を指定するべきです。
と書かれています。
とはいえ、大抵のウェブサイトでは「りんごの画像」とか「東京の街の写真」くらいの説明を説明を書いている場合がほとんど。なんなら指定されていないものも多いかもしれません。
そんな中で、「alt には可能な限り役に立つ値を指定するべきです。」と言ってる Mozilla は一体どうしてるんだ？と思い、Mozilla のブログ を覗いてみました。
たとえばこちらの投稿。ゲームのドット絵のようなイラストがアイキャッチ画像として設定されています。
こちらの画像の代替テキストは以下です。
A pixel art illustration featuring retro game elements like hearts, stars, hourglasses, rainbows, and arcade joysticks inside chat bubbles, displayed on a screen with a grid background.
長い。明らかに「ゲーム風のイラスト」とか「ドット絵の画像」みたいな簡単な説明ではないです。私は英語が得意ではないので Google 翻訳 先生に日本語へ翻訳していただくと、以下のようになりました。
グリッド背景の画面に表示される、チャットバブル内のハート、星、砂時計、虹、アーケードジョイスティックなどのレトロゲーム要素を特徴とするピクセルアートのイラスト。
「グリッド背景の画面に表示される、チャットバブル内のハート、星、砂時計、虹、アーケードジョイスティックなどのレトロゲーム要素を特徴とするピクセルアートのイラスト。」 ～～～～～？！？？？？？？！？
いや、画像を見ることの出来ない人のために、なるべく詳細に画像の説明を書いたほうが良いのは分かるよ？でも、ウェブサイトに画像を載せようとするたびにこれだけ長い画像の説明文を考えて書くのってめちゃくちゃ大変だと思うんですよ。
何気なく覗いただけなのに圧倒的文字数の代替テキストをぶつけられて、一瞬思考停止したし、その後画面を指さしながら謎に大爆笑してました。ここまでやるかね。
他にも、たとえばこちらの投稿。AI 関連の投稿で、アイキャッチ画像として料理の写真の上にアイコンが配置された画像が設定されています。
こちらの画像の代替テキストは以下です。
A sepia-toned image of a dinner table filled with various dishes, including pizzas and salads. Overlaid icons include a purple square with the text 'AI,' a blue square with clinking champagne glasses, and an orange square with a chat bubble, suggesting a theme of artificial intelligence, celebration, and conversation.
長い。さっきの投稿のものより長い。こちらも Google 翻訳 先生に日本語へ翻訳していただくと、以下のようになりました。
ピザやサラダなど、さまざまな料理が並んだディナーテーブルのセピア色の写真。重ねられたアイコンには、「AI」という文字が書かれた紫色の四角、シャンパングラスがカランと鳴る青い四角、チャットの吹き出しが描かれたオレンジ色の四角があり、人工知能、お祝い、会話というテーマを示唆しています。
いや、そうなんだけど！全く間違っていないし、本来こうすべきなんだってのは分かっているのだけども！
アイキャッチ画像だけでなく、投稿内に掲載された画像にもきっちり詳細な説明を代替テキストとして指定されているし、本当にすごいと思いました。「代替テキストってのは、こういうのが本来あるべき姿なんだぜ？」って言われた気分。
みんな代替テキストちゃんと書こうね…。