Alt Text for Images
The alt attribute describes an image for screen readers and when the image fails to load. Decorative images should have alt="".
HTML
Beginner
3 min read
Image Alt Text
Example
<!-- Informative image: describe content -->
<img src="chart.png" alt="Bar chart showing 25% increase in sales from Q1 to Q2 2024">
<!-- Functional image (link/button): describe action -->
<a href="/home"><img src="logo.svg" alt="Home — Company Name"></a>
<!-- Decorative: empty alt, skipped by screen reader -->
<img src="divider.png" alt="">
<!-- Complex image: use longdesc or aria-describedby -->
<img src="diagram.png" alt="Architecture diagram" aria-describedby="diagram-desc">
<p id="diagram-desc">The diagram shows three layers...</p> Pro Tip
Describe what the image conveys, not what it looks like — "Graph showing 25% growth" not "green bar chart".