alt 属性は、画像の内容または機能を説明するテキストの代替手段を提供します。画像を見ることができないユーザーとツールに役立ちます。
html
<img src="chart.png" alt="Sales grew 40% from Q1 to Q2" />
alt を大声で読み上げるので、視覚障害のあるユーザーは画像が何を伝えているかを知ることができます。なければ、ファイル名またはただ "image" と聞こえます — 無用です。alt テキストを表示します。alt を使用して画像を理解し、インデックスします（画像 SEO）。<!-- ✅ describe the MEANING, not "image of..." -->
<img src="dog.jpg" alt="A golden retriever catching a frisbee" />
<!-- ✅ for functional images, describe the ACTION -->
<a href="/home"><img src="logo.png" alt="Acme home" /></a>
<!-- ✅ DECORATIVE images get an EMPTY alt so screen readers skip them -->
<img src="divider.png" alt="" />
alt="" (空ですが存在する) は重要です。スクリーンリーダーに「これは装飾的なので、無視してください」と伝えます。alt を完全に省略することは異なります — その場合、リーダーはファイル名を発表する可能性があります。
alt は画像の単一で最も重要なアクセシビリティ属性であり、アクセシビリティ標準 (WCAG) に基づく法的要件です。
コンテンツを見えないユーザーに認識させ、画像が壊れたときのフォールバックを提供し、SEO を支援します — 画像が文脈で意味することを説明し、純粋に装飾的な画像には alt="" を使用してください。