imgタグのalt属性

• alt属性は全てのimgタグに必ず指定する必要があります
• 画像にテキストが含まれている場合は、そのテキストをalt属性として使用してください
  • デザインからテキストをコピーできない場合（例：画像内のテキスト）、デザイナーまたはプロジェクトディレクターにテキストを提供するように依頼してください
• 画像が純粋に装飾的な場合は、alt=""を使用して画像内に情報を持っていないことを示すことができます

理由

• アクセシビリティ: スクリーンリーダーはaltテキストを使用して、視覚障害者に画像を説明します。
• フォールバック: 画像が読み込めない場合（リンク切れ、接続が遅い）、altテキストが代わりに表示されるため、ユーザーはコンテンツを理解できます。
• SEO: 検索エンジンはaltテキストを使用して画像を理解し、ウェブサイトが検索結果でより良いランキングを得るのに役立ちます。

TIPS

alt="image"やalt="filename.jpg"を避けるべき理由:

• ユーザーや検索エンジンにとって有用な情報を提供していない
• imgタグがすでに画像であることを示しているため、冗長的
• alt属性は画像の内容や機能を伝える目的で使用しなければならない

装飾的な画像にalt=""を指定する理由:

• スクリーンリーダーに対して、その画像が純粋に装飾的であり、テキスト情報を持っていないことを示す
• スクリーンリーダーが視覚障害者に対して不必要な情報を読み上げるのを防ぐ
  • imgタグにalt属性がない場合、スクリーンリーダーは画像のファイル名やURLを読み上げてしまう

Example

BAD

全てのimgタグにalt属性を指定する必要があります

<img src="logo.png">

GOOD

画像にテキストが含まれている場合は、そのテキストをalt属性として使用してください

<img src="logo.png" alt="Company name">

装飾的な画像にalt=""を指定する場合は、alt=""を使用して画像内に情報を持っていないことを示してください

<img src="decorative.png" alt="">