# eslint img alt prop warning

eslint rule img elements must have an alt prop, either with meaningful text, or an empty string for decorative images

この warning は、React コンポーネント内で img 要素を使用している際に、alt プロパティが不足しているか、意味のあるテキストまたはデコレーション用の空の文字列でない場合に表示されます。

画像が意味を持たないデコレーション用のものである場合、空の alt プロパティを設定します。これにより、スクリーンリーダーなどのアシストテクノロジーが画像を無視できるようになります。

# alt 属性の目的と用途

alt 属性は、以下の目的で使用されます

• 画像が読み上げ可能なテキストで、視覚障害者用のスクリーンリーダーソフトウェアなどで代替テキストを提供する
  視覚障害者や画像の表示が無効な状況でウェブページを利用するユーザーにとって非常に重要です。スクリーンリーダーソフトウェアは、alt 属性に設定されたテキストを読み上げ、画像の内容を理解できるようにします。
• 画像が表示されない場合や読み込まれない場合に、テキストとして画像の内容を提供する
  画像が表現する内容や役割を簡潔かつ適切に説明するテキストを提供する必要があります。代替テキストは、画像が何を示しているのかを伝える役割を果たします。
• 検索エンジンに対して画像の内容を説明する
  適切な代替テキストを提供することで、画像が関連するキーワードと連動し、検索エンジンのインデックスに適切に表示される可能性が高まります。

# alt 属性が必要ないケース

• デコレーション用の画像
  alt 属性は、意味を持たないデコレーション用の画像には必要ありません。デコレーション用の画像は、ページのスタイリングやデザインを補完するために使用され、視覚的な要素を提供するのが主な役割です。この場合、空の alt 属性を設定して、スクリーンリーダーソフトウェアなどが画像を読み上げないようにします。

• プレースホルダー画像
  画像がまだ用意されておらず、プレースホルダー画像が一時的に表示される場合、alt 属性は不要です。プレースホルダー画像は通常、実際のコンテンツを置き換えるためのものであり、具体的な説明を提供する必要はありません。

• コンテンツが意味を持たない場合
  一部の特殊なウェブアプリケーションやデータ可視化の場合、画像そのものに特定の意味がないことがあります。この場合、alt 属性を設定しなくても問題ありません。

• 管理システムや一般公開されていない特定のシステム
  アクセシビリティへの要件や SEO への配慮がないシステム

# ルール無効化

alt プロパティを設定しない場合、または警告を無効にする必要がある場合、ESLint ルールの設定で img 要素に関するこの特定の警告を無効にすることができます。

{
  "rules": {
    "jsx-a11y/alt-text": "off"
  }
}