LUCKY.GRAPHICS
guides

When Should an Image Have Empty Alt Text? A Decision Table

Decorative images get alt="", never a missing alt. A 17-row table of image types with exact markup, logo and chart rules, and before/after rewrites.

Lucky Graphics EditorialOctober 31, 202622 min

When Should an Image Have Empty Alt Text? A Decision Table

An image should have an empty alt attribute (alt="") when it adds nothing a reader would miss: borders and flourishes, mood photography, an icon beside a text label that says the same thing, or a picture the adjacent text already describes. The attribute stays in the markup. Anything that carries information, performs an action or shows words gets real alt text.

Leaving the attribute out is not the same as leaving it empty, and the difference is audible. W3C's Images Tutorial warns that when alt is missing, some screen readers announce the image's file name instead, so a decorative swirl can be read out as something like "DSC_0412.jpg". WCAG 2.2 lists that omission as failure F65 of Success Criterion 1.1.1, a Level A requirement. Writing alt="image" or alt="spacer" on a decorative file is a separate failure, F39. A team can fail the same criterion in both directions on one page.

Three ways to write the attribute, and what each one does

Every <img> lands in one of three states. They are not interchangeable, and screen readers treat each one differently.

MarkupHow ARIA in HTML maps itWhat a screen reader user getsWCAG 1.1.1 status
<img src="swirl.png"> (no alt)Role img, no accessible nameOften the file name or URL, per W3C's tutorialFailure F65 for any image
<img src="swirl.png" alt="">Role none / presentation: the image drops out of the accessibility treeNothing; the image is skippedCorrect for decoration; failure if the image carried information
<img src="chart.png" alt="Signups doubled between March and June">Role img with that nameThe text, read in place of the imageCorrect when the text serves the same purpose as the image

The middle row is what people mean by "no alt text." It is a deliberate signal, defined in ARIA in HTML (W3C Recommendation, 11 August 2026): an img with an empty alt and no other naming method takes the none or presentation role. WCAG's "Decoration, Formatting, Invisible" clause asks for exactly that outcome: non-text content that is "pure decoration" must be "implemented in a way that it can be ignored by assistive technology."

The first row is never correct on a public web page. The HTML Standard allows the attribute to be omitted only when no alternative text is available and none can be made available, such as a webcam feed or an image a user uploaded with no description, and even then only with a caption or a title present. It adds that "lack of effort from the part of the author is not an acceptable reason for omitting the alt attribute."

The phone-call test

The HTML Standard's general rule for alt text is a substitution test: replacing every image with the text of its alt attribute should not change the meaning of the page. It suggests imagining you are reading the page aloud to someone over the phone without mentioning that images exist. Whatever you would say in place of the picture is the start of its alt text. If you would say nothing, the alt is empty.

That test settles most arguments faster than any taxonomy, because it moves the question from the image to the page. A photo of a golden retriever on a pet food landing page, sitting beside the heading "Food for large breeds," adds no fact the heading lacks, and on the phone you would skip it. The same photo on a breed identification page, where the reader is learning what a golden retriever looks like, carries the point of the page, and on the phone you would describe it.

W3C's tutorial says the same thing in plainer terms: whether to treat an image as decorative or informative "is a judgment that only the author can make, based on the reason for including the image on the page." WCAG's Understanding document for 1.1.1 gives a clean example of context changing the answer. An image of the globe used as a link on a travel site gets the alt text "International Travel"; the identical file used as a link on a university site gets "International Campuses." Neither alt mentions a globe.

Because the answer depends on placement, the alt decision moves out of the asset library and into the handoff:

  • Alt text cannot be attached to the asset. A DAM field or a Figma component property called "alt" is a useful default, but the final string depends on where the image is placed. A single stock photo can need three different alts on three pages, and an empty one on a fourth.
  • The designer usually knows the purpose best. The person who placed the image knows whether it was there to show a product detail or to warm up a grid of text. That is why alt decisions belong in the design handoff rather than being left to whoever writes the HTML.

