Alt-Texte richtig schreiben: Mehr als nur Pflichtfeld

1. Warum die meisten Alt-Texte trotz Vorhandensein nutzlos sind

In den meisten Magento-Katalogen ist das alt-Attribut technisch gesehen befüllt. Der Produktimport setzt automatisch den Produktnamen als Alt-Text, ein Redakteur hakt das Pflichtfeld im Backend ab, ein Audit-Tool meldet grünes Licht bei hundert Prozent Abdeckung. Trotzdem hören Screenreader-Nutzer beim Durchklicken der Kategorieseite nur eine endlose Wiederholung des immer gleichen Produktnamens, ohne zu erfahren, welche Farbe, welches Material oder welche Perspektive das jeweilige Bild tatsächlich zeigt. Anwesenheit eines Alt-Texts ist keine Aussage über seine Nützlichkeit.

Das grundlegende Missverständnis: Ein Alt-Text ist kein SEO-Keyword-Feld und keine Pflichtübung für die WCAG-Konformitätscheckliste, sondern eine funktionale Textalternative. Er muss dieselbe Information oder Funktion vermitteln, die ein sehender Nutzer aus dem Bild zieht. Bei einem Produktfoto ist das meist die visuelle Beschreibung des Artikels, bei einer Infografik die enthaltene Kernaussage, bei einem Icon-Button die Funktion des Buttons. Wer diese drei Fälle nicht unterscheidet, produziert Alt-Texte, die zwar Kriterium 1.1.1 der WCAG technisch erfüllen, den Screenreader-Nutzer aber im Stich lassen.

Die folgenden Abschnitte zeigen konkret, wie sich Alt-Texte je nach Bildtyp unterscheiden müssen, wann ein leeres alt="" die richtige und einzig korrekte Wahl ist, und wie man einen bestehenden Produktkatalog nicht nur auf Vorhandensein, sondern auf tatsächliche inhaltliche Qualität prüft.

2. Die Grundregeln für einen guten Alt-Text

Ein guter Alt-Text ist immer kontextabhängig. Dasselbe Produktfoto braucht auf der Kategorieseite einen anderen Alt-Text als auf der Produktdetailseite oder in einer Warenkorb-Vorschau, weil der umgebende Kontext bereits Informationen liefert, die im Bild nicht wiederholt werden müssen. Auf der Kategorieseite mit sichtbarem Produktnamen daneben reicht oft eine kurze visuelle Ergänzung, auf der Produktdetailseite mit mehreren Bildern in einer Galerie muss der Alt-Text die jeweilige Perspektive oder Detailansicht benennen, damit sich die Bilder überhaupt unterscheiden lassen.

Die zweite Grundregel ist Prägnanz. Screenreader lesen den kompletten Alt-Text vor, bevor der nächste Fokuspunkt erreicht wird. Ein Alt-Text mit drei verschachtelten Sätzen bremst die Navigation spürbar aus. Als Richtwert gelten 125 Zeichen, weil manche ältere Screenreader-Versionen längere Texte ohnehin abschneiden, aber wichtiger als die Zeichenzahl ist die inhaltliche Dichte: jedes Wort muss Information tragen, kein Füllwort, keine Wiederholung von Kontext, der bereits aus der Umgebung erkennbar ist.

Die dritte und am häufigsten verletzte Regel: Ein Alt-Text beginnt niemals mit Formulierungen wie Bild von, Foto von oder Grafik zeigt. Screenreader kündigen ein Bild bereits selbstständig als solches an, bevor sie den Alt-Text vorlesen. Die Formulierung Bild von rotem Wanderschuh Größe 42 wird also als Bild, Bild von rotem Wanderschuh Größe 42 gehört, redundant und störend. Die korrekte Formulierung beschreibt direkt den Inhalt: Roter Wanderschuh mit Profilsohle, Seitenansicht.

<!-- WRONG: redundant announcement, screen readers already say "image" -->
<img src="hiking-boot-red.jpg" alt="Bild von rotem Wanderschuh Größe 42">

