Non-text Content

In brief

A screen reader cannot see an image; it reads whatever text it is given. Without a text alternative, the user often hears "graphic" or a file name, and misses the information the image carries.

This criterion requires every piece of non-text content shown to the user (a photo, an icon, a chart, an audio clip, an animation) to have a text alternative that serves the same purpose. Content that is purely decorative or used only for visual formatting must be implemented so that assistive technology can ignore it, so nobody has to listen to a meaningless image.

What does it cover?

• Informative images: Photos, infographics, charts, diagrams and maps. When a short description is not enough, provide a short name together with a longer description.
• Controls and input: Icon buttons, image links and image submit buttons. The alternative describes what the control does, not what it looks like.
• Time-based media: Video and audio need at least a descriptive name that says what the item is. Captions, transcripts and audio description are covered separately by the 1.2 criteria.
• Tests and sensory experiences: A test that would be invalid if converted to text, or content meant only to create a sensory experience (a musical performance, a work of art). A descriptive name is enough.
• CAPTCHA: A text alternative that describes its purpose, plus at least one other CAPTCHA form that relies on a different sense.
• Decoration, formatting and invisible content: Transparent spacer images, ornamental patterns and tracking pixels that users never see are hidden from assistive technology.
• Out of scope: Embedding text in images is covered by 1.4.5 (Images of Text), the contrast of graphics by 1.4.11 (Non-text Contrast), and announcing a control's role and state by 4.1.2 (Name, Role, Value).

Who does it affect?

Blind and low-vision screen reader users get the information in an image only through its text alternative. Because text can also be sent to a braille display, it is the only route for deafblind users. For audio, people who are deaf or hard of hearing read the text equivalent. People who find it hard to interpret images benefit from a short, clear description. Text alternatives also make visual content searchable and easier to repurpose.

In the EAA and EN 301 549

The European Accessibility Act (Directive (EU) 2019/882) applies to in-scope products and services placed on the market after 28 June 2025. Recital 47 names four principles for websites and mobile applications: perceivable, operable, understandable and robust. Text alternatives are a core part of "perceivable".

The technical counterpart is the standard EN 301 549, which incorporates WCAG 1.1.1 by reference and turns it into separate clauses for each kind of ICT.

Clause numbers follow EN 301 549 V3.2.1. In V3.2.1 the software requirement is split in two: 11.1.1.1.1 (open functionality) and 11.1.1.1.2 (closed functionality, which points to 5.1.3.6). In V4.1.1 the same topics sit under the headings 9.1.1, 10.1.1 and 11.1.1.

Standard version: EN 301 549 V4.1.1 (September 2026) is based on WCAG 2.2 and is the first version prepared specifically for the EAA. It has not yet been cited in the Official Journal of the European Union, so for now it is best treated as a voluntary technical route to the EAA's requirements. Once cited, it will give a presumption of conformity. The text of criterion 1.1.1 is the same in WCAG 2.1 and 2.2.

A note on EAA scope: The Directive excludes pre-recorded time-based media published before 28 June 2025 and third-party content that the business neither funds, develops nor controls (Article 2(4)). Text alternatives for the images you publish and control are not affected by these exclusions.

Directive (EU) 2019/882, EUR-Lex, opens in a new tab

Code examples for the web

1. An informative image

The alt text must carry the information that replaces the image. A file name or a generic word such as "chart" is not enough.

<img src="sales-chart.png">

<img src="IMG_2041.png" alt="IMG_2041.png">

<img src="sales-chart.png"
     alt="Q1 2026 sales: January 120, February 135,
          March 160 thousand EUR">

2. A decorative image

An image that carries no information is marked with empty alt text so screen readers skip it. Writing "decorative image" or "spacer" makes users listen to noise.

<img src="wave.svg" alt="decorative image">
<img src="spacer.gif" alt="spacer">

<img src="wave.svg" alt="">

/* Or add the ornament with CSS */
.heading { background-image: url("wave.svg"); }

3. An icon-only button

The alternative describes what the button does, not how the icon looks.

<button type="button">
  <img src="search.svg">
</button>

<button type="button" aria-label="Search">
  <svg aria-hidden="true" focusable="false">…</svg>
</button>

<!-- An image button can use alt instead -->
<input type="image" src="submit.png" alt="Submit the form">

4. An image inside a link

When the image is the link's only content, its alt text must say where the link goes.

<a href="/">
  <img src="logo.svg" alt="logo">
</a>

<a href="/">
  <img src="logo.svg" alt="Example Company home">
</a>

5. A complex chart

