Background and CSS images: when they need a text alternative

A CSS background image is a picture painted behind an element by the background-image property instead of being placed in the HTML. MDN's reference says browsers give assistive technology no special information about background images, so a screen reader does not announce one and tells its user nothing about it. That is the right result for a texture, which has nothing to say, and the wrong result for a status icon, a label or a photo people are meant to see.

Success criterion 1.1.1 Non-text Content asks for a text alternative (text that serves the equivalent purpose and that assistive technology can read) for non-text content, with an exception for pure decoration, which must be implemented so that assistive technology can ignore it (W3C's Understanding page). A background image meets the exception by design and cannot meet the main rule, which is why W3C lists conveying information only through CSS background images as failure F3. So the decision is a question about the image, not the technique: if it disappeared, would anyone lose information or lose the ability to do something? If not, leave it in CSS. If so, put its meaning in the markup.

Which CSS images need a text alternative?

Five cases turn up on real pages. The first and the last need no text alternative for the image itself.

Why CSS cannot carry alt text

Alt text is an attribute of the img element, and CSS paints pixels without an equivalent. WebAIM's alt text article says it directly: it is not possible to add alternative text to a CSS or other background image, so a background image that presents content needs that content made accessible within the page markup. CSS images, it adds, are for decoration.

Two more behaviors make a background image a poor carrier of meaning. F3 notes that information in a background image can be lost by people who use alternate backgrounds to increase legibility and by users of high contrast mode in some operating systems. Technique C9 notes that some user agents can turn CSS off at the user's request, which makes background images disappear. That is a benefit for decoration, because nothing interferes with enlarged fonts or high contrast settings, and a loss for anything meaningful.

Generated content behaves the same way. MDN's page on the content property says CSS-generated content, such as what ::before and ::after insert, is not included in the DOM, so it is not represented in the accessibility tree (the structure a browser builds for assistive technology) and certain assistive technology and browser combinations will not announce it.

Decorative backgrounds belong in CSS

W3C's tutorial on decorative images describes them as images that add no information to the content of a page, and says that where possible they should be provided as CSS background images instead of img elements. Under 1.1.1 the image must serve only an aesthetic purpose, provide no information and have no functionality, and the tutorial notes that only the author can make that judgment. WebAIM adds that the CSS route removes the need for alternative text entirely.

Technique C9 lists the CSS properties that fit: background, background-image, content with ::before or ::after, and list-style-image. A texture behind a band of content is the standard case. Set a text color and a plain background color beside it, so the section still reads if the image does not load:

.shipping-band {
  color: #1f1f1f;
  background-color: #f4f1ea;
  background-image: url("/img/paper-texture.png");
}

Add nothing else. A decorative background needs no alt text, label or role, and W3C's decorative image tutorial notes that text values for such images add audible clutter to screen reader output. Our decorative images guide covers how to decide whether an image is decorative. The decision flips when you want the picture found in image search: an image you want found is not decoration.

When a CSS image carries meaning

These are the patterns where a background does a job. The examples are generic, not real sites.

Words inside the image

F3's first example is a paragraph whose background image contains a rate offer written as text. The words exist only as pixels, so a screen reader has nothing to read. Write them as live text and let CSS style the container. Our guide to images of text covers the few cases where words in a picture are acceptable and what the alternative must say.

Icons that mark status

F3's second example is a book list that uses background icons to show whether each title is new, limited, in stock or out of stock. A store that marks sold-out items with a red dot has the same problem if the dot is the only signal. Keep the dot as decoration and put the words in the markup:

<span class="stock stock-out">Sold out</span>

.stock-out {
  padding-left: 1.25rem;
  background: url("/img/red-dot.svg") left center no-repeat;
}

Icon-only buttons and links

When non-text content is a control, 1.1.1 requires a name that describes its purpose. W3C's tutorial on functional images says the text should convey the action, such as "Print this page", and not name the drawing of a printer. A button drawn entirely with a background image has no name until you give it one:

<button type="button" class="icon-print" aria-label="Print this page"></button>

.icon-print {
  width: 2.5rem;
  height: 2.5rem;
  background: url("/img/printer.svg") center / 1.5rem no-repeat;
}

When people need the icon to identify the control, success criterion 1.4.11 Non-text Contrast asks for a contrast ratio of at least 3:1 against adjacent colors (W3C's Understanding page). Our guides to alt text for icons and accessible link text go further on naming controls.

Photos that are the content

A hero photo or product shot is often built as a background because the picture then fills and crops to its box. If people are meant to look at the picture, it is content and belongs in an img element. The object-fit property gives the same crop-to-fill result: MDN says cover sizes the content of a replaced element such as an img to keep its aspect ratio while filling its box.

<img class="hero-photo" src="/img/harbor.jpg"
     alt="Fishing boats tied up along a harbor wall at dawn">

.hero-photo { width: 100%; height: 24rem; object-fit: cover; }

For what to write in the alt attribute, see our alt text guide, the rules for product images and the worked examples.

Four ways to give a CSS image a text alternative

Choose in this order. The first two remove the problem. The last two keep the image in CSS and add the missing text beside it.

1. Use an img element

For a photo, an illustration or any picture people are meant to see, this is the default. It carries alt text natively, it is announced by screen readers, and it is where Google looks for images (see the section on search below). A graphic drawn as inline SVG is a separate case, covered in our SVG accessibility guide.

2. Use real text

If the picture only shows words, write the words in HTML and style them with CSS. Real text can be read aloud, copied, and resized or restyled by the reader, which words baked into pixels cannot.

3. Label the element with role="img"

For a graphic that must stay in CSS, such as a rating bar, give the element that carries the background role="img" and a name. MDN's page on the img role says the name is required: use aria-labelledby if a visible label exists, otherwise aria-label. W3C's technique ARIA24 applies role="img" with an aria-label to a span that shows a font icon. The label should convey what the image means, as W3C's tutorial on informative images puts it, not describe the drawing.

<div class="rating" role="img" aria-label="Rated 4 out of 5"></div>

.rating {
  width: 5rem;
  height: 1rem;
  background: url("/img/stars-4.svg") left center / contain no-repeat;
}

One limit matters. MDN notes that most screen readers treat an element with role="img" as a black box, and that browsers apply the presentation role to all of its descendants: in MDN's own example, a heading inside one does not exist for assistive technology users. Do not put a link, button or other interactive content inside one.

4. Add visually hidden text

When a background icon sits beside a link or button, keep the words in the markup and move them out of sight with CSS. WebAIM's alt text article suggests this for a PDF icon on a link: keep "(PDF)" in the link and position it off-screen. WebAIM's page on invisible content gives the class below, and notes that display: none and visibility: hidden hide content from screen readers too, so they cannot be used for this.

<a class="doc-link" href="/rates.pdf">Shipping rates <span class="sr-only">(PDF)</span></a>

.doc-link { padding-right: 1.5rem; background: url("/img/pdf-icon.svg") right center no-repeat; }

.sr-only {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

For generated images, MDN also documents content: url("...") / "alt text", but it advises moving critical information into the main document, so treat that syntax as a supplement, not a fifth way.

Content images and search

Google's image guidance (updated March 2, 2026) says Google does not index CSS images, and its example of what to avoid is an image set as a div's background. It tells site owners to use img elements with a src and descriptive alt text, and calls alt text the most important attribute for image metadata. Moving a content image out of CSS fixes the screen reader problem and puts the image where Google looks. Our guide to alt text and SEO covers what Google's documentation says about alt text and what it does not.

Text over a background image still needs contrast

A decorative background can sit behind text, and then the text has its own requirement. Success criterion 1.4.3 asks for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text, and MDN's background-image page repeats those thresholds for text over background images. W3C's Understanding page for 1.4.3 lists failure F83 for background images that give foreground text too little contrast, and F24 for setting text colors without background colors.

Two habits help: set a background-color under the image with a text color that pairs with it, and measure the weakest spot behind the text, not one sample point. Our text over image contrast guide shows how, and the image contrast checker does the measuring.

How to find CSS images that carry meaning

A scanner that reads markup cannot tell what a stylesheet paints, so this is a short manual pass built on the F3 procedure: find every image added through CSS, check whether it conveys information found nowhere else on the page, and if it does, check whether that information is programmatically determinable.

1. Search the source. Look through your stylesheets and templates for url(, and for list-style-image and content. Include inline style attributes and scripts, because F3 covers images added either way.
2. Ask what would be lost. For each hit, if this image vanished, would anyone lose words, a status or a way to act?
3. Switch the image off. Untick the declaration in your browser's developer tools, or turn styles off if your browser allows it, and see what the page loses. An empty-looking button or a missing status is a finding.
4. Read the accessible name. The accessibility pane in developer tools shows the computed name of a control. An icon-only button should show the action, such as "Print this page".

Check it yourself

These free tools cover the parts of this guide a tool can reach:

• Accessibility bookmarklet. Reads the page as your browser has rendered it. It flags a missing alt attribute, filename-style alt text, an image link with no name and role="img" with no name, so it catches a forgotten label from fix 3. It also flags links and buttons with no accessible name, which is how an icon-only button drawn with a CSS background shows up. Text over a background image is listed for a manual check instead of a guessed ratio. It does not decide whether a CSS background carries meaning, so the steps above still need a person.
• Image contrast checker. Measures the worst-case contrast of text over a photo, screenshot or gradient.
• Alt text checker. Once a content image sits in an img element, it reads the page, opens the images it finds and judges whether each alt text is true of the picture, for up to six images per page.
• Alt text generator. Drafts alt text for each image you upload, in a descriptive, SEO or e-commerce style. Check each draft against your page before you publish it.
• Scan my site for free. The free scan reads the HTML your server sends and has no CSS engine, so it checks the img elements on your pages and cannot see what a stylesheet paints. What we check lists every rule and where it stops.