Image Alt Text: Context, Accessibility and SEO Value

Images communicate information, emotion, products, evidence and orientation. For users who can see an image, the meaning is often immediately clear. For screen readers, search engines, crawlers and artificial intelligence (AI) systems, an image without a text alternative is much harder to understand.

This is exactly where the RankScan insight “Missing alt textAlt text is a text alternative for an image, stored in the alt attribute of the img element, describing the content or function of the image.Open glossary entry →” comes in.

The insight means that RankScan has found images where the alt attribute is missing, empty or not meaningfully maintained. This is a Website Health issue with Medium priority because missing alt text rarely causes a ranking problem on its own, but it can weaken accessibility, image search, content understanding and overall technical quality.

The right framing matters:

Alt text is primarily a text alternative for people. SEOSearch Engine Optimization (SEO) covers all measures that help a website become more visible in unpaid (organic) search results.Open glossary entry → is an additional benefit, not the main purpose.

In this article, you will learn when an image needs alt text, when alt="" is correct, how to write good alternative text and how to systematically fix missing alt text with RankScan.

What Is Alt Text? #

Alt text is a text alternative for an image. In HTMLHyperText Markup Language (HTML) is the markup language for web pages. It defines the structure and content of a page, such as headings, paragraphs, links and images.Open glossary entry → (Hypertext Markup Language, the markup language for web pages), it is stored in the alt attribute of the <img> tag.

Example:

<img
  src="meindl-bhutan-hiking-boot.jpg"
  alt="Brown Meindl Bhutan leather hiking boot on rocky ground"
  width="800"
  height="600"
>

Alt text is used when:

• a screen reader reads out the image content,
• the image cannot be loaded,
• search engines classify the image content,
• crawlers extract context from HTML,
• images need to be understood for image search.

The W3C Web Accessibility Initiative (WAI) explains that alt text must be chosen differently depending on image type and context. What matters is not only what can be seen in the image, but what function the image has on the specific page.
Source: W3C WAI – Images Tutorial

What Does “Missing Alt Text” Mean? #

The RankScan insight “Missing alt text” means that a page contains images whose alt attribute is missing or not meaningfully maintained.

Typical cases:

• alt is missing completely,
• alt="" is used for informative images,
• the file name is used as alt text,
• keyword stuffing,
• generic text such as “image” or “graphic”,
• identical alt text for many different images,
• product images without product description,
• infographics without explanatory context,
• icons with unclear function,
• logos without functional alt text.

Important: empty alt text is not automatically wrong. For decorative images, alt="" is correct and even recommended.

Alt Text Is Not the Same as an Alt Tag #

In everyday language, many people talk about image alt tags or an alt tag. Technically, the correct term is:

alt attribute

An <img> element is an HTML tag. alt is an attribute of that tag.

Correct:

<img src="image.jpg" alt="Description of the image">

Imprecise, but common:

Alt tag

For search behavior and content, the term “alt tag” is still relevant because many users search for it. However, the article should explain the correct technical term.

Why Alt Text Matters for Accessibility #

The most important purpose of alt text is accessibility.

People who use screen readers cannot visually perceive images. Alt text provides the relevant information or function of the image.

The Web Content Accessibility Guidelines (WCAG), the guidelines for accessible web content, require in Success Criterion 1.1.1 (version 2.2) that non-text content has a text alternative so information can be perceived in another form.
Source: W3C – WCAG 2.2 Non-text Content

W3C describes the goal of short text alternatives as follows: the text alternative should serve the same purpose and present the same information as the non-text content.
Source: W3C – Technique G94

That means:

Good alt text does not always describe every visible detail. It communicates the relevant information or function of the image in its specific context.

Why Alt Text Helps SEO #

Google recommends using descriptive file names, alt text and surrounding context for images. Alt text helps Google understand the content of an image and can be especially relevant for Google Images.
Source: Google Search Central – Image SEO best practices