<!-- WRONG: filename dumped into alt, no actual description -->
<img src="IMG_20260304_hiking_boot_red_042.jpg" alt="IMG_20260304_hiking_boot_red_042">

<!-- WRONG: alt attribute completely missing -->
<img src="hiking-boot-red.jpg">

<!-- RIGHT: concise, context-independent, describes what is actually visible -->
<img src="hiking-boot-red.jpg" alt="Roter Wanderschuh mit Profilsohle, Seitenansicht">

3. Alt-Texte für Produktfotos schreiben

Produktfotos sind der häufigste Bildtyp im Magento-Katalog und gleichzeitig der Bereich mit dem größten Automatisierungspotenzial und dem größten Risiko für generische Massentexte. Der Produktname allein reicht als Alt-Text fast nie, weil er meist schon als sichtbarer Text neben dem Bild steht und Screenreader-Nutzer diese Information doppelt hören, ohne einen Mehrwert aus dem Bild selbst zu bekommen. Ein guter Produktfoto-Alt-Text ergänzt den Produktnamen um das, was tatsächlich nur im Bild erkennbar ist: Farbe, Material, Perspektive, Kontext der Nutzung, sichtbare Details wie Nähte, Verschlüsse oder Muster.

Bei Bildergalerien mit mehreren Ansichten desselben Produkts muss jeder Alt-Text die jeweilige Perspektive eindeutig benennen, sonst kann ein Screenreader-Nutzer die Galerie nicht sinnvoll durchblättern. Statt fünfmal derselbe generische Text braucht es fünf unterscheidbare Beschreibungen: Frontalansicht, Seitenansicht, Detailansicht der Sohle, Ansicht von oben, Nahaufnahme des Verschlusses. Bei Variantenprodukten mit Farboptionen sollte der Alt-Text die tatsächlich angezeigte Variante benennen, nicht die Standardvariante des Produkts, da sich das Bild beim Variantenwechsel per JavaScript ändert, ohne dass die Seite neu lädt.

<!-- Hyvä phtml: gallery images with distinguishable, context-aware alt text -->
<?php foreach ($block->getGalleryImages() as $image): ?>
    <img
        src="<?= $block->escapeUrl($image->getUrl()) ?>"
        alt="<?= $block->escapeHtmlAttr($image->getAccessibleAltText()) ?>"
        loading="lazy"
        class="w-full h-auto object-cover rounded-lg"
    >
<?php endforeach; ?>

<!-- ViewModel: alt text combines product attribute + view angle, not just name -->
<?php
// getAccessibleAltText() returns e.g. "Roter Wanderschuh, Sohlenprofil im Detail"
// instead of just repeating "Wanderschuh Modell X" for every single image
?>

4. Alt-Texte für Infografiken und komplexe Bilder

Infografiken, Größentabellen als Bild, Diagramme und Vergleichsgrafiken transportieren strukturierte Information, die ein einzeiliger Alt-Text niemals vollständig abbilden kann. Der häufigste Fehler ist der Versuch, eine komplette Größentabelle in einen 125-Zeichen-Alt-Text zu quetschen, was zwangsläufig zu unvollständiger oder unbrauchbarer Information führt. Die korrekte Lösung nutzt alt nur für eine kurze Zusammenfassung des Bildzwecks und stellt die vollständige Information zusätzlich als lesbaren Text oder in einer echten HTML-Tabelle direkt neben oder unter dem Bild bereit.

Für komplexere Fälle bietet sich das aria-describedby-Attribut an, das auf einen längeren Beschreibungstext an anderer Stelle im Dokument verweist, während alt weiterhin die kurze Zusammenfassung enthält. Wichtig ist, dass diese längere Beschreibung für sehende Nutzer nicht zwingend sichtbar sein muss, aber niemals mit display: none versteckt werden darf, da manche Screenreader-Kombinationen solche Elemente dann ebenfalls ignorieren. Die CSS-Klasse sr-only mit visuellem Ausblenden bei erhaltener Zugänglichkeit im Accessibility-Tree ist hier das etablierte Muster.