Decision table: image types and the markup each one gets

The rows draw on three primary documents: W3C's alt decision tree and its six companion tutorial pages, the HTML Standard's section 4.8.4.4 on alternative text, and WCAG 2.2 Success Criterion 1.1.1 with its listed failures. The markup column shows the exact attribute value pattern.

Image typeExampleMarkupWhy
Visual stylingBorder graphic, corner flourish, spacer, divider ornamentalt="", or move it to CSSWAI lists borders, spacers and corners as decorative; the HTML Standard says site-wide design images belong in CSS
Ambience photoGreenhouse photo beside a paragraph about the greenhousealt=""WAI's "eye-candy" example; the text already gives the information
Image fully described by adjacent textSleeping dog next to a paragraph explaining the proverbalt=""Repeating the description adds audible clutter
Image inside a link that also has textThumbnail plus the words "Crocus bulbs" in one <a>alt=""The link text names the destination; the image only enlarges the click area
Icon next to a text label that says the sameGear icon beside "Settings"alt=""HTML Standard: supplemental icons must have an empty alt
Icon that is the only labelTelephone icon before a number, file-format icon in a linkalt="Telephone", alt="PDF"The icon carries a fact not given in text
Icon-only button or linkMagnifying glass that submits search, printer that printsalt="Search", alt="Print this page"Functional images name the action, not the picture
Logo used alone as a home linkHeader logo linking to /alt="Acme home"WAI's "W3C home" pattern; the alt states the destination
Logo standing for the organization, unlinkedLogo used as a page headingalt="Acme"HTML Standard: the entity's name, never the word "logo"
Logo beside the company nameSmall mark before "Acme Ltd" in a sentencealt=""HTML Standard: the logo is supplemental there
Image of textStylized "Earth Day" heading graphicalt="Earth Day"The alt is the same text as the image; the decoration goes unmentioned
Simple diagramArrow showing a cap turns counter-clockwisealt="Push the cap down and turn it counter-clockwise"Fits in one sentence; WAI's informative example
Chart, graph, map, flowchartBar chart of quarterly visitorsShort alt naming the chart and where its description is, plus a long description on the pageWAI complex images: two-part alternative
Group conveying one valueFive star icons showing 3.5 starsFirst image alt="Rating: 3.5 out of 5 stars", the rest alt=""WAI groups tutorial and the HTML Standard's star example
Image the page is aboutPhoto in a gallery, screenshot in a reviewDetailed alt that substitutes for the pictureHTML Standard "key part of the content"
CAPTCHADistorted-text challengeAlt that states the purpose, plus another modalityWCAG 1.1.1 CAPTCHA clause
Tracking pixel1x1 page-view counteralt="", width and height 0HTML Standard "image not intended for the user"

Seven of the seventeen rows end in an empty alt, and the star group uses empty alts on four of its five images. Decoration is common. The rows that cause disputes are the ones in between: the icon that is sometimes alone and sometimes labelled, the logo that moves between header, footer and article body, and the photo that is decorative until somebody writes a caption under it.

Linked images are never decorative on their own

A link or button whose only content is an image cannot take an empty alt. The HTML Standard requires that, when an <a> or <button> has no text content, the alt attributes of its images "together convey the purpose of the link or button." W3C's functional images page explains why: with the alt missing or empty, screen readers typically fall back to announcing the file name, the image URL or the link's destination URL.

So the same 24 px gear icon gets two different answers depending on whether a visible word sits next to it inside the control. With "Settings" printed beside it in the same button, the icon is alt="". As a bare icon button, it is alt="Settings". The rule is about the control, not the drawing, which is also how icon sizing works: our touch target size guide measures the button's hit area rather than the glyph inside it.

The stock photo of smiling people