Alt text can support SEO because it:

• describes image content,
• gives Google Images more context,
• complements the topical context of the page,
• provides relevant details for product images,
• improves the interpretation of infographics,
• strengthens accessibility and user experience.

Realistically, however:

Alt text is not a ranking hack. Good alt text makes an image easier to understand. It does not replace a good page, relevant images or helpful contentHelpful content refers to content created primarily for people that delivers a clear answer and shows substance, originality and trust, rather than being optimized mainly for search engines.Open glossary entry →.

Alt Text and AI Visibility #

AI systems and search systems work heavily with text. If important image information is only available visually, it may be harder to process depending on the crawlerCrawling is the process by which a search engine bot fetches a URL and downloads its content. It is the first step before a page can be indexed.Open glossary entry →, renderingJavaScript rendering is the process by which a browser or crawler executes JavaScript code to build the final, visible page. Content that is not already in the delivered HTML only appears after this step.Open glossary entry → setup and system.

Alt text can help make visual content available in text form. This is especially relevant for:

• product images,
• explanatory screenshots,
• charts,
• infographics,
• process graphics,
• UI images,
• person or author images with editorial relevance.

Still, the rule is:

Alt text does not guarantee an AI mention or citation. It only improves the machine-readable description of visual content.

Google describes AI OverviewsAI Overviews are AI-generated answer boxes from Google that appear above the classic search results. They summarize information from the web and can change click distribution.Open glossary entry → and AI Mode as search features in which content from the web can appear. Website operators should provide helpful, reliable content and ensure technical accessibility.
Source: Google Search Central – AI features and your website

For RankScan, alt text is therefore one component of AI readinessThe AI Readiness Score is a maturity level that shows how well a website is prepared for AI search technically, structurally, in terms of content and trust. It is a scoring model, not an official industry standard.Open glossary entry →, but not an isolated lever of Generative Engine Optimization (GEOGenerative Engine Optimization (GEO) covers measures that improve the chances of a brand or website being found, understood, extracted, classified and used as a source by generative AI answer systems. GEO extends classic SEO rather than replacing it.Open glossary entry →).

The Most Important Question: What Job Does the Image Do? #

Before you write alt text, ask:

What job does this image do on this page?

The answer changes the alt text.

W3C WAI provides an alt decision tree that helps determine whether an image is informative, decorative, functional or complex.
Source: W3C WAI – Alt Decision Tree

Writing Good Alt Text: The Basic Rules #

1. Describe the Purpose, Not Every Detail #

Alt text does not need to describe everything visible. It should communicate the relevant information.

Example in an online shop:

alt="Red Hilleberg two-person tunnel tent pitched on a meadow"

Not necessary:

alt="Red tent on a green meadow with three trees in the background, cloudy sky, a stone at the bottom left and a crease in the fabric"

2. Write Briefly, Specifically and Naturally #

Good alt text is usually a short sentence or phrase.

W3C WAI recommends keeping alt text as short as possible. If more than a short sentence is required, a longer description should also be provided in visible text or through another method.
Source: W3C WAI – Images Tutorial: Tips and Tricks

Practical rule of thumb:

as short as possible, as long as necessary

The often-cited 125-character rule is a useful guideline, but not an official limit. What matters is clarity.

3. Do Not Start with “Image of” #

Weak:

alt="Image of a dog on a meadow"

Better:

alt="Golden retriever running across a meadow"

Why? Screen readers often already announce images as graphics or images. “Image of” is therefore usually redundant.

Exception: when the type of image is meaningful.

Example:

alt="Satellite image of glacier retreat in Valais"

Here, “satellite image” is relevant.

4. Use Keywords Only When They Really Fit #

Alt text may contain keywords if they naturally describe the image.

Good:

alt="Meta description field in the WordPress SEO plugin"

Bad:

alt="meta description seo meta description length meta description google snippet"

Keyword stuffing harms user experience and looks spammy.

