Text alternatives

Welcome to the first criterion lesson. This one is free to read without an account, so it is also the best way to see how every lesson in the course is built: one guideline, one section per Level A criterion, and inside each section the same five parts, ending with how to test it.

This lesson covers guideline 1.1 Text Alternatives, which has a single Level A criterion. It is short to state and surprisingly easy to get wrong.

1.1.1 Non-text Content

What it requires

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.

"Non-text content" means images, icons, charts, image buttons, audio and video (which have their own criteria too), CAPTCHAs, and anything else that is not text. "Serves the equivalent purpose" is the part that matters: the alternative must give a person who cannot see the image what a sighted person gets from it. Not a description of the pixels. The purpose.

📖 Understanding 1.1.1 Non-text Content

Who it helps

• Screen reader users, who hear the text alternative instead of the image
• People with low vision who use a screen reader together with magnification
• Voice control users, who need a name to say when the control is an icon
• Everyone on a slow connection, when images fail to load and the alternative shows instead

Before 🚫 / After ✅

The most useful question to ask about any image is: what is it for? The answer decides what its alternative should say.

An informative image. The image carries information that is not in the surrounding text.

<!-- Before 🚫 -->
<img src="q3-sales.png">

<!-- After ✅ -->
<img src="q3-sales.png" alt="Q3 sales: 120 orders in July, 95 in August, 140 in September">

Without alt, many screen readers read the file name, "q3-sales dot png", which says nothing. For a complex chart, a short alt plus the full data in a table or text near the chart is better than squeezing everything into one attribute.

A decorative image. The image adds nothing a user needs, such as a background swirl, a divider, or a stock photo next to a heading that already says everything.

<!-- Before 🚫 -->
<img src="swirl.svg" alt="decorative blue swirl graphic">

<!-- After ✅ -->
<img src="swirl.svg" alt="">

An empty alt="" tells assistive technology to skip the image. That is not the same as a missing alt: with no attribute at all, the screen reader does not know the image is decorative and often reads the file name instead. Decorative images can also be placed with CSS background-image, which assistive technology ignores.

An icon button. The image is the only content of a control, so its alternative is the control's name and must describe the action, not the picture.

<!-- Before 🚫 -->
<button><img src="trash.svg"></button>

<!-- After ✅ -->
<button><img src="trash.svg" alt="Delete draft"></button>

"Trash can" describes the picture. "Delete draft" tells the user what will happen. The same rule applies to an inline <svg> icon, which can be named with aria-label on the button or a visually hidden text span inside it.

An image of text. The image contains words.

<!-- Before 🚫 -->
<img src="banner.png" alt="banner">

<!-- After ✅ -->
<img src="banner.png" alt="Summer sale: 30% off every course until Friday">

When an image contains text, the alternative should contain the same text. Better still, use real text styled with CSS, which also scales and translates cleanly.

A linked image. An image that is the only content of a link names the link, so it describes the destination.

<!-- Before 🚫 -->
<a href="/"><img src="logo.svg" alt="logo"></a>

<!-- After ✅ -->
<a href="/"><img src="logo.svg" alt="TAT School home"></a>

Exceptions

WCAG lists situations where a full equivalent is not required, and a tester has to know each one:

• Controls and input: if the non-text content is a control or accepts user input, it needs a name that describes its purpose (the icon button above)
• Time-based media: for audio and video, the text alternative only has to identify the media (for example, a title). Its content is covered by guideline 1.2, in the next lesson
• Tests or exercises: when describing the content would invalidate it (a "name this painting" quiz), a descriptive identification is enough
• Sensory experiences: content meant to create a specific sensory experience, such as a piece of music or a work of visual art, needs a descriptive identification, not a full equivalent
• CAPTCHA: a text alternative must identify and describe the purpose of the CAPTCHA ("Type the characters shown to prove you are not a robot"), and an alternative form in a different modality (for example, an audio CAPTCHA next to a visual one) must be provided. A visual-only CAPTCHA fails
• Decoration, formatting, invisible: purely decorative content, content used only for visual formatting, or content not shown to users must be implemented so assistive technology can ignore it (the alt="" above)

👨🏻‍🏫 The decorative exception is where testers fail images that pass. "This image has an empty alt" is not a finding. "This image has an empty alt and shows the price of the product, which is nowhere else on the page" is a finding.

How to test it

1. List the images. Turn images off in the browser, or use an accessibility extension that overlays each image's alt. In DevTools, you can also run document.querySelectorAll('img:not([alt])') in the console to find images with no alt attribute at all
2. For each image, ask what it is for: informative, decorative, functional (inside a link or button), text, or complex. Then judge whether the alternative serves that purpose. Read it out of context: if you only heard the alt, would you lose anything?
3. Check icon-only controls: buttons and links whose only content is an image or an <svg>. Inspect each in the DevTools Accessibility pane and read its computed name
4. Check CAPTCHAs for a described purpose and an alternative modality
5. Listen to the page with a screen reader, jumping through graphics (in NVDA, press G). Anything that reads as a file name, "image", or "graphic" with nothing else is a failure

Automated: partly. axe-core reliably flags a missing alternative (rules such as image-alt, input-image-alt, svg-img-alt, and button-name). It cannot tell whether an alternative is meaningful, whether an image marked decorative actually carries information, or whether alt="photo" describes anything.

Try it yourself 🔍

1. Open the home page of a news site and find three images: one informative, one decorative, and one inside a link. Read each alt in DevTools. Does each one serve the image's purpose?
2. Find an icon-only button on any site you use (a search magnifier, a close "X", a share icon). What is its accessible name in the DevTools Accessibility pane? Would a voice control user know what to say?
3. Find a CAPTCHA on a sign-up or login form. Is there an alternative that does not rely on sight?

Show the world what you learned 🌎

To show your professional network what you have learned in this lesson, post the following on LinkedIn.

I am taking the "WCAG 2.2 Level A" course by @Bruno Pulis at the @Talking About Testing School, where I learned that WCAG 1.1.1 Non-text Content is about purpose, not pixels: informative images describe their information, decorative images get an empty alt, icon buttons are named for their action, and a CAPTCHA needs an alternative that does not rely on sight. I also learned why a scanner can find a missing alt but never a meaningless one. #TalkingAboutTesting #TATSchool #WCAG22LevelA #Accessibility #WCAG

👨🏻‍🏫 Remember to tag me in your post. Here is my LinkedIn profile.