Marketing pages lean on photography that exists to set a tone. W3C's informative images page uses exactly this case: a stock photo of a happy family, placed to suggest a company is family-friendly, gets the alt text "We're family-friendly," because that is the impression it was chosen to convey. The tutorial adds that the people in a stock image should not be identified. If the same photo were there purely to break up the page, W3C points to the decorative "ambience" example instead, and the alt would be empty.

The practical difference: a description such as "Two adults and a child laughing on a sofa" is rarely right. It describes the picture without saying why it is there, and it is the pattern the HTML Standard calls bad alternative text, a description of the image instead of a replacement for it.

Logos: one file, four answers

The HTML Standard gives logos more attention than any other image type, and its four cases map directly onto places a logo appears on a typical site.

  1. The logo stands for the entity, for example as the page heading or in a partners grid where each logo is the only identification. The alt is the organization's name: alt="Acme". The specification says the alt "must not contain text like the word 'logo', as it is not the fact that it is a logo that is being conveyed, it's the entity itself."
  2. The logo sits next to the name. In the specification's example, a small logo appears directly before the company's name in a sentence. The name is already there in text, so the logo is supplemental and takes alt="".
  3. The logo is decoration, such as a side image in an article that merely mentions the company. The decorative rule applies: alt="".
  4. The logo is the subject. In a review of a rebrand, the logo is being discussed, so the alt describes it in enough detail to follow the argument.

A header logo that links home adds a fifth variant from W3C's functional images page: the alt names the destination, as in "W3C home." When the logo sits inside a link that also contains visible text such as "W3C Home," the image is a visual cue only and the alt is empty.

Logos also carry an exemption that is easy to misread. WCAG 2.2 Success Criterion 1.4.3 says text that is part of a logo or brand name has no contrast requirement, and 1.4.5 treats logotypes as essential images of text. Neither exemption touches 1.1.1. A low-contrast logo is allowed; a logo with no text alternative in a place where it identifies the company is not.

Charts, diagrams and maps

A complex image holds more than a short phrase can carry. W3C's complex images tutorial (updated April 8, 2026) names graphs and charts, flow and organization charts, diagrams the text depends on, and maps, and asks for a two-part alternative:

  • a short description in the alt that identifies the image and, where useful, says where the long description is;
  • a long description that gives the essential information: scales, values, relationships and trends.

W3C's example short alt reads "Bar chart showing monthly and total visitors for the first quarter 2025 for sites 1 to 3," with a variant that adds "described in detail below." The HTML Standard is blunter about the short part: in its financial report example it notes that "sales graph" would be inadequate alternative text for a sales graph, and the alt it gives lists the yearly percentage increases instead.

There are three ways to connect the parts, and they differ in what survives for screen reader users:

MethodMarkup patternKeeps headings and tables in the description?
Visible description in the page, wrapped with the image in <figure> and <figcaption><figure role="group"><img alt="... described in detail below"><figcaption>...</figcaption></figure>Yes
Text link next to the image<img alt="..."> <a href="#chart-data">Chart data as a table</a>Yes, on the target
aria-describedby pointing at a paragraph<img alt="..." aria-describedby="desc">No: W3C warns the referenced text is read as one continuous paragraph

The tutorial also recommends making the long description visible to everyone rather than hiding it, because complex images are hard for many readers, including people with low vision or learning disabilities. A visible data table under a chart is usually the strongest option. Our chart color accessibility checklist covers the visual side of the same chart, from series colors to pattern fills.

Two chart-specific failures in WCAG's list are worth knowing by number. F13 is a text alternative that leaves out information carried by color differences in the image, such as "red bars are losses." F67 is a long description that does not present the same information as the chart. A description that says "sales grew" under a chart showing one region shrinking would fail it.

When a chart takes an empty alt