5. Describe Functional Images by Function #

If an image acts as a link or button, the function matters.

Logo as a link to the homepage:

<a href="/">
  <img src="logo.svg" alt="RankScan homepage">
</a>

Search icon as a button:

<button type="submit">
  <img src="search.svg" alt="Search">
</button>

Not:

alt="Magnifying glass"

if the function is “Search”.

6. Mark Decorative Images with an Empty Alt Attribute #

Decorative images do not provide relevant information.

Examples:

• background patterns,
• decorative graphics,
• divider lines,
• purely decorative illustrations,
• icons next to already visible text,
• abstract shapes without meaning.

Correct:

<img src="line.svg" alt="">

Not:

<img src="line.svg">

The alt attribute should exist, but be empty. This allows screen readers to skip the image.

Good and Bad Alt Text: Examples #

Alt Text for Different Image Types #

Product Images #

Product images should name the product and relevant visible features.

Good:

alt="Black waterproof Ortlieb bike bag attached to a rear rack"

Not necessary:

alt="Product image"

For multiple product images, the alt text should not be identical.

Example:

alt="Black Ortlieb bike bag from the front"
alt="Black Ortlieb bike bag mounted on a rear rack"
alt="Inner compartment of the black Ortlieb bike bag"

Blog and Guide Images #

For guide images, context matters.

Article about 404 errors:

alt="Broken connection between website and search result"

Article about JavaScript SEO:

alt="Source code with empty app container before JavaScript rendering"

Avoid generic text such as:

alt="SEO image"

Screenshots #

Screenshots should describe what is relevant to the point being made.

Good:

alt="PageSpeed Insights shows poor LCP score for mobile users"

For complex screenshots, the relevant value should also appear in the body text.

Infographics and Charts #

Complex graphics need two layers:

1. short alt text,
2. detailed description in visible text.

Example:

<figure>
  <img src="traffic-channels.png" alt="Bar chart showing organic traffic as the strongest channel">
  <figcaption>Organic traffic accounts for 48% of sessions, followed by Direct with 31% and Paid Search with 14%.</figcaption>
</figure>

Even better for data: add an HTML table directly below the graphic.

Important:

Important data should not exist only inside an image.

Images with Text #

Text inside images is problematic if it is not also available as real HTML text.

If an image contains visible text, that text should either:

• be included in the alt text,
• appear in the surrounding body text,
• be implemented as HTML text instead of inside the image.

Example for a quote image:

alt="Quote: Good alt text describes the purpose of an image, not every pixel."

Often, the better solution is to output the quote as real text on the page.

Icons #

Icons are often decorative or functional.

Icon next to text:

<img src="check.svg" alt="">
<span>Free delivery</span>

Icon without text, as a button:

<button aria-label="Open shopping cart">
  <img src="cart.svg" alt="">
</button>

Or:

<button>
  <img src="cart.svg" alt="Open shopping cart">
</button>

What matters is that the function is understandable for screen readers.

Logos #

A logo can have different jobs.

Logo as identity in the footer:

<img src="logo.svg" alt="RankScan">

Logo as a link to the homepage:

<a href="/">
  <img src="logo.svg" alt="RankScan homepage">
</a>

Logo purely decorative next to the visible brand name:

<img src="logo-symbol.svg" alt="">
<span>RankScan</span>

Alt Text vs. Title Attribute vs. Caption #

These three elements are often confused.

Alt Attribute #

<img src="chart.png" alt="Bar chart shows increasing organic clicks">

Title Attribute #

<img src="chart.png" alt="Bar chart shows increasing organic clicks" title="Click development 2026">

The title attribute should not be used as a replacement for alt text. It is often unreliable for accessibility and mobile use.

Caption #

<figure>
  <img src="chart.png" alt="Bar chart shows increasing organic clicks">
  <figcaption>Organic clicks increase over 12 weeks after the content refresh.</figcaption>
</figure>

