Using alt text for decorative images correctly is one of the easiest ways to make a page calmer and more usable for people who rely on a screen reader or other assistive technology. The goal is simple: if an image adds no meaning, it should not add noise. That usually means keeping the alt attribute present but empty, so the decorative image is skipped rather than announced. The tricky part is deciding what is truly decorative in context, especially when an image is near headings, links, or text that already communicates the same idea. This guide walks through clear definitions, HTML patterns, tool-specific settings, and common failures to avoid.

Best for: Content teams who publish pages with icons, flourishes, and layout graphics and want cleaner screen reader output.

Not ideal when: The image communicates meaning, includes text, or changes what a user should understand or do on the page.

Good first step if: You can quickly label each image as decorative, informative, or functional by checking the surrounding text and links.

Call a pro if: You have complex diagrams, interactive SVGs, or templates that generate many images and inconsistent alt attributes.

Quick Summary

• Decorative images are purely visual and do not change meaning, tasks, or understanding for the user.
• The preferred technique is an empty alt attribute (alt=””) so assistive technology skips the image.
• Missing alt and empty alt are not equivalent; one creates uncertainty and often extra announcements.
• Images used as links, buttons, or labels are functional and need alt text that states the action.
• For charts and infographics, combine a short alt with a longer description elsewhere on the page.

What Counts as a Decorative Image?

A decorative image is one that adds visual polish but no information, instruction, or unique context to the content. If removing the image would not change what someone learns, decides, or does, it is typically decorative and should be hidden from screen readers to avoid redundant alternative text, as outlined in the accessibility image alt text guidelines. Common examples include background flourishes, ornamental dividers, corner accents, stock textures, and purely aesthetic photos that do not support the surrounding message.

To decide, evaluate the meaning/purpose of an image in its exact placement. If nearby text already fully conveys the point, and the image does not function as a link or control, it is more likely decorative. If you are unsure, rewrite the page in your head without the image; if anything becomes unclear, it is not decorative.

Decorative Vs. Informative Vs. Functional Images

Decorative images are visual-only and should be skipped by assistive technology. Informative images communicate content, such as a product feature photo that shows a specific detail not stated in text, or a chart that conveys a trend, including various alt text examples. Functional images perform an action, such as an icon that acts as a button image or a logo image that is an image used as a link.

A quick mental test: informative answers “what is this showing?”, while functional answers “what happens if I activate this?” If you can answer either question with something meaningful, it needs real alternative text rather than an empty alt attribute.

The Correct Alt Text for Decorative Images (the Empty Alt Attribute)

For decorative images, include the alt attribute but leave it empty: alt=””. This signals that the image should be ignored by screen readers, keeping reading order smooth while still meeting the requirement that images provide an alt attribute, including the use of a WordPress alt text generator.

Do not use “decoration,” “image,” or “divider,” because those still get announced. Avoid keyword stuffing for SEO; it creates confusing, repetitive output. For broader guidance beyond decorative cases, see alt text best practices in your documentation hub.

Example HTML Patterns: Alt=”” vs Missing Alt

alt=”” is an explicit instruction to skip the image. A missing alt attribute leaves assistive technology to guess, and different tools may announce the file name, role, or simply “graphic,” which is rarely helpful. In practice, missing alt often triggers accessibility test failures because it signals incomplete authoring, which can affect how alt text helps SEO.

Use these patterns thoughtfully:

• Decorative image: <img src=”flourish.png” alt=””>
• Informative image: <img src=”team-photo.jpg” alt=”Customer support team standing in front of the help desk”>
• Functional image link: <a href=”/search”><img src=”magnifier.svg” alt=”Search”></a>

When an Image is Not Decorative (and Needs Real Alt Text)

An image is not decorative when it adds information, signals status, or helps a user complete a task. If it contains text, shows a specific example, or conveys an important cue (like a warning symbol), write alt that matches the intent and key content, not every visual detail.

For functional images, alt should describe the action or destination, especially for linked images and button-like icons. “View cart” beats “shopping cart icon.” If a caption exists, avoid duplicating it; let caption and alt complement each other.

Common “Looks Decorative” but Isn’t Cases

Some images appear ornamental but carry meaning in context. A logo image in a header may look decorative, but if it links to the homepage it is functional and needs an alt like “Home” or the site name, depending on purpose. Likewise, an icon next to “Download” might be redundant and could be decorative, but if the icon is the only indicator of file type or action, it becomes informative or functional.

Other frequent traps include images of text (badges, labels, quotes) and small status indicators (asterisks for required fields, “new” tags, error icons). If the image changes what a user should notice or do, it is not decorative even if it is small.

