Decorative images often make a website feel polished, balanced, and easier to scan. They can add atmosphere, separate content blocks, support branding, or improve visual appeal without carrying information that users need. Yet when these images are added to a page, they still require an accessibility decision. Leaving them unmarked can create confusion for people using screen readers.

Learning how to write alt text for decorative images helps content teams create cleaner, more accessible websites. The main principle is simple: a decorative image should not interrupt the reading experience with unnecessary descriptions. In most cases, the correct approach is to provide an empty alt attribute so assistive technology skips the image completely.

That decision requires more care than simply labeling every non-essential image as “decorative.” A background image, visual divider, icon, or repeated design element may be decorative in one context but meaningful in another. This article explains how to identify decorative images, when empty alt text is appropriate, common mistakes to avoid, and practical ways to review image accessibility.

What Decorative Images Mean in Web Accessibility

A decorative image is a visual element that adds style or presentation value but does not communicate useful information. It may include a flourish beside a heading, a textured background, a simple divider, or an abstract shape used to support a page layout. Removing it would not change the meaning of the surrounding content.

The purpose of marking an image as decorative is to prevent screen readers from announcing irrelevant visual details. If a screen reader describes every line, curve, shadow, or repeated graphic, users may have to move through unnecessary content before reaching the information they actually need.

Decorative and Informative Images Have Different Roles

An image can be decorative because its subject is not important to the page. For example, a photograph of leaves placed beside a gardening article may create visual interest, but it does not explain a process, identify a plant, or provide evidence. The article remains complete without a description of that photograph.

An informative image communicates facts, instructions, identity, or meaning. A chart, product photo, map, diagram, warning icon, or screenshot may need alternative text even when it appears visually attractive. The correct decision depends on the image’s function, not its file type or design quality.

Context Determines Whether an Image Is Decorative

The same image may need different treatment on different pages. A photo of a laptop beside a software landing page might be decorative if the text explains the product clearly. On a troubleshooting page, the same photo could be informative if it shows a particular port, button, or screen state.

Ask what a visitor would lose if the image disappeared. If nothing important changes, decorative treatment may be suitable. If the image helps users identify an object, follow instructions, make a decision, or confirm a detail, it should receive useful alternative text instead.

Quick Classification Checklist

Use these checks before deciding how to handle an image:

• Does the image communicate facts or instructions?
• Is the image mentioned in nearby text?
• Would removing it change the page meaning?
• Does it identify a person, product, place, or object?
• Is it repeated information already presented in text?
• Does it function only as decoration or visual spacing?
• Does the image contain text that users need to read?

How to Write Alt Text for Decorative Images

For a truly decorative image, the best alt text is usually no descriptive words at all. In HTML, this means using an empty alt attribute: alt=””. The attribute is present, but its value is blank. Screen readers generally recognize this as an intentional instruction to skip the image.

This approach is different from omitting the alt attribute altogether. When alt is missing, assistive technology may attempt to announce the file name, URL, or another available label. A filename such as “blue-wave-final-3.jpg” gives users no meaningful context and can make a page harder to navigate.

Why Empty Alt Text Is Usually Correct

Empty alt text keeps decorative content out of the accessibility tree while preserving the image for visual users. A screen reader can move directly to the heading, paragraph, link, or control that matters. This creates a more efficient reading experience without requiring the image to be removed from the page.

Writers sometimes feel that every image needs a description because alternative text is associated with accessibility. In practice, unnecessary descriptions can reduce accessibility. A phrase such as “decorative blue swirls” adds noise when the swirls have no purpose beyond styling.

Examples of Correct Decorative Image Treatment

A website may use a faint geometric pattern behind a hero section. If the pattern contains no message, brand mark, or visual instruction, it should be treated as decorative. The heading and supporting copy should carry the meaning, while the pattern remains silent for assistive technology.

A blog may also place a small ornamental line beneath each heading. If the line is repeated throughout the article and does not separate meaningful content, it needs no spoken description. The image can remain visible while its alternative text is empty.

Good Practices for Empty Alt Text

• Use alt="" for decorative content.
• Keep the alt attribute in the image markup.
• Do not write “decorative image” as the description.
• Do not use filenames as substitute text.
• Make sure nearby text contains all essential information.
• Check whether the image is actually serving a functional role.

Decorative Image Examples by Content Type