figcaption is visible and therefore especially valuable for context.

Alt Text and File Names #

The file name is not the same as alt text, but it can provide additional help.

Weak:

IMG_9921.jpg

Better:

brown-meindl-leather-hiking-boot.jpg

Google also recommends descriptive file names for images.
Source: Google Search Central – Image SEO best practices

Still:

A good file name does not replace alt text.

Prioritization: Which Images Matter Most? #

Not every missing alt attribute has the same priority.

The most important rule:

Fix images first when they carry information, function or conversion relevance.

What to Do After a RankScan Finding #

When RankScan reports “Missing alt text”, proceed systematically.

Step 1: Export Images #

Collect the following for each image:

• page URL,
• image URL,
• current alt text,
• image type,
• page type,
• image position,
• page traffic,
• image search potential,
• decorative or informative,
• functional or not.

Step 2: Determine Image Type #

Decide for each image:

informative?
functional?
decorative?
complex?
text in image?
logo?
icon?
product image?

Without this decision, incorrect alt text is created very quickly.

Step 3: Correctly Empty Decorative Images #

For decorative images:

alt=""

Not:

alt="decorative image"

and not:

<img src="decoration.svg">

Step 4: Describe Informative Images #

For relevant images, write descriptions that are:

• short,
• specific,
• factual,
• aligned with the page context,
• free of keyword stuffing,
• free of unnecessary “image of”,
• focused on important visible details.

Step 5: Check Functional Images #

For image links and icon buttons:

• does the alt text describe the function?
• is there visible text next to it?
• is there an aria-label?
• can it be operated by keyboard?
• is the image perhaps decorative because the function is already described elsewhere?

Step 6: Add Context for Complex Graphics #

For charts and infographics:

• short alt text,
• visible summary,
• data in body text or a table,
• sources,
• no important numbers only inside the image.

Step 7: Adapt the Publishing Process #

Alt text should not only appear after an audit.

Add it to the workflow:

• upload image,
• check descriptive file name,
• write alt text,
• check caption,
• mark decorative images,
• add infographic data in text,
• review before publication.

WordPress, Shopify and CMS Practice #

WordPress #

In WordPress, you can maintain alt text in the media library or directly in the Gutenberg editor.

Important:

• Alt text in the media library is not always applied retroactively to images that have already been inserted.
• Check existing pages after the update.
• Avoid automatic alt text generated from file names.
• For decorative images, an empty alt attribute may be required depending on the theme or block.

Shopify #

In Shopify, product images can be given alt text directly.

Important:

• name the product and relevant features,
• distinguish variant images,
• avoid keyword lists,
• check alt text in bulk processes,
• consider translations for multilingual shops.

Headless CMS and Custom Systems #

In headless setups, the image model should include an alt text field.

Check:

• is alt text required or optional?
• can one image have different alt text depending on context?
• are decorative images supported?
• is alt="" rendered correctly?
• are there fallbacks?
• is alt text maintained in all languages?

Important: one image may need different alt text depending on context. A global media-library alt text is not always enough.

What a Good Alt Text Check Looks At #

A good alt text check should do more than simply detect “alt is missing”.

A good check reviews:

• images without an alt attribute,
• images with empty alt,
• whether empty alt is plausible for decorative images,
• file names used as alt text,
• generic alt text,
• very long alt text,
• keyword stuffing,
• identical alt text for different images,
• product images without product context,
• icons without accessible function,
• image links without meaningful text,
• infographics without surrounding explanation,
• images with embedded text,
• page type and image position,
• traffic and image search potential,
• multilingual setup,
• CMSA content management system (CMS) is software for creating, managing and publishing web content, usually without programming knowledge. Well-known examples are WordPress or Shopify.Open glossary entry → template problems.

This turns “Missing alt text” into a prioritizable Website Health task.

Example: Product Images Without Alt Text in a Shop #

Starting Point #

