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.

Practice

1. What is the main purpose of the alt attribute in an <img> tag?

easy

A. To add a border around the image

B. To provide a text description of the image for screen readers and when the image cannot load

C. To change the image size on the webpage

D. To link the image to another webpage

Solution

1. Step 1: Understand the role of alt text

   The alt attribute gives a text description of the image content.

2. Step 2: Recognize accessibility and fallback use

   This text helps screen readers for visually impaired users and shows if the image fails to load.

3. Final Answer:

   To provide a text description of the image for screen readers and when the image cannot load -> Option B

4. Quick Check:

   Alt text = image description [OK]

Hint: Alt text describes images for accessibility and fallback [OK]

Common Mistakes:

• Thinking alt changes image size
• Using alt to add styling like borders
• Confusing alt with links

2. Which of the following is the correct way to add alt text to an image in HTML?

easy

A.

B.

C.

D.

Solution

1. Step 1: Identify the correct attribute for alt text

   The correct attribute to describe images is alt.

2. Step 2: Check the syntax of the <img> tag

   <img src="flower.jpg" alt="Beautiful red flower"> uses alt="Beautiful red flower", which is correct HTML syntax.

3. Final Answer:

   <img src="flower.jpg" alt="Beautiful red flower"> -> Option A

4. Quick Check:

   Use alt attribute for image description [OK]

Hint: Use alt="description" inside <img> tag [OK]

Common Mistakes:

• Using non-existent attributes like description or text
• Confusing alt with title attribute
• Omitting quotes around alt text

3. What will a screen reader announce for this image tag?

<img src="logo.png" alt="Company logo">

medium

A. It will say 'Company logo' aloud

B. It will ignore the image and say nothing

C. It will read the file name 'logo.png'

D. It will say 'image' only

Solution

1. Step 1: Understand screen reader behavior with alt text

   Screen readers read the alt attribute to describe images to users.

2. Step 2: Check the alt attribute content

   The alt text is "Company logo", so the screen reader will announce this phrase.

3. Final Answer:

   It will say 'Company logo' aloud -> Option A

4. Quick Check:

   Screen reader reads alt text [OK]

Hint: Screen readers read alt text, not file names [OK]

Common Mistakes:

• Assuming screen readers read image file names
• Thinking screen readers ignore images with alt
• Confusing alt with title attribute

4. Identify the error in this image tag:

<img src="photo.jpg" alt>

medium

A. The alt attribute should be written as alt-text

B. The src attribute is incorrect

C. The img tag is missing a closing tag

D. The alt attribute is missing a value

Solution

1. Step 1: Check the alt attribute syntax

   The alt attribute must have a value, like alt="description". Here it is empty without ="...".

2. Step 2: Confirm other attributes and tag correctness

   The src attribute is correct, and <img> is self-closing in HTML5, so no closing tag needed.

3. Final Answer:

   The alt attribute is missing a value -> Option D

4. Quick Check:

   Alt attribute needs a value in quotes [OK]

Hint: Alt attribute must have a quoted value [OK]

Common Mistakes:

• Leaving alt attribute empty without =""
• Thinking img needs a closing tag
• Using invalid attribute names like alt-text

5. You have a decorative image that adds no meaning to your page. How should you write the img tag for best accessibility?

hard

A.

B.

C.

D.

Solution

1. Step 1: Understand alt text for decorative images

   Decorative images should have empty alt text (alt="") so screen readers skip them.

2. Step 2: Evaluate options for accessibility

   <img src="decorative.png" alt=""> uses empty alt, which is correct. Omitting alt or using generic text causes confusion.

3. Final Answer:

   <img src="decorative.png" alt=""> -> Option C

4. Quick Check:

   Empty alt hides decorative images from screen readers [OK]

Hint: Use alt="" for decorative images [OK]

Common Mistakes:

• Omitting alt attribute entirely
• Using vague alt text like 'image' or 'decorative image'
• Adding unnecessary descriptions for decoration