Send us the RFP Sign up free
Sign up free Send us the RFP
Back to course

F3 Accessible Content Basics

0% done: 0 of 7 lessons

Lesson 3 of 7 · Simulation

Images and alt text

Progress is saved on this device only. Keep it across devices with a free LFW account.

Curriculum0 of 7 done

Simulation

Fix the alt text in a WordPress media dialog

A working copy of the real screen. Use it as you would the real one. Nothing you type leaves this page.

This exercise runs in your browser and needs JavaScript. The lesson text above covers the same steps.

Not done yet.

Write a text alternative that does the image's job, know when an image should have none and handle flyers, charts and photos of text.

Notes

Step 1 of 7

Start here

Alt text is the text a screen reader reads in place of an image. It also appears when an image fails to load. WCAG 2.1 requires a text alternative for every image that carries meaning.

In WebAIM's 2026 survey of the top one million home pages, 53.1 percent had images missing alt text. It is one of the most common failures on the web, and one of the easiest for an editor to fix.

Step 2 of 7

The question to ask

Not "what does this picture look like?" but "what is this image doing on this page?" Then write alt text that does the same job.

Remember: Ask what the image is doing on this page, then write alt text that does the same job.

The same photo can need different alt text on different pages. A photo of the mayor cutting a ribbon:

  • on a news post about the library opening: "Mayor Diaz cuts the ribbon at the new library entrance"
  • on the mayor's biography page: "Mayor Diaz"
Try it The ribbon-cutting photo also goes at the top of a news post about the library opening. Which alt text fits there?

Show the answer

B. Mayor Diaz cuts the ribbon at the new library entrance. In the news post the photo shows what happened, so the alt text says it. And it skips "photo of".

Step 3 of 7

How to write it

  • Be brief. One sentence, often shorter. Long descriptions belong in the page text.
  • Skip "image of" and "photo of." The screen reader already says it is an image.
  • Name what matters: who, what, where, if it is relevant to the page.
  • Do not repeat the caption. If the caption already says it, alt text can be brief or add what the caption leaves out.
  • No file names. "IMG_4032.jpg" is worse than nothing.

Step 4 of 7

When alt text should be empty

Decorative images, such as background textures, swirls and stock photos that add mood but no information, should have empty alt text. Screen readers then skip them.

In WordPress and most editors, leave the alt text field empty only for decorative images, and do it on purpose. Some site tools let you mark an image as decorative explicitly; ask your web contact.

Step 5 of 7

Images that are links or buttons

When an image is the only thing inside a link, its alt text becomes the link text. Describe the destination, not the picture. A logo linking to the homepage gets "Yourtown home," not "Yourtown logo with a tree."

Try it The town logo is the only thing inside a link to the homepage. What is its alt text?

Show the answer

B. Yourtown home. When an image is the whole link, its alt text is the link text: say where it goes.

Step 6 of 7

Flyers, posters and photos of text

A flyer posted as an image is a common problem on public websites. The date, time, place and phone number are inside the picture, where screen readers cannot read them, phones cannot enlarge them cleanly, and translation tools cannot reach them.

Put the information on the page as real text: the event name as a heading, then the date, time, place and contact. The flyer image can stay, with short alt text such as "Flyer for the fall festival, details below."

Step 7 of 7

Charts and maps

For a chart, the alt text gives the main point: "Water use fell 12 percent from 2024 to 2026." Put the numbers in a simple table or list on the page. For a map, give the address or directions as text beside it.

Sources

Task

Your task at your institution

Quiz

4 questions. Choose one answer for each, then check them. Each answer shows its reason.

1. A photo shows the new playground at Riverside Park on a page announcing its opening. Which alt text is best?
2. An image is purely decorative, a swirl beside a heading. What should its alt text be?
3. You post a flyer image with the event's date, time and place. What else is needed?
4. An image is the only content of a link to the parks department page. What should its alt text say?
Show the answers
  1. C. Children on the new climbing structure at Riverside Park. It says what the photo shows that matters on this page, without 'photo of.'
  2. B. Empty, so screen readers skip it. Decorative images get empty alt text. Describing them only adds noise.
  3. B. The same information as real text on the page. Text inside an image cannot be resized, translated or searched, and is often missed. Put it on the page as text.
  4. A. Where the link goes: Parks department. When an image is a link, its alt text is the link text. It names the destination.