Can you hear the difference?
Before we delve into the theory, let’s conduct an experiment. Simulate how a screen reader (e.g., JAWS, NVDA, or VoiceOver) perceives your images. Click on the cards to hear the difference. Imagine you are blind and navigating an online shop—what would you understand?
"Graphic. IMG_8920.jpg..."
🔊 Click to play"Red Nike Air Max running shoe..."
🔊 Click to play💡 Knowledge: Without alt text, a blind user only hears “IMG_8920.jpg” – no information whatsoever about the product. With good alt text, they know immediately: red Nike running shoe, side view. The difference between a purchase and a frustrated abandonment.
What are alt texts and why are they important?
Alt Text (also known as alternative text, alt attributes, or alt tags) is short text descriptions embedded in the HTML code of an image. They were introduced in 1995 with HTML 2.0 and have been a fundamental part of the web ever since. However, their significance has changed dramatically over the years – from a nice extra to a legal requirement and a critical SEO factor.
The three pillars of alt text relevance
Worldwide, over 285 million people live with visual impairments, of whom approximately 39 million are completely blind. In Germany, this figure is around 1.2 million. These users rely on screen readers – software such as JAWS, NVDA, or VoiceOver – which read the screen content aloud. Without alt text, an image remains completely invisible to them . The screen reader then either reads nothing at all or the file name – “IMG_8920.jpg” is not helpful information
Google can’t “see” images like humans. The Googlebot relies on alt text, filenames, and surrounding text to understand and index images. Studies show that over 22% of e-commerce traffic comes from Google Image Search. In visually driven industries like fashion, furniture, or electronics, this percentage can be even higher. Every product image without optimized alt text represents wasted ranking potential.
If an image fails to load—whether due to a slow connection, server error, or image blocker—the alt text is displayed. This ensures the page remains understandable and usable even without images . In times of mobile-first design and variable network quality, this is more important than ever. It also helps users with data-saving mode who have deliberately disabled images.
The anatomy of an alt text
The alt text is inserted in the HTML as follows:
<img src="product.jpg" alt="alt="Rote Sneaker von Nike, Modell Air Max 90, Seitenansicht">The alt attribute is a mandatory attribute for every <img> tag according to the HTML5 standard. There is only one exception: For purely decorative images, the attribute may (and should) be empty – but it must still be present.
<img src="dekoration.jpg" alt="">Many developers omit the alt attribute entirely. <img src="bild.jpg">. This is incorrect! Without the attribute, the screen reader reads the filename aloud. With an empty attribute, alt=””it completely ignores the image – this is the desired behavior for decoration.
Why this guide?
The internet is full of alt text guides. Most are either too superficial ( “Describe the image!” ) or too technical (W3C specifications with hundreds of pages). This guide fills the gap and is aimed at four target groups:
- Marketing Manager: Understand why alt text solves SEO AND compliance simultaneously – and how to sell that to your boss
- Developers: Specific code snippets for ARIA, SVG, CSS backgrounds, icon fonts and complex widgets
- Shop owners: 30+ examples of product images, category pages, banners and hero images
- Compliance Officer: All about BFSG, EAA, ADA, WCAG 2.2 and the potential penalties
By the end of this guide, you will not only know what good alt text is, but also why it is so important – and how you can efficiently optimize thousands of images.
Legal basis: BFSG, EAA & ADA
Accessibility is not a trend or a “nice-to-have” feature – it’s a legal requirement. Since June 28, 2025, online shops in the EU have been required to be accessible. In the US, lawsuits with average settlement costs of over $25,000 are a real threat. Here are the key regulations in detail:
BFSG / European Accessibility Act (EAA)
Binding since June 28, 2025 in all 27 EU member states
The Accessibility Strengthening Act (BFSG) is the German implementation of the European Accessibility Act (EAA), an EU directive from 2019. After a transition period of six years, the law has been fully in force since 28. June 2025 and is enforced in all 27 EU member states.
The German Federal Disability Equality Act (BFSG) obligates companies to design their digital products and services to be accessible. Technically, it refers to the European standard EN 301 549, which in turn is based on the international standard WCAG 2.1 Level AA For images, success criterion 1.1.1 (Non Text Content) is relevant – precisely the topic of this guide.
What exactly does the law require regarding images?
WCAG 1.1.1 Level A is one of the most fundamental requirements: “All non-text content presented to the user has a text alternative that serves an equivalent purpose.” In practice, this means:
- Every informative image needs a descriptive alt text.
- Every functional image (link, button) needs alt text that describes its function.
- Decorative images need an empty alt attribute (
alt="") - Complex images (diagrams, infographics) require extended descriptions.
- • Online-Shops (B2C) – whether own shop or marketplace
- • Service websites – banks, insurance companies, telecommunications
- • E-books and e-readers
- • Booking and check-in systems in transport
- • ATMs and self-service terminals
- • Micro-enterprises – fewer than 10 employees AND less than €2 million annual turnover (both criteria must be met)
- • Purely B2B platforms – only if exclusively business customers
- • Disproportionate burden – must be proven in each individual case
Additional risks:
• Cease and desist letters under competition law: Competitors can issue cease and desist letters – typically €3,000-€5,000 per case plus legal fees.
• Cross-border enforcement: -wide market surveillance enables complaints from other countries
• Repeat offenders: Higher penalties and sales bans are threatened in cases of repeated violations.
Americans with Disabilities Act (ADA)
In force since 1990 – also applies to international companies
The Americans with Disabilities Act (ADA) is the US equivalent of the EAA – however, it has been in effect since 1990. Originally designed for physical accessibility (ramps, elevators), US courts have consistently extended the ADA to websites. The breakthrough came in 2017 with the case of Gil v. Winn-Dixie ; since then, it has been clear that websites are considered “places of public accommodation.”
Important for German companies: The ADA also applies to foreign companies that sell products or services to US customers. If your shop is accessible in the US and serves US customers, you are potentially liable.
A medium-sized German online shop for designer furniture also sells to the USA. In the spring of 2024, it received a demand letter (cease and desist letter) from a specialized US law firm. The accusation: 3,200 product images without alt text, as well as incorrect form labels and inadequate keyboard navigation.
The shop opted for the comparison and then optimized all images with AutoAlt.ai – total optimization costs: approximately €800. Had they done this beforehand, they could have avoided all this trouble.
In the US, specialized law firms—so-called “ADA mills” or “serial filers”—have focused on accessibility lawsuits. They systematically scan websites for violations and send out mass cease-and-desist letters. The top 10 plaintiffs were responsible for over 30% of all ADA lawsuits in 2024. For them, it’s a business model—for online shop owners, it’s an expensive problem.
WCAG 2.2 – The technical standard in detail
Published October 2023 – the benchmark for compliance
The Web Content Accessibility Guidelines (WCAG) are developed by the World Wide Web Consortium (W3C) and are the globally recognized technical standard for digital accessibility. Both the European Federal Accessibility Act (BFSG/EAA) and the American Accessibility Guidelines (ADA) reference WCAG as a benchmark.
WCAG 1.1.1 – Nicht-Text-Inhalt (Level A): “WCAG 1.1.1 – Non-Text Content (Level A): “All non-text content presented to the user has a text alternative that serves an equivalent purpose, except in the situations listed below.”
The 7 image categories according to WCAG
WCAG distinguishes seven types of non-text content, each requiring different handling:
1. Informative images
Conveying information → descriptive alt text
2. Dekorative images
Purely visual → empty alt=""
3. Funktionale images
Links/Buttons → Describe function
4. Images of text
Text as graphic → display full text
5. Complex images
Diagrams → Short text + Long description
6. Group images
Multiple infos = 1 info → describe one image, leave the rest blank
7. Image maps
Clickable areas → each area needs its own alt text
💡 Good to know: WCAG 2.2 (October 2023) introduced new criteria (e.g., 2.4.11 Focus Not Obscured, 3.3.7 Redundant Entry), but criterion 1.1.1 for images remains unchanged. If your alt text meets WCAG 2.1 AA, it also meets WCAG 2.2.
The 7 image types according to WCAG – in detail
The W3C distinguishes 7 image categories – each requiring a different alt text approach. The first step is always: What type is my image? Use the following decision tree:
🎯 The 3-second decision maker
Backgrounds, dividing lines, visual effects, decorative elements
Empty attribute = Screen reader ignored
Clickable icons, logo links, social buttons, thumbnails
Describe WHAT happens, not HOW it looks.
Product photos, illustrations, portraits, screenshots
Describe WHAT can be seen + WHY it's relevant
Informative images
Definition: Informative images convey information that is not (fully) contained in the surrounding text. They are the most common type of image in online shops and on content pages.
The golden rule: Describe WHAT is in the picture and WHY it is relevant in the context. Imagine you are describing the picture to someone on the phone.
Examples by context:
📦 Product image in e-commerce:
❌ Bad
alt="shoe"
Too vague – which shoe?
✅ Good
alt="Red Nike Air Max running shoe for men, side view"
Color + Brand + Model + Target Group + Perspective
📰 News image:
❌ Bad
alt="Federal Chancellor"
Which Chancellor? What does he do?
✅ Good
alt="Chancellor Scholz speaks at a press conference at the Chancellery, June 2025."
Person + Action + Place + Time
👤 Team portrait:
❌ Bad
alt="Photo"
Completely meaningless
✅ Good
alt="Maria Schmidt, Head of Marketing, smiling in the office."
Name + Role + Description
💡 Optimal length: 50-150 characters. Short enough not to be annoying (screen readers read everything in one go), long enough to be informative. For more complex images: short alt text + detailed description in the body text.
Dekorative Images
Definition: Decorative images are purely visual and contribute no substantive information. They are “eye candy”—pleasant to look at, but not necessary for understanding the page.
The golden rule: Decorative images MUST have an empty alt attribute: alt="". This tells the screen reader to ignore the image.
Typical decorative images:
- Background patterns and textures
- Dividing lines and visual delimiters
- Decorative icons next to text (when the text contains the information)
- Mood images without any content
- Shadow effects and visual embellishments
The most common mistake: Omitting the alt attribute completely. This is not the same as an empty attribute!
❌ <img src="deko.jpg">
Screen reader reads: "Grafic.deko.jpg"
User hears nonsensical file names – confusing!
✅ <img src="deko.jpg" alt="">
Screenreader: (completely ignores the image)
User is not disturbed – perfect!
🤔 Rule of thumb: Imagine you remove the image completely. If the page then has the same informational content and is just as understandable → the image is decorative. If something is missing → it’s informative and needs alt text.
Funktionale Images
Definition: Functional images trigger an action – they are links, buttons, or other clickable elements. The image itself is the interactive trigger.
The golden rule: Describe the FUNCTION or the GOAL, not the appearance! A blind user needs to know what happens when they click – not what the icon looks like.
🔍 Search icon:
❌ alt="glass"
It only describes the appearance.
✅ alt="Search"
Describes the function
🏠 Logo as homepage link:
❌ alt="Logo"
Don't say where the link leads
✅ alt="AutoAlt.ai – Back to homepage"
Brand + Target of the link
📱 Social Media Icons:
❌ alt="Blue F"
Only the icon is described
✅ alt="AutoAlt.ai on Facebook"
Brand + Platform = Goal
🛒 Shopping cart icon:
❌ alt="shopping cart"
Describes only the symbol
✅ alt="Shopping cart (3 items)"
Function + dynamic information
💡 Special case: Image + text in the same link
If a link contains both an image and text, the image can often alt=””be prioritized – the text already describes the destination. Example:
<a href="/kontakt">
<img src="mail-icon.png" alt="">
Contact
</a>Images of text
Definition: Images that represent text as graphics – typically logos, banners with text messages, typographic elements, or screenshots of text.
The Golden Rule: The alt text must contain the ENTIRE visible text. If the image shows “SALE -50%”, the alt text must say exactly that.
Why are text-images problematic?
WCAG recommends avoiding text images whenever possible. True HTML text with CSS styling has several advantages:
- Scalable: Users can adjust the font size
- Copyable: Text can be selected and copied.
- Translatable: Browser translation works
- Faster: Less data to load
- Responsive: Adapts automatically
🏷️ Example: Sale banner
The image shows: "SALE -50% on everything!"
❌ alt="Sale Banner"
alt="SALE -50% on everything!"
✅ The actual text is missing!
Exactly the visible text
🎨 Example: Logo with company name
The logo shows: "AutoAlt.ai" with the subtitle "AI Alt-Text Generator"
❌ alt="Logo"
alt="AutoAlt.ai – AI Alt Text Generator"
✅ The brand name is completely missing.
Full visible text
💡 Tips: For every text-based image, check: Could I implement this as real HTML text with CSS? Often, this is possible with modern CSS (web fonts, flexbox, animations) and better for all users.
Complex images
Definition: Complex images contain information that cannot be summarized in 125 characters – typically diagrams, infographics, maps, organizational charts, or technical drawings.
The solution: combination of short alt text and a more detailed description elsewhere.
Three methods for complex images:
Method 1: Description in running text
The alt text refers to the description below:
<img src="chart.png" alt="Bar chart: Revenue development 2020-2024. Description to follow."> <p>The chart shows revenue from €1.2 million (2020) to €3.8 million (2024), a growth of 217%.</p>
Method 2: Data in a table
Ideal for diagrams with concrete numbers:
<img src="chart.png" alt="Bar chart: Sales development. Details in the table below.">
<table>
<tr><th>Year</th><th>Sales volume</th></tr>
<tr><td>2020</td><td>1.2 million €</td></tr>
<tr><td>2024</td><td>3,8 million €</td></tr>
</table>Method 3: aria-describedby
Technically cleanest solution with ARIA:
<img src="chart.png" alt="Bar chart: Revenue development 2020-2024" aria-describedby="chart-desc"> <div id="chart-desc" class="sr-only">The chart shows five bars representing the years 2020 to 2024. Revenue increased from €1.2 million in 2020 to €3.8 million in 2024...</div>
💡 Alt text formula for complex images:
[Image type] + [Topic/Title] + [Reference to details]
Example: “Pie chart: Browser market shares 2024. Details in the table below.”
SEO vs. Accessibility: The Myth of Keyword Stuffing
For years, SEO agencies have been preaching: “Put your keywords in the alt tag!” This leads to alt texts like: “Buy cheap running shoes Nike Adidas Puma best price online shop” . This is not only a nightmare for screen reader users – it’s also bad for SEO.
Why keyword stuffing in alt text is harmful
Google is far more sophisticated than simple keyword counting. Its algorithm recognizes unnatural text and flags it as a spam signal. Even worse, overly optimized alt text can lead to manual penalties. And for screen reader users, it’s simply unusable – they hear a jumble of meaningless words instead of a helpful description.
alt="Buy cheap iPhone 15 case cover online, best quality"
alt="Black leather case for iPhone 15 Pro with card slot, side view"
The truth: Good alt text is automatically SEO-friendly.
When you describe an image naturally and precisely, the relevant keywords are automatically included. “Red Nike Air Max running shoe for men, side view” contains: “red”, “Nike”, “Air Max”, “running shoe”, “men” – without any spam. Google understands the context, the screen reader user understands the product, and WCAG is met. Win-win-win.
💡 The formula for SEO-friendly, accessible alt texts:
Describe the picture as you would describe it to a friend on the phone. Naturally, precisely, without repetition. The keywords will come naturally.
What Google really says about alt text
John Mueller, Google’s Search Advocate, has made it clear on several occasions: “Alt text should be useful for users who can’t see the image. That’s the primary purpose. If it’s useful for accessibility, it will also be useful for search.” Google optimizes for users – and accessibility is user-friendliness.
“The best SEO alt text is one that accurately describes the image in a way that’s helpful for someone who can’t see it. Don’t stuff keywords. Don’t over-optimize. Just describe the image.” – John Mueller, Google
E-commerce Best Practices: 30+ Examples
Product images are the primary reason customers buy. And over 22% of e-commerce traffic comes from Google Image Search. Here are specific formulas and examples for each industry:
🎯 The universal alt text formula for product images:
This formula works for 90% of all product images. It naturally includes the most important keywords and is also a clear description for screen reader users.
Examples by industry:
alt="Blue men's polo shirt by Lacoste, classic cut, front view"
alt="Black leather sneakers Nike Air Force 1 Low, side view"
alt="Red evening bag with gold chain by Michael Kors, detail view of clasp"
alt="Beige trench coat for women by Burberry, full body view on model"
alt="Apple iPhone 15 Pro in Titanium Black, 256GB, rear with camera"
alt="Sony WH-1000XM5 headphones in silver, folded with carrying case"
alt="Samsung 65 inch OLED TV on stand, front view with nature motif"
alt="MacBook Pro 16-inch M3 Max, opened on desktop, showing macOS Desktop"
alt="Grey 3-seater sofa IKEA Söderhamn with fabric cover, front view in the living room"
old="Dining table made of solid oak with 6 black chairs, top view"
alt="White country-style display cabinet with glass doors, detail view of handles"
alt="Ergonomic office chair by Herman Miller in black, side view mechanism"
alt="Chanel No. 5 Eau de Parfum 100ml bottle with gold cap"
alt="Mac Ruby Woo red lipstick, opened with visible color"
alt="Anti-Aging Serum by La Mer, 30ml dropper bottle, product photo"
alt="Urban Decay Naked 3 eyeshadow palette, opened with 12 rose shades"
alt="Organic extra virgin olive oil 500ml in dark green glass bottle"
alt="Handmade chocolate truffles in gift box, 12 assorted pieces"
alt="Espresso coffee beans from Lavazza, 1kg pack, Arabica blend"
alt="Craft Beer IPA by BrewDog Punk, 330ml can, amber-colored beer"
alt="Yoga mat in lavender, 6mm thick, non-slip, rolled up"
alt="Deuter 40L trekking backpack in blue-grey, front view with compartments"
alt="Asics Gel-Kayano 30 men's running shoes, neon yellow, side view"
alt="Camping tent for 4 people, set up in green nature, entrance open"
alt="Product"
Too generic – which product?
alt="SKU-12345-BLK-XL"
Internal code is useless to users.
alt="Image of shoe"
"Image of" is redundant – the screen reader already says "graphic"
alt="Buy cheap shoes online shop"
Keyword-Stuffing = Spam
alt="DSC_0001.jpg"
File names are not descriptions
(no alt attribute)
The screen reader then reads the file name.
Special cases in e-commerce:
In galleries with multiple images of the same product: Each image describes the specific view.
alt="Nike Air Max 270, left side view"
alt="Nike Air Max 270, sole from below"
alt="Nike Air Max 270, heel pad detail view"
Small color thumbnails in the product selection require the color to be specified in the alt text:
alt="Select color: Red"
alt="Select color: Blue"
alt="Select color: Black (selected)"
Star ratings must communicate the actual rating:
alt="Rating: 4 out of 5 stars"
Developer Cheat Sheet: ARIA, SVG & more
For front-end developers, there’s more than just alt="". Modern websites use SVGs, icon fonts, CSS backgrounds, and complex widgets. Here are the techniques for each case:
SVGs do not have an alt attribute. Use role="img" and aria-label or a <title> <'H2'>-Element:
<svg role="img" aria-label="Search">
<title>Search</title>
<path d="..."></path>
</svg>For decorative SVGs:aria-hidden="true"
CSS background images are invisible to screen readers. If the image contains information, use ARIA:
<div
role="img"
aria-label="Team photo of our 12 employees"
class="hero-background">
</div>For purely decorative backgrounds: do nothing (default)
Icon fonts are often read aloud as letters. Hide them with aria-hidden:
<!-- With visible text -->
<button>
<i class="fa fa-search" aria-hidden="true"></i>
Suche
</button>
<!-- Icon only -->
<button aria-label="Search">
<i class="fa fa-search" aria-hidden="true"></i>
</button>One alt text applies to all srcset variants – it's the same image in different sizes:
<img
srcset="shoe-400.jpg 400w,
shoe-800.jpg 800w,
shoe-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, 800px"
src="shoe-800.jpg"
alt="Red Nike Air Max, side view">When different image sections are used for different viewports, the alt text belongs to the <img>:
<picture>
<source media="(min-width: 800px)"
srcset="hero-wide.jpg">
<source media="(min-width: 400px)"
srcset="hero-medium.jpg">
<img src="hero-small.jpg"
alt="Mountain landscape at sunrise">
</picture>For images with captions: Alt text + Figcaption complement each other:
<figure>
<img src="team.jpg"
alt="Our 12 person team in front of the office building">
<figcaption>
The AutoAlt.ai team at the 2024 summer festival
</figcaption>
</figure>Alt text describes WHAT is visible, figcaption provides context.
Use native HTML elements whenever possible. ARIA is the fallback for cases where HTML is insufficient. It <button> doesn’t need a role="button".
Common patterns:
<a href="/product/nike-air-max">
<img src="shoe.jpg"
alt="Nike Air Max 270 in red – View product details">
</a>Alt text contains product name AND link target.
<button type="submit">
<img src="cart-icon.png" alt="Add to Cart">
</button>
<!-- Or better yet, with SVG: -->
<button type="submit" aria-label="Add to Cart">
<svg aria-hidden="true">...</svg>
</button><img src="chart.png" alt="Revenue development 2020-2024 as a bar chart" aria-describedby="chart-description">
<div id="chart-description" class="sr-only">
The chart shows the annual revenue:
2020: €1.2 million, 2021: €1.8 million, 2022: €2.4 million,
2023: €3.1 million, 2024: €3.8 million.
Average growth: 33% per year.
</div>.sr-only = visually hidden, but accessible to screen readers.
Tools & Testing: How to check your alt text
Theory is good, but you also need to test your website. Here are the best tools – from free to enterprise:
Free and available immediately:
- • Chrome: F12 → Lighthouse → Accessibility
- • Firefox: F12 → Accessibility Tab
- • Edge: F12 → Issues → Accessibility
Automatically finds missing alt attributes.
The ultimate test – listen for yourself:
- • NVDA (Windows, free)
- • VoiceOver (Mac/iOS, built in)
- • JAWS (Windows, commercial)
- • TalkBack (Android, built in)
Tip: Close your eyes and navigate using only the keyboard.
For large websites and shops:
- • WAVE (wave.webaim.org) – free
- • axe DevTools – Browser-Extension
- • Site improve – Enterprise
- • AutoAlt.ai Bulk Scan – AI-Powered
AutoAlt.ai also generates the alt text.
1. Automated scanning (WAVE/axe) for a quick overview → 2. Spot checks with screen readers for quality control → 3. Regular audits during content updates
Knowledge test: Did you pay attention?
Ask:
An image serves as a button for the search function (magnifying glass icon). Which alt text is correct?
The ultimate alt text checklist
Click the items to check them off. Use this list for every content update:
Don't feel like doing manual labor?
Let our AI scan your entire shop in minutes and generate alt text.
Frequently Asked Questions (FAQ)
There is no hard technical limit in the HTML standard, but practical limits do exist: Screen readers don’t “breathe”—they read the entire alt text at once. With very long texts, users lose track. The recommendation is 50 to 150 characters for normal images. For complex images (diagrams, infographics), use a short alt text of approximately 125 characters plus a detailed description in the body text or via aria-describedby
Yes, and very well at that! Modern AI models like AutoAlt.ai use computer vision to recognize image content: objects, colors, text within the image, people, and more. The AI then generates WCAG-compliant, SEO-optimized alt text in over 25 languages. This saves hundreds of hours of manual work for large catalogs. The quality is now comparable to manually written text—often even more consistent, because the AI doesn’t have “bad days.”
No, never! If the alt attribute is completely missing <img src="image.jpg"> the screen reader will read out the filename – “IMG_8920.jpg” is not helpful information. For decorative images, the attribute must be empty: alt="". This explicitly signals to the screen reader: “Ignore this image, it is not relevant.” Empty attribute ≠ missing attribute!
Alt is for screen readers and is read aloud – it is mandatory for accessibility. Title is a tooltip that appears when you hover your mouse over it – it is optional and not accessible, as keyboard and touchscreen users cannot see it. Never use Title as a replacement for Alt! The Title attribute can provide additional information, but only as a supplement, not a replacement.
No. For normal <img> tags, the alt attribute is perfectly sufficient – this is the native, semantically correct way. ARIA (Accessible Rich Internet Applications) is intended for cases where HTML is insufficient: SVGs without native alt, CSS background images with content, icon fonts, or complex widgets. Basic rule: “No ARIA is better than bad ARIA” – only use ARIA if you absolutely need it.
A combination of automated and manual testing is ideal:
- Automated Scan: WAVE (wave.webaim.org), axe DevTools, or Chrome Lighthouse quickly find missing alt attributes
- Screen Reader Test: Install NVDA (free) or use VoiceOver (Mac). Navigate your page with your eyes closed
- Spotting: Check whether the alt text actually describes the image or is just generic
- Regular Audits: Check the new images with every content update
The deadline was June 28, 2025 – so we’re already in enforcement mode. Possible consequences:
- Fines: Up to €100,000 in Germany, depending on the state and severity
- Cease and Desist Letters: Competitors can issue cease and desist letters – typically €3,000-€5,000 per case
- Sales Bans: In cases of serious violations, products can be withdrawn from the market
- Reputational Damage: Public complaints damage the brand image
With AutoAlt.ai, you can quickly make even large catalogs compliant – often within just a few hours.
Unlimited. We have clients with over 100,000 product images. The bulk scan runs in the background on our servers – you can close the page and receive an email when it’s finished. Typical processing time: 2-3 seconds per image. A catalog with 10,000 images is ready in approximately 6-8 hours. For urgent requests, we offer priority processing with faster turnaround times.
“Buy cheap shoes online shop Nike Adidas” is spam and will be penalized by Google. Use a more natural description: “Red Nike Air Max running shoe”.
Using “product image” for 500 images is not helpful. Each image needs an individual, specific description.
Backgrounds, separators, and decorative elements need to be alt=""blank, not described. Otherwise, they will annoy screen reader users.
“Search” doesn’t tell you what’s happening. “Search” does. With functional images, you describe the action, not the appearance.
Screen readers read everything in one go. A 500-character alt text is a nightmare. Stick to 50-150 characters; for complex images, use separate long descriptions.
The same shoe requires different alt text on the product page than in a blog article about running training. The context determines which details are relevant.
Alt text isn’t a one-off project. Every new image needs alt text. Integrate the check into your content workflow – or automate it with AutoAlt.ai.
The future of alt text: AI, WCAG 3.0 and visual search
Alt text is not a static topic. Three major developments will shape the coming years:
AI-generated alt text will become the standard.
The quality of computer vision has reached a turning point. Modern models like GPT-4 Vision, Claude 3, and Gemini can not only recognize images but also understand them: context, mood, brands, and details. AI-generated alt text is now often superior to hastily written manual text.
The trend is clearly towards automation: Alt text is generated during upload, added during CMS import, and created in real time via API. Manual alt text maintenance is becoming obsolete – at least for most websites. However, human fine-tuning remains relevant for particularly important images (hero images, campaigns).
Forecast 2027: 80% of all e-commerce alt texts will be created or checked using AI.
WCAG 3.0 introduces new assessment methods.
WCAG 3.0 (still under development) will fundamentally change the assessment model. Instead of “Pass/Fail,” a scoring system from 0-4 will be introduced. This means that the assessment will not only evaluate whether alt text exists, but also how good it is.
A generic “product image” might then receive a score of 1, while a detailed, context-related alt text would receive a score of 4. A minimum score will likely be required for compliance.
What this means: The days when “anything” would suffice as alt text are numbered. Quality is becoming measurable and mandatory.
Visual search is changing SEO
Google Lens, Pinterest Lens, Bing Visual Search – more and more users are searching with images instead of text. A user photographs a shoe on the street and wants to know where they can buy it. The search engine finds your product image – but only if it understands what’s in the picture.
This is where alt text comes into play: it helps the search engine understand the semantic context. “Red Nike Air Max 270” is a match for visual searches for red sneakers. “IMG_4521.jpg” is invisible.
The trend: Alt text is becoming a critical factor for visual search discovery. Shops without optimized alt text become invisible in visual search.
Alt text isn’t a chore, it’s a strategic investment. You pay three times over: compliance (avoiding fines), SEO (gaining traffic), and UX (reaching all users). Costs decrease through AI automation, while benefits increase through visual search and stricter regulations. The sooner you start, the better.
Industry-specific alt text strategies
Different industries have different requirements for alt text. Here are detailed strategies for the most important e-commerce segments:
Fashion & Textiles
The most visually oriented industry in e-commerce
Fashion thrives on visuals. Users need to understand colors, cuts, materials, and details without being able to touch the product. Alt text is particularly important here because it translates this sensory information into words.
The fashion formula:
[Color] + [Material] + [Product Type] + [Brand] + [Cut/Style] + [View]
Example of outerwear:
alt="Dark blue wool coat by Max Mara, calf-length, double-breasted, on model front view"
Example accessory:
alt="Gold Cartier Santos wristwatch, square dial, brown leather strap"
- • Use precise color names: “Burgundy” instead of “red,” “Champagne” instead of “beige”
- • For patterned fabrics: “Navy blue striped shirt with white pinstripes”
- • Mention materials: silk, cashmere, cotton, leather – buyers are interested in these details
- • For prints: “Floral pattern with pink roses on a cream background”
Electronics & Technology
Specifications and features in focus
When it comes to electronics, users want to understand technical details. Alt text should include model numbers, colors, and visible features. Unlike fashion, it’s less about aesthetics and more about function.
The electronics formula:
[Brand] + [Product Name/Model] + [Color/Variant] + [Visible Feature] + [View]
Example smartphone:
alt="Samsung Galaxy S24 Ultra in Titanium Black, back with quad camera system visible"
Example computer:
alt="Dell XPS 15 laptop opened, OLED display showing Windows desktop, backlit keyboard"
- • Model numbers only if they are industry standard (e.g. “RTX 4090”, “M3 Max”)
- • For ports: Describe what is visible (“USB-C and HDMI ports on the side”)
- • Provide a sense of scale if helpful (“compact format, fits in one hand”)
- • For accessories, specify the main use case (“Lightning-to-USB-C cable for iPhone charging”)
Food & Drinks
Stimulating appetite through words
When it comes to food, the goal is to stimulate the appetite while simultaneously providing important product information. Alt text should describe texture, color, and presentation, but also include practical details such as package size.
Example wine:
alt="Château Margaux 2018 red wine, dark red color in decanter, Bordeaux bottle next to it"
Example Confectionery:
alt="Belgian chocolate selection, 24 pieces in gold packaging, various types of chocolate visible"
- • Describe textures: “crispy”, “creamy”, “juicy” – this awakens the appetite
- • Do not include allergens in the alt text – they belong in structured product data.
- • Specify package size: “500g bag”, “6-pack”, “0.75l bottle”
- • For ready-made meals: Describe the finished product, not the packaging.
B2B & Industry
Technical precision for a professional audience
B2B buyers are experts in their field. They expect technical precision and industry-standard terminology. Alternative texts can be more technical in this context than in the B2C sector.
Example from mechanical engineering:
alt="CNC milling machine DMG MORI NLX 2500, 5-axis machining, open work area with tool changer"
Example office supplies:
alt="Steelcase Leap V2 office swivel chair, fully equipped with lumbar support, mesh back black"
- • Use technical terms if the target audience understands them
- • Provide full model numbers and type designations
- • For technical drawings: Specify the scale and perspective shown.
- • Certifications only in the alt text if they are visible in the image (e.g. CE mark)
International alt texts: Multilingual shops
If your shop supports multiple languages, you’ll need alt text in each language. Here are the most important considerations:
- Href lang tags: Each language version needs its own alt text in that language.
- Cultural differences: Colors have different meanings (white = mourning in Asia)
- Brand translation: Some brands have local names or spellings
- Units of measurement: EU = metric, USA/UK = imperial (inches, ounces)
- Do not translate literally: “Blue running shoe” → not just “blue running shoe”, but use local terms.
- Research local keywords: Germans search for “sneaker”, Austrians for “Turnschuh” (trainer).
- Convert shoe sizes: EU 42 = US 9 = UK 8
- Use AI: AutoAlt.ai automatically generates alt text in 25+ languages.
🇩🇪 Germany:
alt="Roter Nike Air Max Laufschuh für Herren, Größe 42, Seitenansicht"
🇬🇧 Englisch:
alt="Red Nike Air Max men's running shoe, size 9 US, side view"
🇫🇷 Französisch:
alt="Chaussure de course Nike Air Max rouge pour homme, pointure 42, vue latérale"
🇪🇸 Spanisch:
alt="Zapatilla de running Nike Air Max roja para hombre, talla 42, vista lateral"
Alt texts in various CMS & shop systems
Each system has its own peculiarities when it comes to managing alt text. Here are specific instructions for the most popular platforms:
Shopware 6
In Shopware 6, alt text is managed directly in the Media Manager. The path is: Administration → Content → Media → Select image → “Alt tag” field. For product images, you can also enter the alt text in the product settings under “Media”.
Special feature: Shopware supports multilingual alt text. Change the language in the top right corner and enter a separate alt text for each language.
Automation: The AutoAlt.ai Shopware plugin synchronizes with your product catalog and automatically generates alt text during product import or at the touch of a button for existing images.
Pro Tip: Use the “bulk editing” feature in Shopware to update alt text for multiple images simultaneously. For very large catalogs (1,000+ images), the AutoAlt.ai API integration is more efficient.
WordPress & WooCommerce
WordPress makes it relatively easy: Media → Library → click on the image → “Alt Text” field on the right. The alt text will then be used wherever this image is embedded.
For WooCommerce products: Edit product → Product image or gallery → Click image → Enter alt text. Note: WooCommerce’s default behavior is to use the product title as alt text if no explicit alt text is set. This is better than nothing, but not ideal.
Plugin recommendation: The AutoAlt.ai WordPress plugin integrates seamlessly into the Gutenberg editor and media library. It analyzes uploaded images in real time and suggests alt text that you can apply with a single click.
Important: WordPress distinguishes between alt text (for screen readers) and title (for tooltips/hover). Focus on the alt text – the title is less relevant for accessibility.
Shopify
Shopify has integrated alt text management well: Products → Edit product → Media section → Click on image → “Edit alt text”. Shopify even displays a notification if alt text is missing.
Bulk editing: You can edit alt text in bulk via Shopify exports (CSV). Export products, add the “Image Alt Text” column, and then import back. For large catalogs, this is more efficient than manual maintenance in the admin panel.
Apps: The Shopify App Store offers various alt text apps. Pay attention to ratings and GDPR compliance – not all apps process your images in a privacy-compliant manner.
Magento / Adobe Commerce
Magento is enterprise software and therefore quite complex. Alt text is managed under Catalog → Products → Edit Product → Images and Videos. Each image has an “Alt Text” field in its properties.
Multilingualism: Magento supports store views. Switch to the desired store view to manage language-specific alt text. The default alt text is inherited from the default store view.
For developers: Magento uses the label attribute in the database (table catalog_product_entity_media_gallery_value). This field is displayed as alt text in the frontend. You can set alt text programmatically via the REST API.
Integrate alt text into your content workflow
Alt text shouldn’t be an afterthought, but rather an integral part of your regular content creation process. Here are proven strategies for different team setups:
The challenge: Everyone does everything – photography, content, shop maintenance. Alt texts are often forgotten.
The solution:
- Checklist for every product upload: “Is the alt text maintained?”
- Weekly 15-minute check: Identifying new images without alt text
- Use AutoAlt.ai Free Tier: 50 images/month free
The challenge: The content team creates the text, but not the images. Responsibilities are unclear.
The solution:
- Define clear responsibilities: Whoever uploads images is responsible for maintaining the alt text.
- Create a style guide for alt text (based on this guide)
- Monthly audit: Report with missing/poor alt text.
The challenge: Complex processes, many stakeholders, international markets, strict compliance requirements.
The solution:
1. Automation
API integration of AutoAlt.ai into a PIM system. Alt texts are automatically generated upon product import.
2. Quality assurance
Review workflow: AI generates the software, humans perform random checks. Feedback continuously improves the AI.
3. Compliance Dashboard
Real-time overview: What percentage of images have alt text? Which areas need attention?
Alt text is like accounting: if you do it regularly, it’s minimal effort. If you put it off for a year, it becomes a huge project. Integrate alt text into your daily workflow, and you’ll never need an “alt text sprint” again.
Measuring success: KPIs for alt text optimization
How do you know if your alt text optimization is working? Here are the most important metrics you should track:
Percentage of images with alt text. Goal: 100% for informative images.
100%
Target value
Traffic from Google Images. In GA4: Acquisition → Traffic Acquisition → Filter "google images".
+20-30%
Typical uplift
Lighthouse Accessibility Score. Missing alt text significantly lowers it.
95+
Target value
Declining image traffic
This could indicate poor or missing alt text – or an indexing problem.
Accessibility complaints
When users complain that they don't understand images, it's high time to act.
High bounce rate in image traffic
Users arrive via image search but don't find what they expected. The alt text doesn't match the image?
Lighthouse score below 90
Time for an accessibility audit. Missing alt text is often a problem that can be fixed quickly.
Legal checklist: Are you BFSG ready?
The BFSG (Federal Law on the Protection of Personal Data) has been in effect since June 28, 2025. Use this checklist to assess your compliance status – not just for alt text, but for your entire website:
Navigation & Operation:
- □ Full keyboard navigation possible
- □ Focus indicator visible
- □ Skip links available
- □ Consistent navigation
Content & Structure:
- □ Semantic headings (h1-h6)
- □ Meaningful link texts
- □ Forms correctly labelled
- □ Error messages explained
Multimedia:
- □ Videos have subtitles
- □ Audio content has transcripts
- □ No autoplay
- □ Media can be paused
Design & Contrasts:
- □ Minimum contrast 4.5:1 for text
- □ Responsive Design
- □ Zoom up to 200% without loss of functionality
- □ Not just color coding
The BFSG (Federal Law on the Protection of Consumers) has been fully in force since June 28, 2025. Market surveillance authorities can now take action. The consequences are real:
- Fines: Up to €100,000 in Germany, depending on the severity of the offense and the size of the company.
- Legal warnings under competition law: Competitors can issue you a cease-and-desist letter – costs: €3,000-€5,000 per case plus legal fees
- Public complaint procedure: Affected parties can complain to the market surveillance authority, which will then investigate.
- Sales bans: In cases of serious or repeated violations, products can be removed from the market.
- Reputational damage: Negative press and social media criticism cause long-term damage.
The good news: Optimizing alt text is one of the easiest and fastest things you can do for compliance. With AutoAlt.ai, it takes hours, not weeks.
Further resources
Want to delve even deeper? Here are the best resources on alt text, WCAG, and accessibility:
- W3C: Images Tutorial – The official W3C tutorial with all the details on image types and alt text.
- WCAG 2.2 Spezifikation – The complete technical standard (for advanced users)
- EN 301 549 – The European standard to which the BFSG refers
- WAVE Web Accessibility Evaluator – Free online test for your website
- axe DevTools – Browser extension for developers, very detailed
- NVDA Screenreader – Free screen reader for Windows for self-testing
- WebAIM – Excellent articles and resources on web accessibility
- The A11Y Project – Community resources and best practices, well presented
- Accessible web design German resources specifically for the DACH market
Share it with your team! The more people understand alt text, the better the web will be for everyone.
TL;DR – The most important points
You’ve made it this far? Respect! Here are the key takeaways at a glance:
Alt text is mandatory – legally (BFSG, ADA) and practically (SEO, UX). It's not optional.
Image type determines strategy – Informative → describe, Decorative → empty, Functional → action.
50-150 characters – short enough to listen to, long enough to convey information.
No keyword stuffing – natural descriptions are better for SEO AND accessibility.
Formula for products: [Color/Material] + [Product] + [Brand] + [View]
Empty ≠ Missing – alt="" is NOT the same as no attribute.
AI makes it easy – AutoAlt.ai generates thousands of alt texts in hours instead of weeks.
Ready to optimize your alt text?
Start for free – 50 credits/month