Alt text for images in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add alternative text to the image for accessibility.

HTML

<img src="flower.jpg" alt="[1]">

Drag options to blanks, or click blank then click option'

Aimage

Bflower.jpg

CA red flower in a garden

Dphoto

Attempts:

3 left

💡 Hint

Common Mistakes

Using the image file name as alt text.

Leaving the alt attribute empty or missing.

The alt attribute should describe the image content clearly for screen readers.

2fill in blank

medium

Complete the code to provide meaningful alt text for the logo image.

HTML

<img src="logo.png" alt="[1]">

Drag options to blanks, or click blank then click option'

Alogo.png

BCompany logo

Cimage

Dlogo

Attempts:

3 left

💡 Hint

Common Mistakes

Using the file name as alt text.

Using vague words like 'image' or 'logo' without context.

The alt text should clearly state that this is the company logo for users who cannot see the image.

3fill in blank

hard

Fix the error in the alt attribute to improve accessibility.

HTML

<img src="chart.png" alt=[1]>

Drag options to blanks, or click blank then click option'

A"Sales data chart"

BSales data chart

Cchart.png

D"chart.png"

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving alt text without quotes.

Using file names instead of descriptive text.

The alt attribute value must be enclosed in quotes to be valid HTML.

4fill in blank

hard

Fill both blanks to add an image with alt text and a width of 200 pixels.

HTML

<img src="[1]" alt="[2]" width="200">

Drag options to blanks, or click blank then click option'

Asunset.jpg

BA beautiful sunset over the mountains

C200

Dsunset

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping the alt text and file name.

Using non-descriptive alt text.

The src attribute needs the image file name, and the alt attribute needs descriptive text.

5fill in blank

hard

Fill all three blanks to create an accessible image with alt text, a title, and a CSS class.

HTML

<img src="[1]" alt="[2]" class="[3]" title="Sunset image">

Drag options to blanks, or click blank then click option'

Asunset.png

BA colorful sunset with clouds

Cresponsive-img

Dimage

Attempts:

3 left

💡 Hint

Common Mistakes

Using generic alt text like 'image'.

Leaving out the class attribute or using incorrect class names.

The src is the image file, alt describes the image, and class applies styling.