Visual dividers are common decorative elements in blogs, newsletters, and marketing pages. A horizontal flourish, dotted line, or ornamental border usually does not need a spoken label. If it visually separates sections, the document structure should provide that separation through headings, spacing, or semantic markup.

Background textures and abstract shapes are also generally decorative. These images may appear behind text, inside cards, or around call-to-action areas. They should not receive descriptions unless they contain meaningful content, such as readable words, a recognizable symbol, or an important visual distinction.

Icons Used for Appearance

An icon beside a heading may be decorative when the heading already explains the concept. For example, a small star beside “Customer benefits” adds visual emphasis but does not contribute new information. In that situation, an empty alt attribute prevents the screen reader from repeating an unnecessary symbol.

Icons can become meaningful when they communicate status or action. A red warning symbol beside “Payment failed” may reinforce an important message, while a download icon inside a button may help identify the control. In these cases, the accessible name of the surrounding text or control must communicate the function clearly.

Repeated Thumbnail Images

Some pages show repeated thumbnails for articles, categories, or products. If each thumbnail links to a title that already identifies the destination, the image may be decorative. Repeating the same title in alt text can cause screen reader users to hear duplicate information.

A product image should not automatically be marked decorative, however. If color, style, model, condition, or physical appearance affects a buying decision, the image provides useful information. Its alternative text should describe the relevant visual detail concisely.

Image Type and Recommended Treatment

Image type | Typical treatment | Main consideration

Decorative divider | Empty alt text | The divider adds

Abstract background | Empty alt text | Ensure all meaningful text remains available as HTML

Icon beside clear text | Empty alt text | Avoid repeating

Product photograph | Descriptive alt text | Include details

Chart or graph | Alt text plus nearby data | Provide the main finding and accessible details

Linked image | Describe the destination or purpose | The link needs a clear accessible name

When Decorative Images Are Not Really Decorative

A photo can appear ornamental while still communicating something important. An image of a person using a medical device, a close-up of a damaged component, or a picture showing a product’s color may affect how users interpret the page. Visual relevance matters even when the accompanying text is brief.

Do not label an image decorative simply because the editor did not write a caption. Captions and alternative text serve different purposes. A caption may provide context for all readers, while alt text provides an equivalent experience for people who cannot see the image.

Meaningful Visual Details Need Descriptions

When an image conveys information, describe the details that support the page’s purpose. Avoid listing every visible object. A useful description might say “Black wireless keyboard with a compact layout and white backlit keys” when those characteristics matter to a product page.

For a technical screenshot, mention the relevant screen, setting, or error. A description such as “Account settings page showing two-factor authentication enabled” is more useful than “Screenshot of a website.” The goal is to communicate the image’s role, not recreate every pixel.

Alt Text for Images Containing Words

Images that contain readable text deserve special attention. If the wording is essential, include it in the alt text or provide it as nearby HTML text. This applies to promotional banners, quote cards, infographics, event posters, and instructional graphics.

When the same wording appears clearly in nearby text, the image may be decorative from an accessibility perspective. However, teams should still consider whether the visual arrangement, typography, or additional symbols communicate meaning that plain text does not.

Decision Rules for Content Teams

Before marking an image decorative, confirm the following:

• The page remains meaningful without the image.
• No unique text appears only inside the image.
• The image does not identify a product, person, or location.
• The image is not required to complete an instruction.
• The image does not communicate status, danger, or feedback.
• Nearby text does not depend on the image for interpretation.
• The image does not serve as the only link or button label.

Common Mistakes With Decorative Image Alt Text

One common mistake is writing “decorative image” in the alt attribute. This tells a screen reader user that an image exists, but it does not provide useful information. Since the image has no meaningful purpose, announcing its decorative status adds an interruption that users cannot act on.

Another mistake is adding vague descriptions such as “image,” “graphic,” or “design element.” These labels provide little value and may create uncertainty about whether the image should receive attention. For non-informative visuals, empty alt text is generally clearer and more efficient.

Leaving Out the Alt Attribute

Developers sometimes remove alt entirely when an image is decorative. That can produce inconsistent results across browsers and assistive technologies. A missing attribute may cause a screen reader to read the filename, announce a generic image, or pause in a way that feels confusing.

