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.
| Markup | How ARIA in HTML maps it | What a screen reader user gets | WCAG 1.1.1 status |
|---|---|---|---|
<img src="swirl.png"> (no alt) | Role img, no accessible name | Often the file name or URL, per W3C's tutorial | Failure F65 for any image |
<img src="swirl.png" alt=""> | Role none / presentation: the image drops out of the accessibility tree | Nothing; the image is skipped | Correct for decoration; failure if the image carried information |
<img src="chart.png" alt="Signups doubled between March and June"> | Role img with that name | The text, read in place of the image | Correct 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 type | Example | Markup | Why |
|---|---|---|---|
| Visual styling | Border graphic, corner flourish, spacer, divider ornament | alt="", or move it to CSS | WAI lists borders, spacers and corners as decorative; the HTML Standard says site-wide design images belong in CSS |
| Ambience photo | Greenhouse photo beside a paragraph about the greenhouse | alt="" | WAI's "eye-candy" example; the text already gives the information |
| Image fully described by adjacent text | Sleeping dog next to a paragraph explaining the proverb | alt="" | Repeating the description adds audible clutter |
| Image inside a link that also has text | Thumbnail 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 same | Gear icon beside "Settings" | alt="" | HTML Standard: supplemental icons must have an empty alt |
| Icon that is the only label | Telephone icon before a number, file-format icon in a link | alt="Telephone", alt="PDF" | The icon carries a fact not given in text |
| Icon-only button or link | Magnifying glass that submits search, printer that prints | alt="Search", alt="Print this page" | Functional images name the action, not the picture |
| Logo used alone as a home link | Header logo linking to / | alt="Acme home" | WAI's "W3C home" pattern; the alt states the destination |
| Logo standing for the organization, unlinked | Logo used as a page heading | alt="Acme" | HTML Standard: the entity's name, never the word "logo" |
| Logo beside the company name | Small mark before "Acme Ltd" in a sentence | alt="" | HTML Standard: the logo is supplemental there |
| Image of text | Stylized "Earth Day" heading graphic | alt="Earth Day" | The alt is the same text as the image; the decoration goes unmentioned |
| Simple diagram | Arrow showing a cap turns counter-clockwise | alt="Push the cap down and turn it counter-clockwise" | Fits in one sentence; WAI's informative example |
| Chart, graph, map, flowchart | Bar chart of quarterly visitors | Short alt naming the chart and where its description is, plus a long description on the page | WAI complex images: two-part alternative |
| Group conveying one value | Five star icons showing 3.5 stars | First 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 about | Photo in a gallery, screenshot in a review | Detailed alt that substitutes for the picture | HTML Standard "key part of the content" |
| CAPTCHA | Distorted-text challenge | Alt that states the purpose, plus another modality | WCAG 1.1.1 CAPTCHA clause |
| Tracking pixel | 1x1 page-view counter | alt="", width and height 0 | HTML 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.
- 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." - 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="". - The logo is decoration, such as a side image in an article that merely mentions the company. The decorative rule applies:
alt="". - 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:
| Method | Markup pattern | Keeps 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.
| Context | Before | After | Rule 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 icon | alt="magnifying glass icon" | alt="Search" | Functional image names the action |
| Header logo linking to the home page | alt="Acme logo" | alt="Acme home" | Linked logo states the destination; no word "logo" |
| Card thumbnail inside a link whose text is the article title | alt="Read more about color systems" | alt="" | Link text already names the destination |
| Line chart of signups, figures not in the text | alt="chart" | alt="Line chart of monthly signups, January to June 2026, described below the chart" plus a data table | Complex image: short alt plus long description |
| Product shot on a page selling that exact sofa | alt="" | 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 alt | alt="IMG_4471.jpg" | Decided by the photo's purpose | F30: file names are not alternatives |
| Photo of a puppy on a pet supply page | alt="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.
| Field | Values | Example |
|---|---|---|
| Purpose | decorative, informative, functional, text, complex, group | functional |
| Alt string | exact text, or "" | "Download the 2026 price list (PDF)" |
| Long description | location on the page, or "none" | "Data table below chart, heading 'Signups by month'" |
| Context note | what would change the answer | "Becomes decorative if the button gets a visible label" |
| Owner | who signs off the wording | content 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").
- 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. - Find file names. Search the alts for
.jpg,.png,IMG_andDSC. Each is an F30 failure. - 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. - 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. - 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.
- Check the complex images. Every chart and diagram needs a long description that matches it, including anything shown by color.
- Check CSS backgrounds and SVGs. Any background that carries information fails F3; any
aria-hiddenSVG 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
- W3C Web Accessibility Initiative, An alt Decision Tree, Images Tutorial, updated May 13, 2024; read October 31, 2026.
- W3C WAI, Decorative Images, updated July 27, 2019; read October 31, 2026.
- W3C WAI, Informative Images, updated June 17, 2019; read October 31, 2026.
- W3C WAI, Functional Images, updated April 12, 2017; read October 31, 2026.
- W3C WAI, Images of Text, updated April 12, 2017; read October 31, 2026.
- W3C WAI, Complex Images, updated April 8, 2026; read October 31, 2026.
- W3C WAI, Groups of Images, updated February 8, 2022; read October 31, 2026.
- W3C, Web Content Accessibility Guidelines (WCAG) 2.2, W3C Recommendation 12 December 2024, SC 1.1.1, 1.4.3, 1.4.5 and glossary entries for pure decoration, image of text and text alternative; read October 31, 2026.
- W3C, Understanding SC 1.1.1: Non-text Content, updated September 6, 2026, examples, failures F3, F13, F30, F38, F39, F65, F67 and test rules; read October 31, 2026.
- WHATWG, HTML Living Standard, section 4.8.4.4: Requirements for providing text to act as an alternative for images; read October 31, 2026.
- W3C, ARIA in HTML, W3C Recommendation 11 August 2026, img element role mappings; read October 31, 2026.
- W3C, Accessible Rich Internet Applications (WAI-ARIA) 1.2, W3C Recommendation 6 June 2023, aria-hidden state; read October 31, 2026.
- Google Search Central, Image SEO best practices, last updated March 2, 2026; read October 31, 2026.