Image alt text: rules for SEO and accessibility, with examples
Alt text rules for each image type: content, decorative, linked, charts and screenshots, with a good and a bad example of each and the HTML to use.
LLaunchScaler·Published ·8 min read
Good image alt text says what the image means on that page in a short phrase or sentence, and the rule changes with the image's job: a content image gets a description of what it shows, a decorative image gets an empty alt="", a linked image describes where the link goes, and a chart states its takeaway. Keywords belong in alt text only where they describe the image; Google warns that stuffing them in may cause your site to be seen as spam.
Alt text serves two readers at once. Screen readers announce it to people who cannot see the image, and Google uses it, "along with computer vision algorithms and the contents of the page," to understand what an image shows. Written for the first reader, it almost always works for the second.
Why does image alt text matter for SEO and accessibility?
Google calls alt text "the most important attribute when it comes to providing more metadata for an image," and uses it as anchor text when the image is a link. For accessibility, WCAG 2.2 success criterion 1.1.1 (Level A) requires that all non-text content has "a text alternative that serves the equivalent purpose," with narrow exceptions such as pure decoration.
Most sites fall short. The HTTP Archive Web Almanac 2025 found that on the median page, 60% of images carry an alt attribute. At the median, about 15% of images have a blank alt and about 15% have none at all. The chapter's reading of the trend is a shift "from 'missing' to 'blank'": attributes are more often present but empty, which it says offers "limited value for screen readers and search engines" when the image is not decorative.
The two failures behave differently. A missing alt attribute is an error: screen readers fall back to announcing the file name or URL, and Google has nothing but the file name and surrounding text. An empty alt="" is a deliberate instruction to skip the image, correct for decoration and wrong for anything that carries information.
What are the alt text rules for each type of image?
The W3C's images tutorial sorts images by the job they do on the page, and each job has its own rule. Decide the job first, then write the text. The same photo can be informative on one page and decorative on another, which the W3C calls "a judgment that authors make, based on the reason for including the image on the page."
Questions, answered
What people ask about this
01
What is good alt text for an image?
Good alt text says what the image means on that page, in a short phrase or sentence. The W3C's images tutorial says the text alternative should convey the meaning or content shown, which typically isn't a literal description of the image.
alt="Invoice screen with the Send reminder button highlighted"
Decorative image
Empty alt so assistive tech skips it
alt="decorative blue wave background"
alt=""
Image already described by adjacent text
Empty alt, since it repeats the text
alt="Sleeping dog" next to the caption "A sleeping dog"
alt=""
Linked image or logo
Say where the link goes
alt="Acme logo" on a logo that links home
alt="Acme home"
Icon button
Say what the button does
alt="magnifying glass"
alt="Search"
Chart or graph
State the takeaway, then link or place the full data nearby
alt="chart"
alt="Bar chart: signups doubled from March to June 2026" plus a data table
Screenshot
State what the reader should notice
alt="screenshot"
alt="Search Console Pages report showing 214 pages not indexed"
Image of text
Repeat the text in the image
alt="banner"
alt="Spring sale: 30% off all plans until May 31"
Product photo
Name the product and the detail shown
alt="product"
alt="Acme card reader, front view, with the contactless symbol lit"
The sections below explain the rules that people most often get wrong.
When should an image have empty alt text?
When it is pure decoration, when it only adds visual style, or when the text beside it already says everything it shows. The W3C's tutorial says that in these cases "a null (empty) alt text should be provided (alt="") so that they can be ignored by assistive technologies, such as screen readers." That satisfies WCAG's decoration exception.
Write it as an empty attribute, not a missing one:
<!-- Decorative: skipped by screen readers -->
<img src="/img/wave.svg" alt="">
<!-- Missing: screen readers may read the file name instead -->
<img src="/img/wave.svg">
Common decorative images on a SaaS site: background shapes and gradients, dividers, stock photos used for mood beside a heading that already makes the point, and icons placed next to a text label that says the same thing. If an image is purely decorative, it can also move to CSS as a background, which keeps it out of the HTML entirely. Google notes it does not index CSS images, so only do this for images you do not want found in image search.
Two traps. Do not write "decorative image" or "spacer" as alt text, because that is announced aloud. And do not blank the alt on an image that carries information just to silence an accessibility warning; the Web Almanac's rise in blank alts suggests this is common.
What alt text should a linked image have?
Describe the destination or the action, not the picture. The W3C says a functional image's text alternative "should convey the action that will be initiated (the purpose of the image), rather than a description of the image." Its example is a logo that is the only content of a link to the homepage, with the alt text "W3C home".
This matters twice for a linked image. For a screen reader user, the alt text is the link's name; a link announced as "logo" or "arrow-right.png" tells them nothing. For Google, the alt text of a linked image works as anchor text, according to its image SEO guide, so it carries the same signal as the text of a normal link.
<!-- Logo linking home -->
<a href="/"><img src="/logo.svg" alt="Acme home"></a>
<!-- Icon inside a link that already has text: the icon adds nothing -->
<a href="/pricing"><img src="/icons/tag.svg" alt=""> Pricing</a>
<!-- Icon-only button -->
<button type="submit"><img src="/icons/search.svg" alt="Search"></button>
When an image and text sit inside the same link, give the image an empty alt, as the second example does. Otherwise the link is announced with its name twice.
How do you write alt text for charts and screenshots?
State the takeaway in the alt attribute, then put the full detail in text on the page. The W3C calls charts and diagrams complex images and says they need "a two-part text alternative": a short description that identifies the image, and a long description, such as a data table or a paragraph, placed nearby or linked.
For a chart, the short part names the chart and its conclusion, because that is what a sighted reader takes away at a glance. The W3C's own example short description is "Bar chart showing monthly and total visitors for the first quarter 2025 for sites 1 to 3", with the numbers in a long description beside it. It also suggests summarising the chart in the surrounding text, which helps every reader.
<figure>
<img src="/img/signups-2026.png"
alt="Line chart: weekly signups rose from 40 to 95 between March and June 2026">
<figcaption>Weekly signups, March to June 2026. Data in the table below.</figcaption>
</figure>
Screenshots follow the same idea. Nobody needs every menu item read out; they need the thing the screenshot is there to show. "Settings page with the Webhooks tab open and the Add endpoint button highlighted" is useful. "Screenshot of the dashboard" is not.
Should you put keywords in alt text?
Only when the keyword is the accurate description of the image. Google's guidance is to write "useful, information-rich content that uses keywords appropriately and is in context of the content of the page," and to avoid filling alt attributes with keywords, which "results in a negative user experience and may cause your site to be seen as spam."
Google's own examples show the scale from bad to best: a missing alt is bad, a long list of dog-related keywords is bad, alt="puppy" is better, and alt="Dalmatian puppy playing fetch" is best. The best version is specific, and specific text naturally contains the words someone would search for.
Other signals help Google read images too:
Use descriptive file names. Google says the file name gives "very light clues about the subject matter," and prefers my-new-black-kitten.jpg to IMG00023.JPG. Translate file names if you localise images.
Place images near the text they relate to. Google extracts information from captions, titles and the surrounding page.
Use real <img> elements (inside <picture> is fine) for images you want indexed; Google does not index CSS background images.
For inline SVG, give the <svg> a <title> element, which Google's guide gives as the SVG equivalent of alt.
Do alt text and image loading affect each other?
Only through the same <img> tag. Alt text does not change how fast an image loads, but it is written on the element whose other attributes do. While you add alt text across a template, add width and height too, so the browser reserves space and the image does not push content down when it loads; how to fix cumulative layout shift explains why.
The same pass is a good time to check the format and the hero image. Serving modern formats is covered in WebP vs AVIF, and if the largest image above the fold is slow, improving Largest Contentful Paint covers fetchpriority="high" and why the hero should never be lazy-loaded.
Find the images missing alt text
A crawler can count missing alt attributes; only a person can judge whether a present one is meaningful. Run the free scan on LaunchScaler with any page's URL, no account needed: its search and accessibility checks flag content images with no alt attribute and alt values that look like file names (such as "IMG_2043.jpg" or "hero-2"), which are the ones to rewrite first. Then go through the rest by image type, using the table above.
They should have an empty alt attribute, alt="", not a missing one. WCAG 2.2 success criterion 1.1.1 requires pure decoration to be implemented so assistive technology can ignore it, and an empty alt does that.
03
What alt text should a linked image or logo have?
Describe where the link goes or what the button does, not what the picture shows. The W3C's example is a logo that links to the homepage with the alt text 'W3C home'. Google also uses the alt text of a linked image as its anchor text.
04
Does alt text help SEO?
Yes. Google calls alt text the most important attribute for giving it metadata about an image, and uses it with computer vision and the page content to understand what the image shows. Google warns that stuffing alt attributes with keywords may cause a site to be seen as spam.
05
How many images on the web are missing alt text?
The HTTP Archive Web Almanac 2025 found the median page has an alt attribute on 60% of its images, with about 15% of images carrying a blank alt and about 15% missing the attribute entirely.
Split LCP into four sub-parts, compare each to its budget and fix the slow one: server time, a late or lazy hero image, a heavy file or blocked rendering.
Run the URL through LinkedIn's Post Inspector, then fix what it shows: missing og tags, an image under 1200 x 627 px, a blocked LinkedInBot or a redirect.
