Missing alt versus empty alt
Images b and c both report img.alt as an empty string. Only hasAttribute("alt") tells decorative and missing apart.
Alt text is the words that replace an image for people who can't see it: describe what the image means in this place, use alt="" for decoration, and never leave alt out.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write HTML for a product page header: a decorative divider image, a logo that links to /, and a cart link that contains only an icon image.
A page shows a photo of a cake with the visible caption "Mum's chocolate cake" directly underneath. What alt should the photo have, and why?
Explain it without notes
What's the difference between alt="" and a missing alt attribute, for screen readers and for validation?
How do you write alt text for an image that is the only content of a link?
How do you make a chart accessible?
How do you make an icon-only button accessible when the icon is an inline SVG?
Preview
Console
Nothing logged yet.Expected console output
a | img.alt = "Red warning light: the server is down." | informative: Red warning light: the server is down.
b | img.alt = "" | decorative (skipped)
c | img.alt = "" | MISSING alt (a screen reader may read the file name)