はじめに
こんにちは、赤神です!
この記事は、「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属性は空のまま書くことが望ましいです。これにより、機械はこの画像に意味がないことを理解し、無視することができます。