Alt text for images in HTML - Browser Rendering Trace

Render Flow - Alt text for images

[Read <img>] -> [Check for alt attribute] -> [If alt present, store alt text] -> [Render image if source valid] -> [If image missing, show alt text] -> [Screen reader reads alt text]

The browser reads the image tag, looks for alt text, and uses it to show text if the image can't load or for screen readers to describe the image.

Render Steps - 3 Steps

Code Added:<img src="flower.jpg">

Before

[Empty page]

→

After

[Image box with flower.jpg displayed]

The image loads and shows the picture from the source file.

🔧 Browser Action:Fetches image resource and paints it on the page

Code Sample

Shows a red flower image; if image fails to load, the alt text 'A red flower in a garden' appears instead.

HTML

<img src="flower.jpg" alt="A red flower in a garden">

Render Quiz - 3 Questions

After step 3, what does the user see if the image file is missing?

A Nothing at all

B The alt text describing the image

C A broken image icon with no text

D The image still loads normally

Common Confusions - 3 Topics

Why don't I see the alt text when my image loads fine?

Alt text only appears visually if the image fails to load. When the image shows, alt text is hidden but still used by screen readers.

💡 Alt text is invisible if image loads; it is fallback and accessibility text.

Can I leave alt empty if the image is decorative?

Yes, use alt="" to tell screen readers to skip the image, so they don't read unnecessary info.

💡 Empty alt means 'ignore this image' for screen readers.

What happens if I forget alt attribute?

Screen readers may read the image file name or nothing, which confuses users. Always include alt for accessibility.

💡 Always add meaningful alt text or alt="" for decorative images.

Property Reference

Attribute	Purpose	Visual Effect	Accessibility Role
src	Specifies image file location	Shows the image if valid	N/A
alt	Describes image content	Shows text if image missing; read by screen readers	Provides alternative text for screen readers
title	Additional info on hover	Shows tooltip on mouse hover	Supplementary info, not a replacement for alt

Concept Snapshot

Alt text (alt attribute) describes images for screen readers and fallback. Visible only if image fails to load. Always include alt for accessibility. Use alt="" for decorative images to skip reading. src attribute loads the image file. Title attribute adds optional hover info.