What is alt text and why is it important
What is Alt Text and Why is it Important
Alt text (alternative text) is the descriptive text added to images using the alt attribute in HTML. It provides meaning and context for images when they cannot be seen or loaded.
- 1
Accessibility – Screen readers read alt text aloud so that visually impaired users can understand the purpose of an image.
- 2
Fallback Content – If an image fails to load due to slow internet or errors, the alt text is displayed instead.
- 3
SEO Benefits – Search engines use alt text to understand what an image represents, which can improve search rankings and image search visibility.
- 4
Usability – Helps clarify the meaning of icons or images used as buttons or links (e.g., a search icon with alt text 'Search').
Good alt text is concise, descriptive, and communicates the essential purpose of the image. Purely decorative images can have empty alt attributes (alt="") so they are ignored by screen readers.
- 1<img src="bar-chart.png" alt="Bar chart showing monthly sales growth">
- 2
<img src="logo.png" alt=""> <!-- Decorative image, no description needed -->
Scenario Questions
0-2 years experience
- 1How would you add appropriate alt text to an <img> tag that displays a user's profile picture?
- 2What happens for a screen‑reader user if you omit the alt attribute on an image that conveys important information?
- 3If a screen reader is reading "image" instead of a description, what might be wrong with the markup?
2-5 years experience
- 1Our CMS currently copies the file name into the alt attribute, and users complain the descriptions are inaccurate. How would you improve the process?
- 2During an accessibility audit you discover several decorative icons have non‑empty alt text. How would you fix them and why?
- 3Why might overly long alt text hurt SEO or layout, and how would you balance detail versus brevity in a product catalog page?
5-8 years experience
- 1Design a reusable image component for a component library that enforces correct alt text, supports localization, and works with dynamic content.
- 2How would you audit a legacy site with thousands of pages for missing or incorrect alt text, and what tooling would you choose?
- 3Discuss the trade‑offs between using alt versus aria‑label for decorative versus informative images in a complex dashboard.
8+ years experience
- 1We’re migrating a monolithic e‑commerce platform to micro‑frontends. How would you ensure a consistent alt‑text policy across all teams and prevent regressions?
- 2What governance model would you put in place to maintain accessibility standards, including alt text, across thousands of pages and third‑party content?
- 3If we integrate an AI image‑generation service, how would you design a pipeline to automatically generate and validate alt text while handling edge cases?
Follow-up Questions
- Can you walk me through how you’d test that alt text is being read correctly?
- What tools or processes would you use to audit a site for missing alt attributes?
- How do you decide what level of detail belongs in an alt description?