The HTML Standard has a section that surprises people: a chart can take an empty alt. When the image is "a graphical representation of some of the surrounding text," for example a flowchart that repeats the preceding paragraph, removing it "doesn't make the page any less useful," and the alt must be empty. The same applies to a bar chart whose figures are all in the sentence above it. If a caption is wanted, the specification points to figure and figcaption or the title attribute, not to stuffing the caption into the alt. Once the image sits in a figure with a caption, though, it is treated as a phrase with a graphical alternative, and it needs alt text again.

Images of text

An image that exists to show words, a decorative heading or a slogan set in a display face, gets alt text that repeats the words. The HTML Standard's example is an "Earth Day" heading drawn with flowers and plants: the alt is "Earth Day," and the flowers are not mentioned. W3C's slogan example does the same with "Your access to the city."

The better fix is usually not to have the image. WCAG 2.2 Success Criterion 1.4.5 (Level AA) asks that real text be used instead of images of text whenever the technology can produce the same visual result, with exceptions for customizable presentations and essential ones such as logotypes. The HTML Standard says "an image should not be used if characters would serve an identical purpose," and suggests web fonts when a system font lacks a character. Most effects that once needed an exported PNG, including rotation, shadows and custom faces, are CSS now; W3C's tutorial rebuilds its slogan image with @font-face and a transform.

The decision tree has one more text case that leads to an empty alt: when the text in the image also appears as real text nearby, or is shown only for visual effect. WCAG's glossary also excludes text inside a photo with "significant other visual content," such as a name on a name tag, from its definition of an image of text. That text gets mentioned only if it matters to the point of the photo.

Before and after: alt strings from a design handoff

The rewrites below are illustrations written for this article, not quotes from a real audit. Each "before" is a pattern that the cited documents describe as wrong, and each "after" applies the matching rule from the decision table.

ContextBeforeAfterRule applied
Hero photo of a desk behind the headline "Plan your week in ten minutes"alt="Laptop and coffee cup on a wooden desk"alt=""Ambience photo; adds no information to the heading
Search button with only a magnifier iconalt="magnifying glass icon"alt="Search"Functional image names the action
Header logo linking to the home pagealt="Acme logo"alt="Acme home"Linked logo states the destination; no word "logo"
Card thumbnail inside a link whose text is the article titlealt="Read more about color systems"alt=""Link text already names the destination
Line chart of signups, figures not in the textalt="chart"alt="Line chart of monthly signups, January to June 2026, described below the chart" plus a data tableComplex image: short alt plus long description
Product shot on a page selling that exact sofaalt=""alt="Three-seat sofa in rust velvet with walnut legs"The image is a key part of the content
Blog image with an imported file name as altalt="IMG_4471.jpg"Decided by the photo's purposeF30: file names are not alternatives
Photo of a puppy on a pet supply pagealt="puppy dog puppies cheap dog food puppy"alt="Dalmatian puppy playing fetch"Google's keyword-stuffing example; describe, do not list

Two of these rows move from words to an empty alt, the opposite of what a team clearing audit warnings tends to do. Adding text to every empty alt would turn the hero photo and the card thumbnail into noise. And the sofa row starts with an empty alt that a checker would accept, even though the photo is the whole point of the page. No tool can tell decoration from information, which is why W3C keeps calling it the author's judgment.

How long alt text should be

None of the W3C or WHATWG documents in the reference list sets a character limit for alt text. The guidance is about purpose: W3C describes informative alt text as "a short phrase or sentence," and moves anything longer into a long description. The HTML Standard's screenshot example runs to five lines because the screenshot is the point of the page. A short alt is a consequence of a clear purpose, not a number to hit. If an alt keeps growing past a sentence or two, the image probably needs a visible description instead.

Two writing habits also fall out of the HTML Standard. Do not start with "Image of" or "Picture of," because the alt replaces the image rather than introducing it. And do not put the caption in the alt: the specification says the alt "should never contain text that could be considered the image's caption, title, or legend," and should not repeat the prose next to the image.

Decoration that is not an img element

Many decorative images never touch the alt attribute, and they need their own handling.

