Alt text for images in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Why is alt text important for images?

Which of the following best explains why adding alt text to images is important in web development?

A It adds a border around the image to make it stand out visually.

B It changes the image size automatically based on device screen width.

C It helps search engines understand the image content and improves accessibility for screen readers.

D It allows images to load faster by compressing them.

💡 Hint

Think about users who cannot see images and how they might understand the content.

Alt text provides a description of images for screen readers used by visually impaired users and helps search engines index images properly.

📝 Syntax

intermediate

Identify the correct alt attribute syntax

Which option shows the correct way to add alt text to an image in HTML?

HTML

<img src="flower.jpg" ____ >

A "moolb ni rewolf der A"=tla

B alt='A red flower in bloom'

C alt=A red flower in bloom

D alt="A red flower in bloom"

💡 Hint

Alt text must be inside quotes and properly formatted.

The alt attribute value must be enclosed in quotes (single or double). Option D uses double quotes correctly.

❓ rendering

advanced

What is the visible output when alt text is used?

If an image fails to load in a browser, what will the user see if the image tag has alt text?

HTML

<img src="missing.jpg" alt="A mountain landscape">

A A broken image icon with no text will appear.

B The text 'A mountain landscape' will be shown in place of the image.

C Nothing will appear; the image area will be blank.

D The browser will automatically load a default image.

💡 Hint

Alt text is a fallback description when images cannot load.

When an image cannot load, browsers display the alt text so users understand what was meant to be shown.

❓ selector

advanced

Which CSS selector targets images missing alt text?

You want to style images that do NOT have an alt attribute or have an empty alt attribute. Which CSS selector will select those images?

A img:not([alt]), img[alt=""]

B img[alt="*"]

C img[alt]

D img:empty

💡 Hint

Think about selecting elements missing an attribute or with an empty attribute value.

The selector img:not([alt]) selects images without alt attribute, and img[alt=""] selects images with empty alt text.

❓ accessibility

expert

Best practice for decorative images with alt text

For purely decorative images that add no meaningful content, what is the best practice for the alt attribute to ensure accessibility?

A Use alt="" (empty alt attribute) so screen readers skip the image.

B Use alt="decorative image" to describe the image purpose.

C Omit the alt attribute entirely to hide the image from screen readers.

D Use alt="image" as a generic description.

💡 Hint

Think about how screen readers treat empty alt attributes.

An empty alt attribute tells screen readers to ignore the image, which is best for decorative images that do not add information.