Alt Text: Giving Images a Voice for Everyone
Alt text gives an image a voice when it can't be seen. It's read by screen readers for accessibility and displayed if an image breaks. The footgun is writing "image of..." or leaving it blank; instead, describe the image's content and purpose.
Why it exists
The web is a visual medium, but not all users experience it visually. Images create barriers for people using screen readers and for everyone when images fail to load. Alt text was created to provide a textual equivalent, ensuring information is not lost and the web remains accessible.
The mental model
Alt text is your image's stand-in. Imagine you're describing an image over the phone to someone who needs to understand its content. You wouldn't say "there's an image here"; you'd describe what's in it and why it's important. That's alt text: a direct, functional description for when the visual is absent. It's not a caption for everyone to see, but a replacement for those who can't.
How it works
In HTML, the alt attribute is placed inside an <img> tag. When a browser renders the page, it handles the alt attribute in two main scenarios. First, if a user is employing a screen reader, the software will ignore the image file and read the contents of the alt attribute aloud. Second, if the image file cannot be loaded due to a network error or broken link, the browser will display the alt text in its place, often with a small "broken image" icon.
When to use it
Always use alt text for any image that conveys information, such as photos, charts, diagrams, or icons with meaning. The description should be concise but sufficient to convey the same information as the image. If an image contains text, the alt text should include that text. For complex images like charts, the alt text might summarize the key finding.
When not to use it
The only time to use empty alt text (written as alt="") is for images that are purely decorative and provide no informational value, like background patterns or stylistic dividers. An empty alt attribute tells screen readers to intentionally skip the image, which is better than having it read out a meaningless filename. Leaving the alt attribute off entirely is incorrect; it should always be present.
One canonical example
Consider an image of a company's logo that also links to the homepage. A poor implementation is <img src="logo.png" alt="logo">. A better implementation provides function and context: <img src="logo.png" alt="BrainBites Homepage">. A screen reader would announce "Link, BrainBites Homepage," clearly communicating both content and function.
Interview question
When is it appropriate to use an empty alt attribute (e.g., alt="") for an image?
- a.When the image is purely decorative and conveys no informational value.Correct
- b.When the image is too complex to describe concisely.
- c.When the image is a company logo that links to the homepage.
- d.When the image file is missing or fails to load.
Why? this is the answer
The card states that an empty alt attribute should only be used for images that are purely decorative and provide no informational value, allowing screen readers to skip them. For informational images, even complex ones, alt text should describe content or purpose, and for logos, it should include function and context.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on accessibility — each one lists the topics its interview covers.
See open roles