You ran a scanner on your site and it flagged dozens of images. So you, or someone helping you, went through and gave every single one a description: the swoosh behind the header, the stock photo of a smiling handshake, the little phone icon next to your phone number. Now a screen reader user hears “blue abstract wave graphic, image” before they get to anything useful, on every page.
Describing everything is the opposite mistake from describing nothing, and it is just as tiring to listen to. Getting alt text for decorative images right is a decision more than a writing task: you decide what the picture is doing on the page, and only then decide whether it needs words. This post is about that decision, and about when to use empty alt.
The three jobs an image can do
WCAG 1.1.1 Non-text Content asks for a text alternative that serves the same purpose as the image. The word that matters is purpose. The same photo can need a full sentence on one page and nothing on another.
| Job | What it means | What the alt text should be |
|---|---|---|
| Informative | The image tells the visitor something the text does not: a product, a chart, a map, a before and after. | A short description of what the visitor would otherwise miss. |
| Functional | The image is a link or a button, or the only thing inside one: a linked logo, a magnifying glass for search. | Where it goes or what it does, not what it looks like. |
| Decorative | It adds mood or spacing but no information. Remove it and nobody misses a fact. | Empty, so assistive technology skips it. |
The test for decoration is simple to say and takes a little practice to apply: if this image vanished, would a visitor who cannot see it lose anything they need? If not, it is decorative.
When to use empty alt
Use an empty alt attribute, written alt="" with nothing between the quotes, when the image is pure decoration or when its information is already in the text right next to it. Typical cases on a business site:
- Background textures, divider lines, flourishes and shapes.
- Stock photos that set a mood: the laptop on a desk, the handshake, the smiling team that is not your team.
- A photo placed right beside a caption or heading that already says exactly what it shows.
- Icons that sit next to a text label saying the same thing, like an envelope icon beside the word “Email”.
- Duplicate images, such as a product thumbnail that sits inside the same link as the product name.
An empty alt is not the same as a missing alt. When the attribute is missing entirely, many screen readers fall back to reading the file name: “DSC underscore 4471 dot jpg”. When it is present but empty, they skip the image silently. WordPress outputs the empty version when you leave the alt box blank, but some page builder widgets, sliders and older themes leave the attribute out altogether, so check what actually reaches the page.
A space between the quotes, or alt text like “spacer” or “image”, is not empty. It gets read out. So does a description of decoration, however short.
Gray areas that trip people up
The team photo
On your About page, a photo of your actual staff is usually informative. It shows real people, maybe the office, and visitors care about that. A one-line description is right. The same photo used as a banner across the top of a blog post about tax deadlines is decoration there.
An image with a caption
A caption is visible to everyone, and screen readers read it too. If the caption already says what the photo shows, the alt text should not repeat it word for word, or the listener hears it twice. Either keep the alt very short and add what the caption leaves out, or leave it empty when the caption truly covers it. The difference between these fields is explained in our post on captions, titles and alt text in WordPress.
The linked logo
Your logo in the header almost always links to the home page. That makes it functional, never decorative, because it is the only content inside the link. An empty alt there leaves an empty link, and the screen reader announces “link” with nothing after it, or reads out the web address. The alt should be the business name, and it can mention the home page.
An icon inside a button
The same logic applies to icons. A cart icon that is the whole button needs a text name like “Cart”. A cart icon next to the visible word “Cart” should be hidden from screen readers. How this works for icon fonts and inline SVGs, which do not use alt at all, is in our post on accessible icons and SVG.
Charts, diagrams and infographics
These are informative, but the information rarely fits in a sentence. Give a short alt that says what the chart is (“Bar chart of appointment wait times by month”) and put the actual figures or the key finding in the text or in a table near it. Do not try to cram a whole data set into the alt box.
Pictures of text
A banner that reads “Holiday hours: closed December 24 to 26” is informative, and the text inside it is the information. The alt must contain those words. Better still, put the hours on the page as real text and treat the banner as decoration.
Background images and the Cover block
Images set as a CSS background, which is how many hero sections, parallax strips and theme headers are built, have no alt attribute at all. Screen readers do not know they exist. That is fine when the image is decorative, and it usually is.
The trouble starts when a background picture carries meaning: a photo of the actual storefront that you want visitors to recognize, or a background graphic with an offer written into it. Nobody using a screen reader will get that. Move the message into real text on top of or beside the image, or swap the background for a normal image with proper alt text.
The WordPress Cover block sits in between. It uses the image as a backdrop for the text you place over it, so the text should carry the meaning by itself. Our guide to the Cover block and readable hero images covers the layout side. Contrast between that text and the photo still has to work, which is a separate check.
Linked images and duplicate links
Blog grids and product listings often repeat the same link twice in a row: the thumbnail links to the post, and so does the title under it. A screen reader user tabbing through hears every post twice, once as a file name or a vague description and once as the title.
The cleanest fix is a theme change that puts the image and the title inside one link. Then the image can have empty alt, because the title names the link. If that is not possible, give the thumbnail alt text that matches the post title, so at least both links say the same thing. This one belongs to whoever maintains the theme rather than the editor, but it is worth knowing why it sounds so repetitive.
How to check the alt text for decorative images on a page
- Open a page and list its images. A free scanner such as WAVE shows each image with its alt text beside it, which makes this quick.
- For each one, ask the vanish test: would someone miss information if it disappeared?
- For images that are links or inside buttons, check the alt says the destination or action.
- Look for images flagged as missing alt and decide which way they go, rather than filling the box by reflex.
- Listen to the page with a screen reader for a minute or two. Any image you hear that did not need to be there is a candidate for empty alt.
Be wary of the scanner’s verdict here. A tool can tell you an image has empty alt. It cannot tell you whether that image should have been described. An informative photo with an empty alt passes every automated check and still leaves people out.
For the hands-on steps of where to type alt text in the Image block and the Media Library, see our walkthrough of adding alt text in WordPress. Images are one piece of the wider set of editor habits covered in our guide to accessible web content.
Bulk fixes and their limits
On an older site with hundreds of uploads, the temptation is to run a plugin that fills every blank alt box with the file name or the post title. Applied to the alt text for decorative images, that turns intended silence into noise and gives informative images useless names. If you use any bulk tool, use it to find images, not to write for them.
A more realistic plan: fix the templates first (header logo, footer icons, blog thumbnails), since one change there fixes every page. Then go through your most visited pages by hand. Our team does this sort of cleanup as part of our media and alt text accessibility work, and our broader ADA website accessibility help covers the rest of the site.
Frequently asked questions
My logo appears in the header and the footer. Do both need alt text?
If both copies link to the home page, yes, because each one is the only content of its link and an empty alt would leave an empty link. The business name is enough for both. If the footer logo is not a link and your business name is printed right beside it, that copy can have empty alt.
Should stock photos always have empty alt text?
Not always, but often. If the stock photo only sets a mood and the text says everything, empty alt is right. If it shows something specific the visitor needs, such as the type of equipment you use or the kind of room you renovate, a short description helps. Decide by what the image is doing on that page.
Can I hide decorative images with aria-hidden instead of empty alt?
For normal images, empty alt is the simpler and better supported choice, and it is what WordPress produces when the box is blank. Developers use aria-hidden mainly for icons and inline SVG graphics that have no alt attribute. Using both on the same image does no harm, but empty alt alone is enough.
Does marking images decorative hurt SEO?
Not in any way worth worrying about. Search engines use alt text as one hint about images, so decorative pictures with empty alt simply give no hint, which is accurate. The images you want found in image search, such as product photos, are informative anyway and should be described properly.
If your theme forces images into odd places, wraps every picture in a link, or builds everything from background images, careful alt text only goes so far. In that case it may be worth looking at accessible website design from the start, where images get the right role in the template instead of being patched page by page.
Next in this series: Video Captions for Accessibility: Get Them Right