Decorative Images in Different Systems (CMS + Documents)

In a CMS, decorative handling depends on the HTML your editor outputs. Ensure every <img> gets an alt attribute, and set decorative images to an explicit empty alt (alt=””) so assistive tech skips them. Also review templates (cards, callouts) to confirm whether built-in images carry meaning or are purely layout, especially when you consider how to mass fix missing alt text.

In documents, apply the same rule using the platform’s controls: mark flourishes as decorative, and give screenshots purposeful alt. Cross-channel teams should share one decision rule. See publishing tutorials.

Word, PDF, and Common WYSIWYG Editors (“Mark as Decorative”)

Microsoft Word offers a “Mark as decorative” option in its alt text pane; this typically maps to the empty alt technique, so the image is present but not announced. Many rich-text editor toolbar interfaces provide a similar checkbox or toggle; use it for separators, flourishes, and non-essential icons. In tools like Adobe InDesign and Adobe Acrobat, you may set alternate text properties and tagging so a PDF’s reading order and image descriptions behave correctly.

In Canvas (LMS) and other editors, verify the output by previewing with accessibility checkers and, when possible, a quick screen reader pass. The best tool setting is the one that results in an explicit empty alt or equivalent “decorative” marking, not a hidden missing attribute.

Background Images, Icons, and Separators

Handle backgrounds, icons, and separators based on meaning and function. Pure layout visuals often belong as CSS backgrounds because they are typically ignored by assistive technology. Separators (horizontal rules, ornamental lines, corner graphics) are classic decorative images and should not get descriptive alt that interrupts reading, especially when considering image SEO.

Icons need care because they can be controls. If an icon is the only visible label, it needs an accessible name (alt for <img>, or labeling for SVG/buttons). If clear adjacent text already names the action, treat the icon as decorative to avoid repetition.

CSS Backgrounds vs <Img> and Inline SVG Considerations

CSS backgrounds are best for purely visual textures and hero overlays that do not add content. Use <img> when the image is content and needs alternative text, such as a product photo or an instructional screenshot. For inline SVG, you can provide accessible names with labeling attributes, or hide decorative SVGs from assistive technology; the right choice depends on whether the SVG is informative, functional, or decorative.

Be careful with “decorative” SVG icons inside interactive elements. If the icon is the only label, the control still needs a text alternative through the button’s accessible name. If visible text already labels the control, the icon can be hidden to avoid redundancy.

Common Mistakes and Accessibility Test Failures

A common failure is using decorative images for SEO keywords, which creates irrelevant announcements and erodes trust. Another is omitting alt entirely; missing alt is not the same as empty alt, and automated tests often flag it. Over-description is also frequent, turning tiny flourishes into noisy sentences.

Other issues: repeating adjacent headings, defaulting to “image of,” and forgetting linked images are functional. Watch templates with repeated icons; even correct alt can become clutter when announced constantly. Use content quality workflow to catch problems early.

What Screen Readers Do With Missing Alt vs Empty Alt

With empty alt (alt=””), a screen reader typically skips the image, maintaining a clean reading experience. With missing alt, behavior can vary: the tool may announce the element as a graphic, read the file name, or expose other attributes in a way that feels random to the user. That inconsistency is why accessibility guidelines and WCAG-aligned checks usually prefer explicit emptiness for decorative images.

Also note that redundant alternative text creates its own failure mode: even “correct” words become a problem when they repeat what is already spoken, like an icon next to a link that already says “Contact.”

Quick Checklist and Examples Library

Decide decorative image alt text by using a consistent checklist and a small internal examples library. Ask: Does the image change meaning as outlined in our guide on how to write alt text? Add information not already in text? Act as a control or link? Sit inside link text, or serve as a link by itself? If no, it is decorative and should use alt=””.

Examples:

• Ornamental divider line: alt=””
• Hero texture behind a heading (CSS): no alt needed
• Linked logo to homepage: alt=”Home” or site name
• Icon-only button: name the action, like “Open menu”
• Infographic: brief alt plus nearby long description

Add edge cases to your team writing standards page.

Conclusion

Choosing alt text for decorative images is mainly about protecting clarity: decorative elements should not compete with real content in a screen reader’s output. Use an explicit empty alt attribute (alt=””) for purely ornamental elements, and reserve descriptive alt text for informative and functional images that add meaning or enable an action, such as when creating alt text for charts. When you are unsure, decide based on context, links, and whether the image contains text or unique information. Apply the same rules across web pages, CMS templates, and documents, and you will reduce accessibility errors while making content easier to navigate.