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 measure “Images without 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 RankScan measure “Images without alt text” means: the crawlCrawling 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 → found images on the affected pages whose <img> element has no alt attribute at all. RankScan does not report an empty alt="". It marks an image as decorative. alt="" is correct for images that are actually decorative; RankScan does not check this content decision.

Rating in RankScan: medium severity · low effort, medium from 20 affected pages, high from 200 · work type Editorial.

Missing alt text rarely causes a ranking problem on its own. It does weaken accessibility, image search and how well machines understand the images.

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 work through the measure, even on large websites.

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 “Images Without Alt Text” Mean? #

The RankScan measure “Images without alt text” counts pages with at least one image that has no alt attribute. RankScan checks every <img> element with an image source in the page's HTML. This includes the logo, icons and images in the header and footer.

This is how RankScan distinguishes:

RankScan does not check the quality of existing alt text. You only find these cases in your own review:

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

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

The term “alt tag” is still common because many users search for it. The technically correct term remains “alt attribute”.

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 crawler, 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

Alt text is therefore not a lever of its own for 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 →). It belongs to the clean foundation of a page.

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

You do not need a fixed character 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. If the attribute is missing entirely, some screen readers read out the file name instead.
Source: W3C WAI: Decorative Images

This is exactly the case RankScan reports. A decorative image with alt="" does not appear in the measure.

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.

Order: Which Images First? #

Not every missing alt attribute is equally urgent. The following table is a general professional assessment. RankScan shows a single severity for the measure: medium.

The most important rule:

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

How to Work Through “Images Without Alt Text” #

RankScan picks the steps based on the number of affected pages. Below 20 pages, you work page by page. From 20 pages, you start with the template and the media library, see the next section.

Below 20 Pages: Describe the Images on the Page #

1. Open the affected page in your website's editor and go through its images.
2. For each informative image, briefly describe what it shows. For image links and icon buttons, describe the function.
3. Leave the alt text empty for purely decorative images. Empty means alt="", not leaving it out:

<!-- correct: decorative image, RankScan does not report it -->
<img src="decoration.svg" alt="">

<!-- wrong: no attribute, RankScan reports the page -->
<img src="decoration.svg">

<!-- unnecessary: decorative image with a description -->
<img src="decoration.svg" alt="decorative image">

4. Publish the page and mark the measure as done.

How RankScan checks it: The next full crawl checks all affected pages. RankScan then reports “Fixed” or “Not fixed yet” with the number of pages still missing.

Practical Help When Describing Images #

The following questions are general professional knowledge. They help you with steps 2 and 3. RankScan does not check them.

Determine the 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.

Describe informative images with text that is:

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

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?

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.

Adapt the publishing process. Alt text should not only appear after an audit. Add these points 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.

From 20 Pages: Template and Media Library First #

If alt text is missing on many pages, the cause is often not the individual text. The same image frequently appears on every page: logo, icons, images in the header and footer. One missing attribute in the template then turns every page into a finding. One fix in the template resolves all these pages at once.

That is why RankScan switches the steps from 20 affected pages. The effort also depends on the number of pages:

The severity stays medium in all cases. From 20 pages, the goal of the measure in RankScan reads “Add alt text in the template and media library for … pages”.

1. First check the images that appear on many pages: logo, icons, images in the header and footer.
2. Have your developers or agency describe these images in the template. Purely decorative images get an empty alt text there.
3. Add the alt texts of the remaining images in your website's media library. Briefly describe what each image shows.
4. Some websites only use the media library alt text for newly inserted images. So check one affected page.
5. Publish the changes and mark the measure as done.

How RankScan checks it: The next full crawl checks all affected pages. RankScan then reports “Fixed” or “Not fixed yet” with the number of pages still missing. If pages remain, they often contain images inserted before the media library change. Edit these pages individually.

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.

General Checklist for a Thorough Alt Text Review #

This list is a general checklist for your own review. RankScan only checks the first item: images without an alt attribute.

• images without an alt attribute,
• images with empty alt,
• whether empty alt is plausible for decorative images,
• file names as alt text,
• generic alt text,
• very long alt text,
• keyword stuffing,
• identical alt text for different images,
• product images without product reference,
• icons without an accessible function,
• image links without meaningful text,
• infographics without surrounding explanation,
• images with embedded text,
• page type and image position,
• multilingual versions,
• images from the template.

Example: Logo and Icons Without Alt Text in a Shop #

Starting Point #

A Swiss outdoor shop has high-quality product photos. RankScan reports on more than 20 pages:

Measure: “Images without alt text”
Goal: Add alt text in the template and media library for … pages
Rating: medium severity · medium effort · Editorial

Analysis #

• The logo in the header has no alt attribute. It appears on every page.
• The payment method icons in the footer have no alt attribute either.
• Many product images have no alt text in the media library. The shop system then does not output the attribute at all.
• Some product images carry the file name IMG_4421.jpg as alt text. RankScan does not report these, because alt text is present. The team corrects them anyway.

Solution #

1. The agency adds alt="Shop name home page" to the logo in the template.
2. The payment method icons have no accompanying text. They get the name of the payment method as alt text.
3. Dividers and decorative graphics in the template get alt="".
4. The editorial team adds alt text to the product images in the media library: product name, color, model and view. Variant images are distinguishable.
5. The editorial team opens an older product page and checks whether the new alt text appears there.
6. The team publishes the changes and marks the measure as done.

Result #

The next full crawl finds the logo and icons with alt text. All pages that were affected only because of the template drop out. A few blog articles remain, with images inserted before the change. The editorial team edits these pages individually.

The pages become more accessible, and Google gets 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. Even for decorative images, screen readers then lack the signal. This is the case RankScan reports.

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 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 → 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? RankScan checks this.
• 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?
• From 20 affected pages, did you work on the template and media library first?
• Have you marked the measure as done in RankScan?

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 measure “Images without alt text” shows where the alt attribute is missing entirely. You check the quality of existing alt text yourself.

The best approach is:

1. from 20 affected pages, start with the template and media library,
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. mark the measure as done; the next full crawl checks the pages.

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: Decorative Images
• 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