September 19, 2026 / UX and Accessibility
Alt text for decorative images: when empty alt is the right call
Alt text for decorative images: when empty alt is the right call
A purely decorative banner does not need a sentence of description. The cleanest accessibility decision is often to give it no alt text at all and let screen readers move on, because the image adds no information that the surrounding copy already provides. Most accessibility disputes in design reviews are not about complex diagrams or charts. They are about a simple question that keeps coming back: should this image have a description, and if so, what should it say.
The honest answer is that alt text for decorative images depends entirely on the role the image plays in the page, not on how pretty or large it is. A hero photo, a divider, an ornamental icon, and a texture used behind a heading can all be decorative, but only if the surrounding content already communicates the same message. When that is true, the most professional decision is the one that feels counterintuitive at first: write nothing, and mark the image so assistive technology skips it.
This article is written for working designers, front-end developers, content editors, and brand leads who are tired of conflicting checklists. It walks through how to decide whether an image is decorative, what to do when it is, and how to handle the edge cases that usually trip teams up. The goal is a clear rule a studio can apply on a Monday morning without rereading three different specification pages.
What counts as a decorative image
Before deciding on alt text, a team needs a shared definition of decorative. The word is used loosely in design briefs, and the looseness is where the problems start. A practical definition is the safest starting point.
A decorative image is one whose removal or failure to load would not change a reader’s understanding of the page. The image may make the layout more pleasant, reinforce a brand mood, or fill visual space, but the surrounding heading, paragraph, or surrounding page already says the same thing. If a reader who never sees the image would miss no fact, instruction, or decision point, the image is decorative for the purposes of the alt text decision.
Common examples include:
- A textured background used behind a section heading.
- An abstract gradient or shape that frames a testimonial.
- A stock lifestyle photo placed next to a paragraph that already names the topic.
- A small ornamental icon used to break up a long list.
- A repeating pattern used as a border on a landing page.
What is often mistakenly called decorative is actually informative. A photo of a product, a screenshot of a feature, an icon that labels a navigation item, or a portrait of a team member are all functional. They add meaning that the surrounding text does not already carry. Treating those as decorative because they look soft or on-brand is the most common accessibility mistake in marketing pages.
The two valid states: descriptive alt and empty alt
For any image on a public web page, the accessible name usually has to be one of two things. Either it carries a short description that replaces the image, or it is empty so the image is effectively removed from the accessibility tree. The middle ground, where a long caption-like description lives in the alt field, is the option that creates real problems.
When an image is meaningful, the alt attribute should give a screen reader user the same information a sighted reader gets in a sentence or two. When the image is decorative, the alt attribute should be empty, and the image should be marked so assistive technology treats it as presentation rather than content. That is the entire framework. The craft is in the decision, not in the writing.
Why empty alt is often the right answer
Empty alt sounds like a mistake to teams that have heard, “always add alt text.” The advice is a simplification. The full rule, drawn from the same web standards that recommend writing alt, is that decorative images should be implemented in a way that assistive technology can ignore them. The HTML mechanism for that is an empty alt attribute, which screen readers interpret as “this image is not part of the content.”
The benefit is not theoretical. A screen reader user listening to a long blog post does not want to hear “decorative divider, decorative divider, decorative divider” between every section, nor a marketing sentence about a stock photo of people smiling at a laptop. The empty alt respects their time and their attention. It also makes the page feel consistent: every spoken element carries information, and silence is reserved for things that actually need it.
For the design team, the empty alt is also the easiest to maintain. A photo gets reused across pages, a marketing refresh swaps a background image, and a banner changes seasonally. None of those changes require an editor to rewrite descriptions that no one was reading. The image is presentation, and the content team can treat it as such.
When empty alt is the wrong answer
Empty alt is not a way to avoid work. It is only correct when the image truly carries no information beyond the visual mood. Several common situations require a real description, even if the image looks decorative to a designer’s eye.
An image is not decorative when it functions as a link or button. A product card whose only content is a photo is essentially a link with a visual label. Screen reader users need to know what the link points to, and the image has to carry that information. The same applies to a social media icon that represents a link to a profile.
An image is not decorative when it conveys mood or tone that the surrounding text cannot. A memorial page, a campaign about loss, or a piece about climate grief can rely on an image to set an emotional register. The words around it may be about policy or history, but the image is doing work. Describing it briefly is appropriate.
An image is not decorative when it is the only place a piece of information appears. A logo on a partner page, a screenshot of a dashboard the article is about, or a chart of internal data all carry meaning that a non-sighted reader would otherwise miss. These need real alt text or, for complex visuals, a longer description elsewhere on the page.
How to decide in a design review
Decisions about decorative images tend to stall because they happen in the abstract. A short, repeatable routine is more useful than a long policy document. The following four-question check works well in a Figma comment thread or a Slack review and is easy for a junior designer to learn in a single sitting.
- Read the surrounding heading and paragraph out loud. If the image adds no information, it is a candidate for empty alt.
- Look at the image without reading the page for ten seconds. If you can summarize the page from the image alone, the image is doing more than decoration.
- Check whether the image is a link, button, or the only label for an interactive element. If yes, write alt that names the destination or action.
- Confirm the image is not the sole carrier of a fact, a name, a number, or a step in a process. If yes, describe the fact, not the image.
Teams that adopt this routine stop having long debates about the wording of decorative images. Most of the back-and-forth in reviews comes from uncertain intent, not from writing skill. Once intent is clear, the wording almost writes itself.
Empty alt in HTML and in design tools
Implementation is the part that often breaks. A designer marks an image as decorative in a Figma comment, but the export pipeline produces an image with descriptive alt baked in, and the wrong value reaches production. A few practical habits prevent this from happening.
For hand-coded HTML, an empty alt is the literal attribute alt="", not the absence of the attribute, and not a space. The absence of the attribute is treated by some assistive technology as a missing description, which produces a less helpful experience than the empty string. A space is read aloud as “space,” which is worse than nothing. The correct value is a pair of double quotes with nothing between them.
For WordPress and other content management systems, the alt field in the media library should be left empty for decorative images. Editors who see a warning that alt is required should treat that warning as a prompt to make a real decision, not as a directive to invent a description. If the field cannot be left empty in a given workflow, the better fix is to mark the image as presentation in the template rather than to write a filler description.
For React, Vue, and other component frameworks, decorative <img> elements still need alt="". A purely decorative inline SVG can instead be hidden from assistive technology when its accessible name is supplied elsewhere, while a CSS background is outside the document’s image semantics. The alt attribute overview explains the underlying HTML mechanism, and the W3C WAI tutorial gives concrete examples for decorative images and empty alt.
Comparing decorative and meaningful image treatments
The contrast between decorative and meaningful images is easier to see when placed side by side. The table below is meant as a working reference, not a finished product. Teams that need to share guidelines with content editors can adapt the rows to their own templates.
| Image role | Example on a page | Alt attribute | Why that treatment |
|---|---|---|---|
| Pure decoration | Background pattern behind a heading | Empty string | No information is lost if the image is removed |
| Section divider | Thin ornamental line between sections | Empty string | Layout element, not content |
| Stock lifestyle photo | Smiling team around a laptop beside a paragraph already about teamwork | Empty string | Paragraph carries the same meaning |
| Functional link image | Logo that links to a product page | “Acme product overview” | Image is the link label, must name the destination |
| Inline icon | Small check mark inside a list item already saying “included” | Empty string | Adjacent text already conveys the meaning |
| Informative photo | Photo of a specific office space mentioned in the article | “Made Visual Studio workspace in Lisbon” | Adds a fact not in surrounding copy |
Notice that two rows describe images a designer might call decorative, but the right treatment depends on whether the image carries meaning the surrounding text does not. The decision is not about how the image looks. It is about whether the page would still make sense without it.
Working reference: quick decision table
When a team is reviewing a page under time pressure, a second short table is often more useful than rereading the prose. The grid below pairs the visual cue a designer sees with the alt treatment that follows from it. Treat it as a starting point, and refine the rows as your studio’s templates evolve.
| Visual cue | What to ask | Recommended treatment |
|---|---|---|
| Repeating background pattern | Does the surrounding heading still make sense without the pattern? | Empty alt, set as CSS background or marked presentation |
| Stock photo beside a paragraph | Does the paragraph already cover the topic of the photo? | Empty alt, image is presentation |
| Icon next to visible label text | Does the label already explain the action or destination? | Empty alt, label carries the meaning |
| Icon-only button or link | Is the icon the only label for the control? | Descriptive alt that names the action |
| Headshot of a quoted person | Is the person named in the surrounding text? | Short alt with name and role, even if the quote is visible |
| Chart, graph, or data screenshot | Does the image carry numbers, trends, or comparisons? | One-sentence alt summary, plus a longer description in the body |
Both tables point in the same direction. The visual treatment of an image does not decide the alt treatment. The information the image carries, relative to the surrounding text, does.
Common patterns that look decorative but are not
Some image types are decorative often enough that teams start to assume they always are. The assumption usually breaks in production. The list below names a few of those patterns and the reason they often need real alt.
- Headshot of a quoted person. Even when the quote is in the surrounding paragraph, the image tells the reader who is being quoted, and screen reader users benefit from a name and a short context such as “Maria, lead designer at Made Visual Studio.”
- Photo of a product on a pricing page. The pricing card already names the product, but the image often shows a specific color, configuration, or scale that the card does not. A short description is usually warranted.
- Icon used to label a navigation item. A small home icon next to a “Home” label can be empty alt, but the same icon next to a bare link needs a description of the destination.
- Charts and graphs. Even a small bar chart carries data. A short summary in alt and a longer description in the surrounding paragraph is often the right balance.
- Maps and interactive visuals. These are never decorative. They always need at least a short summary and often a longer alternative.
The pattern in each case is that the image adds a fact, an identity, a destination, or a measurement that the surrounding text does not already supply. That is the moment to write alt, regardless of how soft or atmospheric the image looks.
Writing alt when the image is not decorative
Once a team has decided an image is meaningful, the next decision is how to describe it. The temptation is to describe what the image looks like. A more useful frame is to describe what the image is for. A short alt that names the function is almost always better than a longer one that catalogs colors and shapes.
For a portrait, the alt is usually the name of the person and their role, not a description of their clothing or expression. For a chart, the alt is usually the conclusion of the chart, not a list of axis labels. For a screenshot, the alt is usually what a reader would learn by looking at it, not a literal inventory of buttons. This functional approach respects the screen reader user’s time, because it gives them the same takeaway a sighted reader would form in a few seconds.
Length is also worth addressing because it is where most alt text goes wrong. A short sentence is usually enough. A paragraph is rarely appropriate in the alt attribute itself, because the alt is meant to replace the image, not to lecture about it. For complex visuals, a longer description belongs in the surrounding text or in a separate region the user can choose to read.
How decorative alt decisions fit into a design system
A design system that does not address decorative images tends to produce inconsistent output, because each designer makes a fresh decision. The cleanest systems put a small, opinionated default in place and let designers override it only with a reason.
One pattern that works in practice is to define a small set of image components: decorative image, informative image, functional link image, complex figure with long description. Each component has a default alt behavior, a default role value, and a default template for the surrounding markup. A designer who reaches for a new image type outside the set is asked to add the component to the system rather than improvise. The result is fewer surprises in audit and less rework when standards change.
For studios that ship a lot of marketing pages, the same approach can be pushed down into the CMS. A custom field that asks “is this image decorative?” with a binary answer, plus a second field for alt when the answer is no, removes most of the ambiguity that produces bad output. The fields are not glamorous, but they make the right decision the easy decision.
QA checklist before publishing
Most decorative image problems show up after a page is live, when a screen reader user or an accessibility auditor encounters them. A short QA pass before publish catches most of them. The checklist below is the minimum that should run on every template that contains imagery.
- Tab through the page with a screen reader. Confirm that decorative images produce no spoken output.
- Tab through the page with the images turned off. The page should still make sense.
- Verify that every image used inside a link or button has alt that names the destination or action.
- Confirm that no decorative image carries a description that duplicates the surrounding paragraph.
- Confirm that no informative image is shipped with an empty alt by mistake.
- Check the CMS media library for stray filler alt values like “image” or “photo” that suggest a missing decision.
The list looks longer than it is. A trained reviewer can run through it on a typical landing page in well under ten minutes, and the time is recovered many times over in fewer support questions and cleaner audits.
How to explain the decision to a client
Clients often hear “we left the alt text empty” and assume the team has been careless. The fix is a short, plain explanation that connects the technical decision to the user experience the client cares about. Two sentences are usually enough.
The first sentence is that the image does not add new information, and the empty alt tells assistive technology to skip it so screen reader users get a faster, cleaner experience. The second sentence is that if the image ever needs to carry meaning, a short description will be added. That framing keeps the client inside the decision without dragging them into specification language.
For clients who run their own content teams, the same explanation becomes a line item in a content guide. The guide is more useful than a one-off conversation because it survives staff turnover and project handoffs. Studios that write these guides as a matter of course spend less time re-explaining the same decision on every engagement.
Where Made Visual Studio applies this in practice
Inside a brand or web project, the same logic shows up in places beyond the obvious marketing page. A few examples from real engagements help make the rule less abstract, and they line up with the kind of work documented across our design writing. When we set up brand asset folders for a client, we ask the same question of every image: does the file name and folder already tell the story, or does the image need a description layered on top. The result is usually a small set of descriptive files and a larger set of decorative ones that ship as empty alt.
On a Figma library, component naming is the closest analogue to alt text, and the same decision logic applies. A spacer component does not need a long label, because its name already tells a developer what it is. A heading component does, because its content is meaningful. The same restraint that keeps a component library readable keeps an alt text strategy readable.
For visual identity systems, decorative alt shows up in the way we handle logo clear space diagrams. The diagram itself is informative, because it teaches a rule, and so it gets a real description. The ornamental rules that separate sections of the brand guidelines are decorative, because the surrounding text already labels each section. Holding to the same rule across the system keeps the brand work consistent with the web work.
How decorative alt interacts with SEO
There is a long-running belief that empty alt hurts search rankings, and the belief is not quite right. Search engines use alt text to understand images, and they use the surrounding copy to understand pages. When an image is decorative, the surrounding copy already describes the page, and the search engine does not need a redundant description on the image. Empty alt does not penalize a page. The mistake is to assume that the search engine needs every image to carry a description, and to write filler alt as a result.
What does matter for search is that the meaningful images on a page carry clear alt, and that the page copy is not stuffed with the same phrase over and over. A page with a hero image that has a thoughtful alt, two product photos that describe what they show, and a decorative pattern marked as presentation is in a stronger position than a page where every image repeats the brand name. The discipline of good alt is also a discipline of good on-page writing, and the two reinforce each other.
A short reminder to keep nearby
For teams that want a one-line rule to pin next to a style guide: decorative images get empty alt, informative images get a short description that names the function, and link images get alt that names the destination. The rule is short because the thinking behind it is simple once the intent is clear. Most of the time spent on alt text is spent deciding, not writing, and a team that gets the decision right does not have to revisit the wording.
The pages that benefit most from this discipline are the ones that ship frequently. A blog that publishes two posts a week, a brand site that refreshes a hero banner every month, or a product page that gets updated each release all run more smoothly when decorative images are treated as decoration. The team moves faster, the audits are quieter, and the experience for screen reader users is the same as the experience for everyone else, which is the only standard worth aiming for.
Frequently asked questions
Is empty alt really allowed by accessibility standards?
Yes. The web standards that recommend alt text also explicitly describe empty alt as the correct treatment for decorative images. Screen readers treat the empty string as an instruction to ignore the image, which is the desired behavior when the image adds no information. The rule is not “always write alt,” it is “always make a decision,” and the decision for a decorative image is to leave the attribute empty.
How do I tell the difference between a decorative image and an informative one?
Cover the image with your hand or turn it off in the browser, and read the page. If the meaning of the page is unchanged, the image is decorative. If a fact, a step, an identity, a destination, or a measurement disappears with the image, the image is informative and needs a real description. The test takes a few seconds and is more reliable than any written checklist.
Should I still write alt for background images set in CSS?
Background images set in CSS are not exposed to assistive technology as image elements, and they do not have an alt attribute in the markup. Their accessibility depends on whether the surrounding content already says the same thing. If the background carries meaning, move it into an <img> tag with alt. If it is purely decorative, leave it in CSS and make sure the content above it stands on its own.
What about icons inside buttons?
An icon that sits next to visible button text usually has empty alt, because the text already labels the button. An icon-only button needs alt that names the action, such as a search icon whose alt reads “search.” The pattern is the same as for any image: descriptive when the image is the label, empty when the label is already in the text.
Does empty alt hurt SEO for decorative images?
No. Search engines use alt to understand images, and they use the surrounding copy to understand pages. When an image is decorative, the page copy already carries the meaning, and an empty alt does not signal a problem. What does create problems is filler alt, where a description is written for an image that does not need one, because the filler tends to be generic and adds nothing to the page.
How should I handle decorative SVG icons?
Decorative SVG used inline should carry aria-hidden="true" so assistive technology ignores it, and the visible label should be on a sibling text element. Decorative SVG used as a background belongs in CSS, just like any other decorative image. Both approaches remove the need for an alt attribute on the SVG itself.
What is the right length for alt on an informative image?
For most images, a short sentence is the right length. The alt should give a screen reader user the same takeaway a sighted reader would form in a glance, not a literal description of every detail. For complex figures such as charts, the alt can be a one-sentence summary, with a longer description placed in the surrounding text for users who want more detail.
How do I handle a hero image that is mostly decorative but feels meaningful?
Treat the page as the unit of meaning, not the hero image alone. If the headline and the first paragraph already say what the hero is meant to say, the hero is decorative for that page and gets empty alt. If the hero is the only place a specific message appears, treat it as informative and write a short description. The feeling that an image is meaningful is a prompt to check, not a verdict.
Should decorative images be in the CMS media library at all?
Yes. Decorative images are part of the design system, and they belong in the library so they can be reused consistently. The difference is that their metadata should make the decorative intent visible. A media library entry marked as decorative, with an empty alt field, is much harder to misuse than a generic file with no guidance.
What is the fastest way to audit an existing site for decorative alt mistakes?
Run a crawler that reports every image along with its alt value, then sort by alt value to find the duplicates of common filler words like “image” or “photo.” Those are usually the spots where a designer wrote alt for a decorative image without thinking. From there, the fix is to empty the alt and mark the image as presentation, page by page, until the report is clean.