A Swiss outdoor shop has high-quality product photos. However, the images are maintained in the CMS only with file names.

RankScan reports:

“Missing alt text”

Analysis #

• Product images have missing alt text.
• Some alt texts consist of IMG_4421.jpg.
• Variant images cannot be distinguished.
• Decorative icons sometimes contain unnecessary text.
• Image search brings almost no clicks.
• Screen reader users receive little product information.

Solution #

1. Prioritize bestseller products.
2. Describe product images by product name, color, model and view.
3. Differentiate variant images.
4. Set decorative icons to alt="".
5. Use descriptive file names for new images.
6. Anchor product data and image descriptions in the CMS process.
7. Crawl again with RankScan.
8. Monitor image search in Google Search Console over several weeks.

Result #

The product pages become more accessible, images are better described and Google receives more context for image search. More traffic is possible, but not guaranteed. It also depends on image quality, demand, competition and indexingIndexing is the step in which a search engine processes crawled content and decides whether a URL is added to the search index. Only indexed pages can appear in search results.Open glossary entry →.

Common Alt Text Mistakes #

Mistake 1: The Alt Attribute Is Missing Completely #

For informative images, this is a clear problem.

Mistake 2: Decorative Images Are Described #

Screen readers then read out irrelevant design elements.

Mistake 3: Keyword Stuffing #

Alt text is not a keyword storage field.

Mistake 4: File Name as Alt Text #

IMG_1234.jpg helps no one.

Mistake 5: Every Image Variant Has the Same Description #

Variant images in a shop need distinguishable descriptions.

Mistake 6: Functional Images Are Described by Appearance #

For icon buttons, the action matters, not the icon.

Mistake 7: Important Data Appears Only in the Image #

Charts and infographics need a visible text or table description.

Mistake 8: Alt Text Is Automatically Generated and Never Reviewed #

AI or CMS fallbacks can help, but alt text should be reviewed editorially.

Checklist: Writing Good Alt Text #

Use this checklist:

• Does every <img> have an alt attribute?
• Is the image informative, functional, decorative or complex?
• Does every informative image have a specific description?
• Do decorative images have alt=""?
• Do functional images describe the action or destination?
• Are product images distinguishable by model, color, view or feature?
• Does the alt text avoid keyword stuffing?
• Does the alt text avoid unnecessary “image of” wording?
• Are complex graphics explained in text or in a table?
• Is text inside images also available as real text?
• Are there no file names used as alt text?
• Is alt text maintained in all language versions?
• Has the CMS workflow been adapted?
• Was the site crawled again after the fix?

In addition, semantic HTML, thin content and high-quality content, schema markup and E-E-A-T help narrow down the root cause and prioritize the next SEO actions.

Conclusion: Alt Text Makes Images Understandable #

Alt text is a small HTML attribute with a major effect. It makes visual content easier to understand for screen readers, search engines, crawlers and users with loading problems.

The RankScan insight “Missing alt text” shows where these text alternatives are missing or not meaningfully maintained.

The best approach is:

1. prioritize images by page type and relevance,
2. determine the image type,
3. describe informative images specifically,
4. name functional images by destination or action,
5. mark decorative images with alt="",
6. explain complex graphics in visible text,
7. avoid keyword stuffing,
8. anchor alt text in the CMS workflow,
9. crawl again after the fix.

This creates real value: better accessibility, better image context, better technical quality and stronger foundations for image SEOImage SEO covers all measures that make images more understandable for search engines, image search and machine systems. This includes alt text, descriptive file names and suitable context.Open glossary entry → and machine-readable content.

Sources and Further Reading #

• Google Search Central – Image SEO best practices
• Google Search Central – AI features and your website
• W3C WAI – Images Tutorial
• W3C WAI – Alt Decision Tree
• W3C WAI – Images Tutorial: Tips and Tricks
• W3C – WCAG 2.2 Non-text Content
• W3C – Technique G94: Providing short text alternative for non-text content