<!-- Infographic with short alt + full data available as real accessible text -->
<figure>
    <img
        src="/media/size-chart-shoes.png"
        alt="Größentabelle Schuhe: EU-Größen 36 bis 46 mit Fußlänge in Zentimetern"
        aria-describedby="size-chart-details"
    >
    <div id="size-chart-details" class="sr-only">
        EU 36 entspricht 22,5 cm Fußlänge. EU 38 entspricht 24 cm.
        EU 40 entspricht 25,5 cm. EU 42 entspricht 27 cm. EU 44 entspricht 28,5 cm.
    </div>
</figure>

<!-- Better long-term: skip the image entirely, use a real HTML table -->
<table>
    <caption>Größentabelle Schuhe</caption>
    <thead><tr><th scope="col">EU-Größe</th><th scope="col">Fußlänge</th></tr></thead>
    <tbody>
        <tr><td>36</td><td>22,5 cm</td></tr>
        <tr><td>38</td><td>24 cm</td></tr>
    </tbody>
</table>

5. Icons, Buttons und dekorative Bilder richtig auszeichnen

Icons kommen in zwei fundamental unterschiedlichen Rollen vor, die jeweils eine andere Behandlung verlangen. Ein Icon, das ausschließlich dekorativ neben einem bereits vorhandenen Textlabel steht, etwa ein kleines Warenkorb-Symbol direkt neben dem sichtbaren Wort In den Warenkorb, braucht keinen eigenen Alt-Text, weil die Funktion bereits vollständig über den Text kommuniziert wird. Ein doppelter Alt-Text mit gleichem Inhalt würde die Ausgabe nur unnötig verlängern und die Interaktion verlangsamen.

Anders bei einem Icon-Button ohne sichtbaren Text, etwa einem reinen Lupen-Symbol für die Suche oder einem X-Symbol zum Schließen eines Modals. Hier trägt das Icon die gesamte Funktionsinformation und muss deshalb entweder über aria-label am Button-Element oder über einen visuell versteckten sr-only-Text beschriftet werden. Wichtig ist dabei, die Funktion zu benennen, nicht das visuelle Aussehen: aria-label="Suche öffnen" ist korrekt, aria-label="Lupensymbol" beschreibt nur die Form und hilft dem Nutzer nicht, die Handlung zu verstehen. Bei SVG-Icons kommt zusätzlich aria-hidden="true" auf das SVG-Element selbst zum Einsatz, wenn das Label bereits auf dem umschließenden Button sitzt, damit der Screenreader das Icon nicht doppelt ankündigt.

Rein dekorative Hintergrund- oder Abstandsbilder wie ornamentale Trennlinien erhalten immer ein leeres alt="" zusammen mit role="presentation", da sie keinerlei Information tragen, die ein Screenreader-Nutzer benötigt.

6. Wann alt="" tatsächlich die richtige Wahl ist

Ein leeres alt="" ist ein legitimes, in der WCAG explizit vorgesehenes Muster und kein Zeichen von Nachlässigkeit. Es signalisiert Screenreadern aktiv, dass ein Bild rein dekorativ ist und beim Vorlesen komplett übersprungen werden soll. Das ist grundlegend anders als ein fehlendes alt-Attribut: Fehlt alt komplett, greifen Screenreader oft auf den Dateinamen zurück oder kündigen das Bild trotzdem als unbekanntes Grafikelement an, was für Nutzer verwirrender ist als ein bewusst leeres Attribut.

Typische Kandidaten für alt="" sind rein gestalterische Trennlinien, Hintergrundmuster, Eckverzierungen, Rahmenelemente und Bilder, deren Information bereits vollständig im umgebenden Text vorhanden ist, etwa ein kleines Häkchen-Icon direkt neben dem Text Auf Lager, der die Verfügbarkeit bereits textuell beschreibt. Die Faustregel: Wenn das Entfernen des Bildes keinerlei Informationsverlust für einen Nutzer bedeuten würde, der die Seite nicht sehen kann, ist alt="" korrekt. Wenn das Bild dagegen eine Information transportiert, die nirgendwo sonst im Text steht, braucht es einen beschreibenden Alt-Text.