The correct markup uses an empty attribute rather than no attribute. This small technical distinction has a practical effect: it signals that the image was reviewed and intentionally excluded from the spoken content.

Using SEO Keywords in Decorative Alt Text

Alternative text should not become a place for keyword stuffing. Adding phrases such as “best affordable blue decorative background for modern websites” does not improve accessibility and may create a poor experience for screen reader users. Search engines also value relevance and quality, not repetitive wording.

If an image is decorative, do not add a keyword-rich description just to target search traffic. If an image is informative, describe it accurately and naturally. Accessibility should guide the wording, while search visibility benefits from clear page content, useful context, and honest descriptions.

Mistake Review List

Check your image fields for these warning signs:

• The alt text begins with “image of” or “picture of” without a reason.
• A decorative icon repeats nearby visible text.
• A filename appears in the accessible name.
• The phrase “decorative image” is used unnecessarily.
• The description includes unrelated SEO keywords.
• A meaningful chart is labeled only “graph.”
• A linked image has no indication of its destination.

How Alt Text Supports Screen Reader Users

Screen readers convert page structure and accessible names into speech or Braille output. When decorative images are correctly marked, users can move through headings, landmarks, links, and controls without stopping for visual elements that do not provide information.

This is especially important on image-heavy pages. A portfolio, online store, recipe site, or news article may contain dozens of graphics. If every decorative image receives a spoken label, navigating the page can take much longer and make the key content harder to find.

Reducing Cognitive and Navigational Noise

Accessibility is not only about making information available. It is also about presenting information in a way that users can process efficiently. Removing irrelevant image announcements reduces cognitive load and allows people to focus on the page’s purpose.

Clear image handling benefits users with different needs, including people who use screen readers, people with limited attention, and visitors accessing pages through slow connections. Good decisions about alternative text support a more focused experience for everyone.

The Role of Content Editors

Content editors should decide whether an image is decorative based on its role, while developers should implement the decision correctly. A shared workflow prevents assumptions from being passed between design, content, and engineering teams without review.

Editors can add a short note in the content management system when an image is decorative or informative. Developers can then confirm that the resulting markup uses an empty alt attribute, meaningful alt text, or an accessible text alternative where required.

A Practical Editorial Workflow

• Identify the image’s purpose on the specific page.
• Compare the image with nearby text and headings.
• Decide whether users need its visual information.
• Write a concise description if the image is meaningful.
• Use an empty alt attribute if it is decorative.
• Review the published page with an accessibility checker.
• Reassess the decision when the surrounding content changes.

Testing Decorative Images on a Website

Automated accessibility tools can detect missing alt attributes and some markup problems. They cannot reliably decide whether an image is decorative because that judgment depends on context. A tool may flag an empty alt attribute even when it is exactly the correct choice.

Manual review remains important. Open the page, inspect the image’s role, and check whether the surrounding content makes sense without it. If possible, use a screen reader or ask an accessibility specialist to review image-heavy templates and important user journeys.

Useful Testing Questions

When testing a page, ask whether a screen reader user hears unnecessary image announcements. Check whether meaningful images have enough information to support the task. Confirm that linked images identify their destinations and that buttons remain understandable without visual icons.

Also test responsive layouts. An image that is decorative on a desktop page may become meaningful when text is hidden or rearranged on mobile. Accessibility decisions should follow the final user experience, not only the design file or desktop layout.

Common Tools and Review Methods

• Browser accessibility inspection panels
• Automated auditing tools
• Screen readers such as NVDA, VoiceOver, or TalkBack
• Content management system image fields
• Keyboard-only navigation
• Manual review by people with accessibility experience
• Design and content quality checklists

Decorative Images and Search Engine Optimization

Decorative images do not need descriptive alt text for SEO. Search engines should not be given artificial descriptions for visuals that carry no useful content. Instead, focus optimization on page headings, body copy, captions, filenames where appropriate, structured data, and meaningful image descriptions.

Informative image alt text can support image understanding when it accurately reflects the page context. However, alt text is primarily an accessibility feature, not a hidden keyword field. Writing for users produces stronger results than inserting phrases that do not match the image.

Balancing Accessibility and Visual Design

A polished design can remain visually rich without creating unnecessary spoken content. Designers can use color, spacing, borders, patterns, and decorative photography while ensuring that headings, labels, and instructions communicate the essential message in text.

