Functional images and icons: name the action
Each control gets its name from a different place: the image's alt, aria-label, or its own text. The SVGs are hidden so they add nothing.
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
logo -> Hectal home
close -> Close
print -> Print