Ein häufiger Fehler bei Bewertungssternen in Magento-Produktlisten: Fünf einzelne Stern-Icons mit jeweils alt="Stern" erzeugen eine sinnlose Aneinanderreihung von fünf identischen Ankündigungen. Richtig ist entweder ein leeres alt="" auf jedem einzelnen Stern-Icon kombiniert mit einem aria-label="4,5 von 5 Sternen, 128 Bewertungen" auf dem umschließenden Container, oder ein rein textueller sr-only-Zusatz an derselben Stelle.

7. Alt-Texte in Magento und Hyvä technisch korrekt ausliefern

In Magento wird das Alt-Attribut für Produktbilder standardmäßig aus dem Feld Label der Media-Gallery-Einträge oder, falls dieses leer bleibt, aus dem Produktnamen generiert. Genau dieser Fallback ist die Hauptursache für generische, wenig hilfreiche Alt-Texte im Katalog: Redakteure pflegen Produktbilder hoch, ohne das Label-Feld auszufüllen, und jedes Bild eines Produkts erhält automatisch denselben Alt-Text. Ein ViewModel, das die Media-Gallery-Daten aufbereitet, sollte deshalb prüfen, ob ein gepflegtes Label vorliegt, und nur im echten Fallback-Fall auf den Produktnamen zurückgreifen, kombiniert mit der Positionsangabe im Bild-Array.

In Hyvä-Templates lohnt sich ein zentraler Helper oder ein ViewModel, das escapeHtmlAttr() konsequent auf jeden Alt-Text anwendet, um HTML-Injection über gepflegte Redaktionsdaten zu verhindern, und gleichzeitig eine Längenbegrenzung durchsetzt, damit versehentlich eingefügte Fließtexte nicht als 800-Zeichen-Alt-Text im Frontend landen. Für importierte Produktdaten aus PIM-Systemen oder Lieferanten-Feeds empfiehlt sich eine Validierungsregel im Import-Prozess, die leere oder als Dateiname erkennbare Alt-Texte automatisch markiert, statt sie stillschweigend zu übernehmen.

{
  "media_gallery_entry": {
    "id": 4821,
    "label": "Roter Wanderschuh, Sohlenprofil im Detail",
    "position": 3,
    "types": ["image", "small_image"],
    "file": "/h/i/hiking-boot-red-sole.jpg"
  },
  "fallback_rule": "Wenn label leer: '{product_name}, Ansicht {position}' statt reiner Produktname-Wiederholung",
  "validation": {
    "min_length": 10,
    "max_length": 150,
    "reject_if_equals_filename": true,
    "reject_if_starts_with": ["Bild von", "Foto von", "Grafik zeigt", "IMG_", "DSC_"]
  }
}

8. Bestehenden Katalog auf echte Alt-Text-Qualität prüfen

Ein reiner Vollständigkeits-Check, der nur meldet, ob das alt-Attribut überhaupt einen Wert enthält, übersieht die eigentlichen Qualitätsprobleme fast vollständig. Ein automatisiertes Audit-Skript sollte deshalb mehrere Heuristiken kombinieren: Ist der Alt-Text identisch mit dem Dateinamen? Beginnt er mit einer der bekannten Füllphrasen wie Bild von oder Foto von? Ist er kürzer als zehn Zeichen und damit vermutlich zu generisch? Ist er länger als 250 Zeichen und damit vermutlich ein kopierter Fließtext statt einer echten Beschreibung? Wiederholt sich exakt derselbe Alt-Text bei mehr als drei verschiedenen Produkten, was auf eine massenhaft kopierte Vorlage hindeutet?

