Beginner LevelHTML & Semantic Web
Why is the img alt attribute essential for accessibility and SEO?
❓ Interview Prompt: Explain image alt attributes, screen reader behavior, decorative images (alt=""), and fallback rendering.
The 'alt' attribute on '<img>' elements provides a text alternative for images.
Key Rules:
1
Screen Readers: Reads 'alt' text aloud to visually impaired users.
2
Fallback Rendering: Displayed if image load fails due to broken URLs or offline networks.
3
SEO: Search engines index 'alt' text to understand image content.
4
Decorative Images: Use empty 'alt=""' for decorative icons so screen readers skip them!
Code Implementation Example
html
<!-- Informative image with descriptive alt text -->
<img src="chart.png" alt="Quarterly revenue growth chart showing 15% increase in Q2">
<!-- Decorative icon ignored by screen readers -->
<img src="divider.svg" alt="" role="presentation">💡Descriptive alt text for informative images vs empty alt for decorative images.
🎯 Interview Key Takeaway
Always provide descriptive alt text for informative images, and empty alt="" for decorative images.
#img alt#Accessibility#a11y#SEO#Beginner
Back to all HTML & Semantic Web Questions→