0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【フロントエンド1000本ノック】0011_画像に付与するalt属性について、「装飾的な画像」と「情報を持つ画像」の場合の記述方法の違いを説明せよ。

Posted at

はじめに

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?