When a chart's information does not fit in a short alt text, give it a short name and provide the detail nearby, in visible form. Where possible, also provide the data in a table.

<img src="revenue.png" alt="revenue chart">

<figure>
  <img src="revenue.png"
       alt="Monthly revenue line chart"
       aria-describedby="revenue-summary">
  <figcaption id="revenue-summary">
    Revenue rose from 120 thousand EUR in January to
    160 thousand EUR in March. Monthly values are in the
    table below.
  </figcaption>
</figure>

6. SVG icons and illustrations

<svg viewBox="0 0 24 24">…</svg>

<!-- An informative SVG -->
<svg role="img" aria-labelledby="warning-title" viewBox="0 0 24 24">
  <title id="warning-title">Warning: payment failed</title>
  …
</svg>

<!-- A decorative SVG -->
<svg aria-hidden="true" focusable="false" viewBox="0 0 24 24">…</svg>

Code examples for mobile

The same rule applies in native mobile apps. Give an informative image a name, give a decorative image none, and give an icon-only button a label that describes its action.

iOS (SwiftUI)

import SwiftUI

struct ProductCard: View {
    var addToFavorites: () -> Void

    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            // Informative image: an equivalent description
            Image("product-photo")
                .resizable()
                .scaledToFit()
                .accessibilityLabel("Blue running shoe, side view")

            // Decorative image: hidden from assistive technology
            Image(decorative: "wave")

            // Icon-only button
            Button(action: addToFavorites) {
                Image(systemName: "heart")
            }
            .accessibilityLabel("Add to favorites")
        }
    }
}

Android (Jetpack Compose)

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.ui.res.painterResource

@Composable
fun ProductCard(addToFavorites: () -> Unit) {
    Column {
        // Informative image
        Image(
            painter = painterResource(R.drawable.product_photo), // Your resource
            contentDescription = "Blue running shoe, side view"
        )

        // Decorative image: contentDescription is null
        Image(
            painter = painterResource(R.drawable.wave), // Your resource
            contentDescription = null
        )

        // Icon-only button
        IconButton(onClick = addToFavorites) {
            Icon(
                imageVector = Icons.Filled.Favorite,
                contentDescription = "Add to favorites"
            )
        }
    }
}

How to test

• Navigate with a screen reader: Move through the page or screen with NVDA, VoiceOver or TalkBack. For each image, does what you hear take the image's place? If you hear "graphic", "image" or a file name, there is a problem.
• Look for decorative images: Are images that carry no information skipped? Or is something unnecessary such as "decorative image" read out?
• Listen to functional images: Do icon buttons and image links say what they do rather than how they look?
• Check for loss of information: Turn images off and read the page using only the text alternatives. Are meaning and function preserved?
• Inspect the code: Do img, input type="image" and area elements have an alt attribute? Is it empty on decorative images? On mobile, are the contentDescription and accessibilityLabel values correct?
• Try the CAPTCHA: Is there an alternative verification method that relies on a different sense?
• Limits of automated tools: Automated tools catch missing alt attributes and obvious mistakes such as file names. Only a person can decide whether a description serves the same purpose as the image.

Common mistakes

• Omitting the alt attribute: Some screen readers fall back to reading the file name.
• Using a file name or placeholder as alt text: "IMG_2041.png", "image" and "photo" are not descriptions.
• Describing decorative images: Text such as "decorative image" or "spacer" adds noise. Leave the alt empty.
• Conveying information only through CSS background images: Images added with CSS have no text alternative.
• Not repeating the text inside an image: Any information written in the image must also appear in the alt text.
• Not updating the description when the image changes: When the image changes, the alt text must change with it.
• Using the same alt text everywhere: The same image can serve different purposes in different contexts, for example "International Travel" on one link and "International Campuses" on another site.
• Leaving icon buttons without a name: Search, menu, close and share icons are often left unlabelled.

Sources

• Understanding SC 1.1.1: Non-text Content (W3C), opens in a new tab
• WAI Images Tutorial: Decision Tree (W3C), opens in a new tab
• Directive (EU) 2019/882, European Accessibility Act (EUR-Lex), opens in a new tab
• EN 301 549 V4.1.1 (ETSI), opens in a new tab
• The European accessibility standard EN 301 549 has been updated (AccessibleEU), opens in a new tab

Standard version: EN 301 549 V4.1.1 (2026-09), WCAG 2.2. This page is for informational purposes only and is not legal advice. For binding requirements, refer to the official texts of the European Accessibility Act (Directive (EU) 2019/882) and EN 301 549.