This balance is easier when accessibility is considered during design rather than after publication. Add notes to design systems explaining which icons are decorative, which need labels, and how repeated visual elements should behave across templates.

Useful Guidance for Related Accessibility Work

Teams improving image accessibility may also benefit from reviewing [Internal Link: Website Accessibility Checklist] and [Internal Link: Writing Effective Image Alt Text]. These resources can help align editorial decisions, technical implementation, and quality assurance across the wider website.

The most reliable approach is to create a repeatable standard. Document when empty alt text is used, define who makes the final decision, and include examples from the organization’s own pages. Consistent guidance reduces rework and makes accessibility part of normal publishing.

Building an Image Accessibility Policy

An image policy should explain the difference between decorative, informative, functional, and complex images. It should also address logos, linked images, charts, screenshots, product galleries, and images containing text.

Keep the policy practical. Writers do not need a long technical manual every time they upload a photo. A clear decision tree, a few examples, and a review checklist can help teams make accurate choices without slowing down production.

Policy Elements Worth Including

• Definitions for common image categories
• Examples of empty alt text
• Examples of concise descriptive alt text
• Rules for linked and functional images
• Guidance for charts and infographics
• Instructions for text inside images
• Ownership of final accessibility review
• Testing requirements before publication

Maintaining Quality Across Large Websites

Large websites often contain thousands of images added by different teams. Without standards, one editor may describe decorative icons while another leaves alt fields blank. Audits should look for patterns, but teams must correct the underlying workflow rather than editing isolated pages forever.

Prioritize high-traffic templates, key conversion pages, support content, and pages used by customers to complete important tasks. Improving shared components can fix image behavior across many pages at once and create a more consistent experience.

Reviewing Older Content

Older articles may contain missing attributes, duplicated descriptions, or decorative images incorrectly labeled with filenames. During content updates, review image purpose rather than copying existing alt text automatically. The surrounding content may have changed since the image was first published.

A periodic audit can identify recurring problems and reveal training needs. If editors repeatedly misuse the same image field, the CMS interface or guidance may need improvement. Better systems often prevent more errors than reminders alone.

Final Accessibility Audit Checklist

Before publishing or updating a page, confirm:

• Every image has a deliberate accessibility treatment.
• Decorative images use an empty alt attribute.
• Informative images have concise, relevant descriptions.
• Functional images identify the action or destination.
• Charts and complex visuals have text alternatives.
• Text inside images is available in accessible text.
• Decorative visuals do not repeat nearby content.
• Automated results have been checked manually.
• The page makes sense when images are unavailable.

Conclusion

Good image accessibility begins with a simple question: does the image add information, or does it only support presentation? If it adds no meaning, it should remain silent for assistive technology. If it communicates facts, action, identity, or context, its alternative text should explain the part that matters to the user’s task.

The best results come from judging images within their page context. A decorative divider, abstract background, repeated icon, or ornamental photograph will often need an empty alt attribute, while a product photo, chart, screenshot, map, or warning symbol may need a thoughtful description. Avoid filenames, vague labels, unnecessary repetition, and keyword stuffing.

Learning how to write alt text for decorative images is not about adding more words. It is about making deliberate decisions that improve navigation and reduce distraction. When editors, designers, and developers use the same standards, websites become easier to use, easier to maintain, and more respectful of the people who rely on assistive technology.

FAQ

How do I mark a decorative image in HTML?

Use an empty alt attribute, written as alt=””. This tells assistive technology that the image does not add meaningful information and can be skipped while preserving the visual element for sighted visitors.

Should I write decorative image in alt text?

No. Writing “decorative image” announces an element that users do not need. An empty alt attribute is usually more helpful because it prevents unnecessary interruptions during screen reader navigation.

Are background images decorative by default?

Background images are often decorative when they add texture, color, or visual atmosphere. However, review them carefully if they contain readable text, important symbols, or visual information needed to understand the page.

Can decorative images help SEO?

Decorative images do not need keyword-focused alt text. SEO benefits more from accurate descriptions for meaningful images, relevant surrounding content, descriptive captions, optimized performance, and a clear page structure.

What if I am unsure whether an image is decorative?

Remove the image mentally and ask whether the page loses information, instructions, identity, or meaning. If it does, write relevant alt text. If nothing important changes, an empty alt attribute may be appropriate.