Mastering the Art of Decorative Alt Text for Web Accessibility

Why Images Decorative Alt Text Can Make or Break Your Accessibility Compliance

Images decorative alt text is one of the most misunderstood — and most audited — areas of WCAG compliance. Get it wrong, and screen reader users are bombarded with useless noise. Get it right, and your site becomes genuinely easier to use for everyone.

Here is the quick answer:

Situation	What to do
Image adds no useful information	Use alt="" (empty alt attribute)
Image content is already described in nearby text	Use alt="" to avoid repetition
Image is inside a link with descriptive text	Use alt="" so the link text does the work
Image conveys meaning not found elsewhere	Write descriptive alt text
Image is a decorative SVG	Use aria-hidden="true"
Image is a CSS background	No alt needed — it is already hidden from screen readers

The rule of thumb: when in doubt, provide more information rather than less. But for truly decorative images, silence is the most accessible choice.

This is not just a best-practice issue. Under WCAG Success Criterion 1.1.1, failing to handle decorative images correctly is a real compliance violation — and it shows up in accessibility audits constantly.

I’m Matthew Post, a web developer and accessibility specialist with nearly three decades of experience, and I’ve personally reviewed hundreds of sites where improper handling of images decorative alt text was quietly creating both ADA liability and a poor screen reader experience. In the sections below, I’ll walk you through exactly how to identify, code, and test decorative images so your site stays compliant and usable.

Defining Images: Decorative Alt Text vs. Informative Content

At WCAG Pros, we often see developers get paralyzed by a simple question: “Is this image important?” To answer that, we look to Guideline 1.1.1 Non-text Content, which requires that all non-text content has a text alternative. However, the guideline specifically allows for “null” alt text when an image is purely for visual styling or “eye candy.”

A decorative image is a visual element that doesn’t add additional context or information that allows the user to better understand the page’s content. Think of it as the wallpaper in a room—it makes the room look nice, but you don’t need to describe the floral pattern to understand what’s happening in the meeting taking place there.

To help our clients, we often refer them to the W3C Image Decision Tree, a fantastic tool for determining an image’s purpose.

Image Type	Purpose	Screen Reader Requirement
Decorative	Visual flair, ambiance, or redundancy.	Must be ignored (null alt).
Informative	Conveys a concept, emotion, or data.	Needs descriptive text.
Functional	Initiates an action (like a button or link).	Must describe the destination or action.

When to use images decorative alt text

There are three primary situations where we recommend using images decorative alt text (specifically, the null attribute):

1. Redundant Information: If the image is a Source of decorative image like a “Social Media” icon placed right next to a heading that says “Social Media,” describing the icon is redundant.
2. Adjacent Text: When the image is fully described by the text immediately surrounding it. For example, a photo of a sleeping dog next to a paragraph titled “Why Dogs Sleep So Much.”
3. Visual Ambiance: Abstract shapes, gradients, or stock photos used simply to break up text or add “vibe” to a landing page without contributing to the narrative.

Identifying functional vs. decorative icons

This is where it gets tricky. An icon can be decorative in one context and functional in another.

Take a “Home” icon (the little house). If that icon is inside a navigation link that also contains the word “Home,” the icon is decorative. The link text handles the accessibility. However, if the icon is the only thing inside the link, it is now a functional image. It must have alt text like alt="Home" so the user knows where the link goes.

Always check if the clickable area or the button labels already provide the necessary information. If they do, mark that icon as decorative to avoid cluttering the screen reader’s output.

Technical Implementation: How to Code Null Alt Text

When we perform Quick Fixes to Improve Your Website’s Accessibility Today, the most common HTML correction we make is adding the null alt attribute.

In HTML, the tag must have an alt attribute to be valid. For decorative images, we use an empty or “null” value: alt="".

When a screen reader encounters alt="", it understands that the image is intentionally hidden. It will skip over the element entirely. If you omit the attribute entirely, the screen reader may try to be “helpful” by reading the filename (e.g., “IMG9842final_v2.jpg”), which is a major source of screen reader fatigue.

Using ARIA for images decorative alt text

While alt="" is the gold standard for standard images, modern web design uses SVGs and complex components that require ARIA attributes.

• role="presentation": This tells assistive technology to strip away the “image” semantics of the element. It’s like telling the screen reader, “Treat this as if it’s just a plain div with no meaning.”
• aria-hidden="true": This removes the element and all its children from the accessibility tree entirely.

For inline SVGs—which don’t support the alt attribute—we recommend using aria-hidden="true". To dive deeper into the nuances, you can check out this guide on the difference between role=”presentation” and aria-hidden=”true”.

Common mistakes to avoid in HTML

Even with the best intentions, we see these three mistakes during our audits:

1. Missing Alt: As mentioned, this leads to the dreaded filename announcement.
2. Keyword Stuffing: Never put SEO keywords like “best plumber in Norco CA” into the alt text of a decorative divider. This is a violation of ACT Rules: Image not in the accessibility tree.
3. The “Image of” Prefix: Screen readers already announce “Graphic” or “Image.” Writing alt="Image of a decorative swirl" results in the user hearing “Graphic, Image of a decorative swirl.” Just use alt="" if it’s decorative, or describe the subject directly if it’s informative.

Real-World Examples of Decorative Images

Let’s look at some visuals you likely use every day. Stock photos that “catch the eye” at the top of a blog post are often purely decorative. Similarly, page borders or horizontal floral dividers are classic candidates for null alt text.

Another common example is the Source of the quick brown fox jumps over the lazy dog image. If this image is used to demonstrate a font style, and the text is already written in the caption, the image itself becomes decorative.

Handling Decorative SVGs and CSS Backgrounds

Vector graphics (SVGs) are popular because they are crisp at any size. If you use an SVG as a decorative icon next to a text label, SVGs are ignored by some screen readers by default, but others might try to read the