CSS backgrounds. W3C's decorative images page says decorative images should, where possible, be CSS background images, and the HTML Standard says a decorative image that forms part of a site-wide design scheme "should be specified in the site's CSS, not in the markup." Assistive technology ignores CSS backgrounds, which is the point. The trap runs the other way: WCAG failure F3 is conveying information only through a CSS background image. A background that shows a product, a map or words is an informative image in the wrong place. Google's image SEO documentation adds that it does not index CSS images, so a meaningful image moved to a background also leaves Google Images. Our responsive images guide covers the delivery side of that choice.

Inline SVG. An inline <svg> has no alt attribute. For a decorative icon, aria-hidden="true" on the <svg> hides it from assistive technology. For an informative graphic, Google's image documentation shows a <title> inside the SVG, referenced from the <svg> element by aria-labelledby. Charts drawn in SVG usually also take role="img", a pattern the chart checklist linked above walks through. WAI-ARIA 1.2 allows aria-hidden on visible content only when hiding it removes redundant or extraneous material, and requires that the same meaning and function remain available to assistive technology. A hidden icon that is the only label of a button breaks that rule, because the button is left with no name. Our SVG optimization guide treats keeping or stripping the <title> element as a deliberate step when minifying, for the same reason.

role="presentation" on an img. W3C's decorative images page shows it as an alternative to alt="" but notes that it "is not as widely supported as using a null alt attribute." The empty alt is the safer default, and ARIA in HTML maps it to the same role anyway.

Thematic breaks. W3C points out that an ornament marking a scene change in a story is better written as an <hr>, which tells assistive technology a break occurred, than as an image with an empty alt.

The title attribute and captions

Teams sometimes move descriptions into title to keep them out of the way. The HTML Standard allows title for supplemental information but says relying on it "is currently discouraged as many user agents do not expose the attribute in an accessible manner," for example by needing a mouse to show the tooltip, which excludes keyboard-only and touch-only users. W3C's technique H67 for decorative images is specifically "null alt text and no title attribute," because a title on a decorative image hands screen readers something to announce.

Captions interact with empty alts in one way that is often missed. Under the HTML Standard's "ancillary images" rule, an image that is relevant but not essential, such as a politician's photo in a news story, may take either an empty alt or a short one, but if the image has a caption giving the image's title, the alt must not be empty. A caption that refers to an image the screen reader skipped leaves the listener wondering what the caption is about. The specification's example adds a twist: if the photo shows the politician visibly angry or happy, a short alt describing that expression changes how the surrounding paragraph reads, and is worth including.

Search engines and alt text

Google's image SEO documentation (last updated March 2, 2026) calls alt text "the most important attribute when it comes to providing more metadata for an image," says Google uses it alongside computer vision and the page content to understand an image, and notes that alt text acts as anchor text when an image is a link. It also warns that filling alt attributes with keywords "results in a negative user experience and may cause your site to be seen as spam."

That guidance does not ask for alt text on decorative images, and nothing in it overrides the accessibility rules above. The documentation itself points readers to the W3C guidelines for the accessibility side. Where the two goals meet is the informative image: an accurate, specific alt such as Google's own "Dalmatian puppy playing fetch" serves both. Writing descriptive alts on ornaments in the hope of extra image traffic adds noise for screen reader users and no information for anyone.

A handoff annotation that settles the question early

The decision is cheapest in the design file, where the person who chose each image can record why. No standard sets a format for this, so the one below is ours; it works as a layer of sticky notes, a column in a content spreadsheet, or a property on each image frame.

