Alt text for images in HTML - Mini Project: Build & Apply

Adding Alt Text to Images for Accessibility

📖 Scenario: You are creating a simple webpage for a local bakery. The page will show pictures of their best-selling cakes. To make sure everyone can understand the images, including people who use screen readers, you need to add descriptive alternative text to each image.

🎯 Goal: Build a basic HTML page with three images of cakes. Add meaningful alt text to each image so that people who cannot see the pictures can still know what they show.

📋 What You'll Learn

Create an HTML5 page with a <main> section

Add three <img> tags inside the <main> section

Use the exact image file names: chocolate-cake.jpg, vanilla-cupcake.jpg, strawberry-tart.jpg

Add descriptive alt attributes to each <img> tag

Use semantic HTML and include a <header> with a page title

💡 Why This Matters

🌍 Real World

Adding alt text to images is essential for making websites accessible to people who use screen readers or have slow internet connections where images might not load.

💼 Career

Web developers must ensure their websites meet accessibility standards, which includes providing meaningful alt text for images to improve usability for all users.

1

Create the basic HTML structure with a header and main section

Write the HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> including <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Add a <title> with the text Bakery Cakes. Inside the <body>, add a <header> with an <h1> that says Our Best Cakes and an empty <main> section below it.

HTML

    
    
    Bakery Cakes


    
        Our Best Cakes
    
    
        
    

Hint

Start by typing the basic HTML page structure. Remember to include the lang attribute on the <html> tag and the viewport meta tag for mobile devices.

2

Add three images inside the main section without alt text

Inside the existing <main> section, add three <img> tags with the exact src attributes: "chocolate-cake.jpg", "vanilla-cupcake.jpg", and "strawberry-tart.jpg". Do not add any alt attributes yet.

HTML

    
    
    Bakery Cakes


    
        Our Best Cakes
    
    
        
    

Hint

Type three <img> tags inside the <main> section. Use the exact file names for the src attributes. Don't add alt text yet.

3

Add descriptive alt text to each image

Add an alt attribute to each <img> tag with these exact texts: for chocolate-cake.jpg use "Chocolate cake with frosting and cherries", for vanilla-cupcake.jpg use "Vanilla cupcake with sprinkles", and for strawberry-tart.jpg use "Strawberry tart with fresh berries".

HTML

    
    
    Bakery Cakes


    
        Our Best Cakes
    
    
        
    

Hint

Write the alt attribute inside each <img> tag exactly as shown. This helps screen readers describe the images.

4

Add a footer with contact information

Add a <footer> section below the <main> section. Inside the footer, add a paragraph <p> with the text Contact us at [e-mail].

HTML

    
    
    Bakery Cakes


    
        Our Best Cakes
    
    
        
        
        
    
    

Hint

Place the footer after the main section but still inside the body. Use a paragraph tag for the contact text.

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