はじめに

こんにちは、赤神です！
この記事は、「1000本ノック」という取り組みの中のフロントエンドのための課題の1つです。

「1000本ノックとは」
https://qiita.com/sora_akagami/items/c8da4296dea3823376ca

装飾的な画像における `alt` 属性

装飾的な画像において、alt 属性をどうするべきか考える必要があります。

「意味のない情報をスクリーンリーダーに読み上げさせない」という目的を達成するためには、alt 属性を削除するのではなく、alt="" のように値を空にすることが大事です。

なぜ `alt` 属性の削除はダメなのか？

もし alt 属性自体を省略してしまうと、一部のスクリーンリーダーは「ここに何か画像があるはずだ」と考え、画像のファイル名を読み上げようとします。

例えば、haikei-kazari-01.png というファイル名の画像があった場合、スクリーンリーダーはそのまま「ハイケイカザリゼロイチドットピング、画像」と読み上げてしまいます。これでは意味が分からず、ユーザーを混乱させてしまいます。

正しい方法：`alt=""`（空のalt属性）

alt="" と書くことで、私たちはスクリーンリーダーに「この画像は装飾用で、情報価値はないので、完全に無視してください」と明確に指示することができ、スクリーンリーダーはこの指示を理解し、その画像の存在自体をスキップして、次のコンテンツを読み上げてくれます。

作成した回答

alt属性は画像の情報をスクリーンリーダーに教えるために役立ちます。しかし、画像は意味のあるものとして表示させるだけでなく、装飾（直接的には意味のないもの）として表示させる場合もあります。その際、alt属性は空のまま書くことが望ましいです。これにより、機械はこの画像に意味がないことを理解し、無視することができます。