FieldValuesExample
Purposedecorative, informative, functional, text, complex, groupfunctional
Alt stringexact text, or """Download the 2026 price list (PDF)"
Long descriptionlocation on the page, or "none""Data table below chart, heading 'Signups by month'"
Context notewhat would change the answer"Becomes decorative if the button gets a visible label"
Ownerwho signs off the wordingcontent designer

Recording "decorative" is as important as writing an alt, because a blank field is ambiguous: it can mean "empty alt on purpose" or "nobody decided." A blank field invites a placeholder such as the file name or the component name, and a placeholder in the alt is failure F30. Keeping "decorative" and "not yet written" as separate values removes the ambiguity.

For HTML email, the same annotation applies. The HTML Standard's reason for alt text in email is that the recipient's mail client may not show images, or the message may be forwarded to someone who cannot see them, and in either case the alt is what stands in for a linked logo or a banner. Our email signature logo guide covers the file side. The HTML Standard does allow omitting alt in private email sent to a person known to be able to see images, but it excludes anything on a public website or a mailing list, which covers almost every marketing email.

Seven checks on a page that is already live

We built these seven checks on the test rules W3C lists for 1.1.1 ("Image filename is accessible name for image," "Image has non-empty accessible name," "Link has non-empty accessible name").

  1. Find missing attributes. In the browser console, document.querySelectorAll('img:not([alt])') lists every image with no alt. Each one is an F65 failure unless the HTML Standard's narrow unknown-content case applies.
  2. Find file names. Search the alts for .jpg, .png, IMG_ and DSC. Each is an F30 failure.
  3. Find empty links. For every link or button, check that it has text or that at least one image inside it has a non-empty alt. An icon-only button with alt="" has no name at all.
  4. Read the empties. For each alt="", apply the phone-call test. Would you skip it when reading the page aloud? If not, it needs words.
  5. Read the non-empties out loud. Alts containing "logo," "icon," "image of" or a caption's wording almost always need trimming. Alts on ornaments need deleting.
  6. Check the complex images. Every chart and diagram needs a long description that matches it, including anything shown by color.
  7. Check CSS backgrounds and SVGs. Any background that carries information fails F3; any aria-hidden SVG that is a control's only label leaves the control unnamed.

Steps 1 to 3 can be automated. Steps 4 to 7 cannot, for the reason W3C keeps repeating: purpose is the author's call. The broader WCAG 2.2 compliance guide places 1.1.1 among the other Level A criteria, and the accessible color systems guide handles the contrast rules that apply to the same icons and charts. If the page you are auditing is icon-heavy, read the icon design principles next, since an icon set that pairs every glyph with a visible label turns most of those alt decisions into empty strings.

Questions about empty and descriptive alt text

Is alt="" the same as having no alt attribute?

No. alt="" tells browsers and assistive technology the image is decorative, so it is removed from the accessibility tree. A missing alt leaves the image exposed with no name, and some screen readers then announce the file name. WCAG 2.2 treats the missing attribute as failure F65.

Should decorative images have a space in the alt, like alt=" "?

The documents cited here all use a truly empty value, alt="", which ARIA in HTML maps to the none or presentation role. A space is not an empty string, so it does not match that definition. Write the attribute with nothing between the quotes.

Do icons next to text need alt text?

Not when the text says the same thing. The HTML Standard requires an empty alt for icons that supplement a text label, such as a gear beside "Settings." An icon that is the only label, such as a phone icon before a number, needs alt text naming what it stands for.

Does every image need alt text for SEO?

Google calls alt text the most important image metadata and uses it to understand informative images. It does not ask for alt text on decorative images, and it warns that keyword-stuffed alts can look like spam. Write alts for images that carry information, and leave ornaments empty.

Should the alt text say "image of" or "logo"?

No. The alt replaces the image rather than introducing it, and an img with a non-empty alt is already exposed with the image role, so the word adds nothing. The HTML Standard specifically says a logo's alt must not contain the word "logo"; it should name the organization or, for a linked logo, the destination.

Can a chart ever have an empty alt?

Yes, when every figure in the chart is already in the surrounding text. The HTML Standard treats a chart that repeats the previous paragraph as a graphical representation of that text, which takes an empty alt. A chart whose data appears nowhere else needs a short alt plus a long description.

References, checked October 31, 2026