Alt text for images in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is alt text in an image tag?

alt text is a short description of an image used in HTML to help people who cannot see the image understand what it shows.

beginner

Why is alt text important for web accessibility?

It helps screen readers describe images to users who are blind or have low vision, making the web more inclusive.

beginner

How do you add alt text to an image in HTML?

Use the alt attribute inside the <img> tag, like this: <img src="photo.jpg" alt="A smiling dog">.

beginner

What should you write in alt text?

Write a clear, simple description of the image’s content or purpose. Avoid phrases like "image of" or "picture of".

intermediate

When should alt text be left empty (alt="")?

When the image is purely decorative and does not add meaning, leaving alt="" tells screen readers to skip it.

What does the alt attribute do in an <img> tag?

A Links the image to another page

B Provides a text description of the image

C Adds a border around the image

D Changes the image size

The alt attribute gives a text description of the image for accessibility and when images don’t load.

Which is a good example of alt text for a photo of a red apple?

A "Fruit"

B "Image of a red apple"

C "Red apple on a wooden table"

D "Picture"

Option C describes the image clearly and meaningfully without unnecessary words.

When should you use alt="" (empty alt text)?

A For decorative images

B For images with text

C For important images

D Never use empty alt text

Empty alt text tells screen readers to ignore decorative images that don’t add information.

What happens if you forget to add alt text to an image?

A The image will be clickable

B The image won’t show

C The page will load faster

D Screen readers may read the image file name, which can be confusing

Without alt text, screen readers may read the file name, which is often not helpful.

Which HTML is correct for an image with alt text?

A <img src="dog.jpg" alt="A happy dog">

B <img alt="A happy dog" src="dog.jpg">

C <img src="dog.jpg">

D <img alt>A happy dog</img>

Option A correctly uses the alt attribute inside the <img> tag.

Explain why alt text is important for images on websites.

Think about users who cannot see images.

Describe how to write good alt text for an image.

Imagine explaining the image to a friend who can’t see it.