Ein solches Skript lässt sich als CLI-Befehl gegen die Magento-Datenbank fahren und liefert eine priorisierte Liste statt einer reinen Ja-Nein-Abdeckungsquote. Wichtig für die Praxis: Automatisierte Heuristiken erkennen technische Symptome schlechter Alt-Texte zuverlässig, können aber inhaltliche Richtigkeit nicht beurteilen, etwa ob eine Farbbezeichnung tatsächlich zum Bild passt. Ein automatisiertes Audit ist deshalb die erste Filterstufe, die Kandidaten für eine manuelle Redaktions-Stichprobe liefert, kein Ersatz für menschliche Prüfung bei den am häufigsten aufgerufenen Produktseiten.

// Node.js audit script: flag catalog images with low-quality alt text
const fillerPhrases = ['bild von', 'foto von', 'grafik zeigt', 'image of', 'photo of'];
const filenamePattern = /^(img|dsc|photo)[_-]?\d+/i;

function auditAltText(altText, filename) {
  const issues = [];
  const normalized = (altText || '').trim().toLowerCase();

  if (!normalized) issues.push('EMPTY_OR_MISSING');
  if (normalized === filename.toLowerCase()) issues.push('EQUALS_FILENAME');
  if (filenamePattern.test(normalized)) issues.push('LOOKS_LIKE_FILENAME');
  if (fillerPhrases.some(p => normalized.startsWith(p))) issues.push('FILLER_PREFIX');
  if (normalized.length > 0 && normalized.length < 10) issues.push('TOO_SHORT');
  if (normalized.length > 250) issues.push('TOO_LONG_LIKELY_COPY_PASTE');

  return { altText, filename, issues, needsReview: issues.length > 0 };
}

// Usage against exported product image data
const results = productImages.map(img => auditAltText(img.alt, img.filename));
const flagged = results.filter(r => r.needsReview);
console.log(`${flagged.length} of ${results.length} images flagged for manual review`);

9. Alt-Texte im direkten Vergleich: schlecht vs. gut

Die folgende Übersicht fasst die häufigsten Bildtypen im Magento-Katalog zusammen und stellt jeweils ein typisches schlechtes Muster einem konkret verbesserten Alt-Text gegenüber.

Der gemeinsame Nenner aller fünf Beispiele: Ein guter Alt-Text entsteht nicht durch eine längere Zeichenkette, sondern durch die bewusste Entscheidung, welche Information an dieser Stelle für einen Screenreader-Nutzer tatsächlich fehlen würde. Diese Entscheidung lässt sich teilweise automatisieren und prüfen, erfordert bei Produktbildern mit vielen Varianten und Perspektiven aber weiterhin redaktionelle Sorgfalt beim Anlegen der Media-Gallery-Einträge.

10. Zusammenfassung

Ein guter Alt-Text ist kein Pflichtfeld, das mit dem Produktnamen befüllt wird, sondern eine funktionale Textalternative, die sich am Bildtyp und am umgebenden Kontext orientiert. Produktfotos brauchen Details, die nur im Bild sichtbar sind und den Produktnamen sinnvoll ergänzen, statt ihn zu wiederholen. Infografiken und Größentabellen gehören zusätzlich als echter Text oder echte HTML-Tabelle bereitgestellt, weil ein einzeiliger Alt-Text komplexe Information nicht transportieren kann. Icon-Buttons ohne sichtbaren Text brauchen ein funktionsbeschreibendes aria-label, während rein dekorative Bilder ein bewusst leeres alt="" erhalten sollten.

Der größte Hebel für bestehende Magento-Kataloge liegt selten in der einmaligen Korrektur, sondern in der strukturellen Absicherung: ein ViewModel, das Fallback-Logik sauber implementiert, eine Importvalidierung, die generische Muster automatisch markiert, und ein wiederkehrendes Audit-Skript, das neue Qualitätsprobleme erkennt, bevor sie sich über tausende Produkte vervielfachen. Automatisierte Heuristiken ersetzen dabei keine redaktionelle Prüfung, liefern aber die notwendige Priorisierung, um die Prüfung auf die relevantesten Fälle zu konzentrieren.

11. FAQ: Alt-Texte richtig schreiben