
Wie man guten Alt-Text schreibt: Vollständiger Leitfaden für Barrierefreiheit und SEO
Erfahren Sie, wie Sie effektiven Alt-Text für Bilder verfassen. Entdecken Sie Best Practices für Barrierefreiheit, SEO-Optimierung und spezifische Richtlinien f...
+++ term = “Was ist Alt-Text?” lastmod = “2026-10-08” title = “Was ist Alt-Text?” keywords = [ “Alt-Text”, “Alt-Text Barrierefreiheit”, “Alt-Text Bezug”, “Alt-Text hinzufügen”, “Alt-Text schreiben”, “effektiver Alt-Text”, “alt”, “Text” ] url = “/affiliatemarketing-glossar/alt-text/” aliases = [ “/affiliate-marketing-glossary/alt-text/” ] description = “Alt-Text beschreibt Bilder in HTML. Erfahren Sie, was Alt-Text ist, warum er wichtig ist und wie Sie ihn richtig schreiben.” date = “2024-11-07 10:49:27” image = "" shortDescription = “Alt-Text – kurz für Alternativtext – ist eine Textbeschreibung, die über das alt-Attribut eines Bildes in HTML bereitgestellt wird.” tags = [ “SEO”, “Accessibility”, “AltText”, “AffiliateMarketing”, “BestPractices” ] categories = [ “Glossary” ] showCTA = true ctaHeading = “Verbessern Sie Ihre Website mit korrektem Alt-Text” ctaDescription = “Optimieren Sie Ihre Website für Barrierefreiheit und Suchmaschinen zugleich. Entdecken Sie, wie effektiver Alt-Text Ihre Affiliate-Marketing-Ergebnisse verbessern kann.” ctaPrimaryText = “Weitere SEO-Tipps” ctaPrimaryURL = “/blog/” ctaSecondaryText = “Kostenlose Testversion starten” ctaSecondaryURL = “/trial/”
[[faq]] question = “Kann jeder den Alt-Text sehen?” answer = “Sehende Nutzer sehen den Alt-Text normalerweise nicht, es sei denn, ein Bild kann nicht geladen werden. Screenreader-Nutzer hören ihn. Entwickler und Redakteure können ihn sehen, indem sie das HTML untersuchen oder die Entwicklertools des Browsers verwenden. Einige Browser ermöglichen es Nutzern, den Alt-Text zu sehen, indem sie mit der rechten Maustaste auf ein Bild klicken und "Untersuchen" oder "Bildinformationen anzeigen" wählen.”
[[faq]] question = “Wie lang sollte Alt-Text sein?” answer = “Die meisten Richtlinien empfehlen, Alt-Text unter 125 Zeichen zu halten. Siteimprove empfiehlt etwa 100 Zeichen als praktisches Maximum. Wenn ein Bild eine längere Beschreibung erfordert – etwa ein komplexes Diagramm oder eine Infografik –, liefern Sie eine kurze Alt-Text-Zusammenfassung und fügen Sie die vollständige Erklärung im umgebenden Fließtext oder auf einer verlinkten Seite mit ausführlicher Beschreibung ein.”
[[faq]] question = “Braucht jedes Bild Alt-Text?” answer = “Jedes <img>-Tag benötigt ein alt-Attribut, aber nicht jedes Bild braucht beschreibenden Alt-Text. Dekorative Bilder sollten ein leeres alt=""-Attribut verwenden. Informative und funktionale Bilder benötigen aussagekräftigen, kontextgerechten Alt-Text. Die wichtigste Regel: Das alt-Attribut muss immer vorhanden sein, auch wenn sein Wert leer ist.”
[[faq]] question = “Was ist ein Beispiel für guten Alt-Text?” answer = “Schlecht: alt="Image of a dog"
Die gute Version beschreibt, worauf es im Bild ankommt, ohne Worte an "image of" zu verschwenden – das liefert der Screenreader bereits.”
[[faq]] question = “Kann ich Alt-Text für Keyword-Stuffing verwenden?” answer = “Nein. Keyword-Stuffing im Alt-Text – etwa alt="cheap shoes buy shoes best shoe deals discount footwear" – schadet der Barrierefreiheit, weil es unverständliche Screenreader-Ausgabe erzeugt, und kann manuelle Maßnahmen von Suchmaschinen auslösen. Verwenden Sie Keywords nur, wenn sie das Bild wirklich beschreiben.”
[[faq]] question = “Was ist der Unterschied zwischen Alt-Text und einer Bildunterschrift?” answer = “Alt-Text liefert eine Textentsprechung eines Bildes für Nutzer, die es nicht sehen können. Eine Bildunterschrift (oft in einem <figcaption>-Element) ist für alle Nutzer sichtbar und fügt in der Regel Kontext, Quellenangabe oder Kommentare hinzu. Sie erfüllen unterschiedliche Zwecke und können an demselben Bild nebeneinander existieren – sie sollten jedoch nicht identisch sein. Wenn beides vorhanden ist, sollte der Alt-Text das Bild beschreiben und die Bildunterschrift Informationen hinzufügen, die aus dem Bild allein nicht ersichtlich sind.”
[[lnks]] text = “Keyword-Stuffing” path = “/faq/can-i-overuse-keywords-affiliate-content/” title = “Erfahren Sie, warum Keyword-Stuffing dem Affiliate-SEO schadet und wie Sie Keywords auf natürliche Weise optimieren. Entdecken Sie bewährte Methoden, um Google-Strafen zu vermeiden und 2025 starke Rankings zu halten.”
[[lnks]] text = “mit HTML vertraut” path = “/faq/how-to-add-image-html/” title = “Erfahren Sie, wie Sie Bilder mit dem img-Tag in HTML einfügen. Entdecken Sie bewährte Methoden für src- und alt-Attribute, responsive Bilder und Optimierungstechniken für die Web-Performance.”
[[lnks]] text = “Affiliate-Marketing” path = “/affiliate-marketing-glossary/seo-affiliates/” title = “SEO-Affiliates, auch Such-Affiliates genannt, helfen Ihnen, das Ranking Ihrer Website auf der Suchergebnisseite zu verbessern. Entdecken Sie, wie SEO-Affiliates mit Expertenstrategien organischen Traffic erzeugen und den Erfolg im Affiliate-Marketing steigern.”
[[lnks]] text = “Bereich des Affiliate” path = “/faq/visual-content-affiliate-campaigns/” title = “Entdecken Sie, warum visuelle Inhalte für den Erfolg im Affiliate-Marketing entscheidend sind. Erfahren Sie, wie Bilder, Videos und Infografiken Engagement, Conversions und ROI im Jahr 2025 steigern.”
[[lnks]] text = “Affiliate-Marketer” path = “/faq/html-benefits-affiliate-marketers/” title = “Entdecken Sie, wie HTML Affiliate-Marketer mit SEO-Optimierung, mobiler Darstellung, Conversion-Tracking und einer verbesserten User Experience unterstützt, um höhere Verkäufe und mehr Engagement zu erzielen.”
[[lnks]] text = “wie "Bild von" oder "Foto von"” path = “/faq/what-does-good-alt-text-look-like/” title = “Erfahren Sie anhand praktischer Beispiele, wie guter Alt-Text aussieht. Entdecken Sie bewährte Methoden für präzisen, spezifischen Alt-Text, der die Barrierefreiheit und das SEO Ihrer Website verbessert.”
[[lnks]] text = “Web-Barrierefreiheit” path = “/faq/how-to-write-good-alt-text/” title = “Erfahren Sie, wie Sie effektiven Alt-Text für Bilder schreiben. Entdecken Sie bewährte Methoden für Barrierefreiheit, SEO-Optimierung und spezifische Richtlinien für verschiedene Bildtypen.” +++
Alt-Text – kurz für Alternativtext – ist eine Textbeschreibung, die über das alt-Attribut eines Bildes in HTML bereitgestellt wird. Er vermittelt den Zweck und die wesentlichen Informationen eines Bildes, wenn dieses nicht zu sehen ist.
Screenreader sagen den Alt-Text für Nutzer vor, die blind oder sehbehindert sind. Browser zeigen den Alt-Text anstelle eines Bildes an, wenn die Bilddatei nicht geladen werden kann. Suchmaschinen lesen den Alt-Text, um zu verstehen, was ein Bild darstellt und wie es zum umgebenden Seiteninhalt passt.
Das alt-Attribut ist seit HTML 2.0 (1995) Teil der HTML-Spezifikation. Was sich im Laufe der Zeit geändert hat, ist nicht seine technische Funktion, sondern die Qualitätsstandards rundherum – moderne Barrierefreiheitsrichtlinien wie WCAG 2.2 und Section 508 verlangen Alt-Text, der Bedeutung vermittelt und nicht nur ein Etikett ist.
Ein Bild-Tag mit Alt-Text folgt dieser Struktur:
<img src="golden-retriever-beach.jpg" alt="Golden retriever running on a sandy beach at sunset">
src-Attribut verweist auf den Speicherort der Bilddatei. Das alt-Attribut enthält die Textbeschreibung.Nein – auch wenn die Begriffe im Alltag oft synonym verwendet werden. “Alt-Tag” ist ein umgangssprachlicher Ausdruck. Der korrekte fachliche Begriff ist alt-Attribut, denn alt ist ein Attribut des <img>-Elements und kein eigenständiges HTML-Tag. In der Praxis beziehen sich “Alt-Text”, “alt-Attribut” und “Alternativtext” alle auf dasselbe Konzept.
Alt-Text bedient drei verschiedene Zielgruppen, jeweils mit unterschiedlichen Bedürfnissen.
Viele nutzen Screenreader – Software, die Bildschirminhalte in Sprache oder Brailleschrift umwandelt.
Das ist kein optionales Extra; es ist eine funktionale Anforderung gemäß den Web Content Accessibility Guidelines (WCAG) 2.2, konkret dem Erfolgskriterium 1.1.1 (Nicht-Text-Inhalte).
Screenreader-Nutzer verlassen sich auf Alt-Text, um Produktseiten zu navigieren, Infografiken zu verstehen, Schaltflächen zu erkennen und die volle Bedeutung einer Seite zu erfassen. Fehlender oder schlecht geschriebener Alt-Text schließt diese Nutzer vollständig vom Gespräch aus.
Bilder können kaputtgehen. Eine langsame Verbindung, ein Serverfehler, eine gelöschte Datei, ein E-Mail-Client, der Bilder standardmäßig blockiert – all das kommt häufig vor. Wenn ein Bild nicht lädt und kein Alt-Text vorhanden ist, sehen die Nutzer entweder nichts oder einen kryptischen Dateinamen.
Alt-Text bietet einen Ersatz, der die Bedeutung bewahrt. Im E-Mail-Marketing – wo das Blockieren von Bildern weit verbreitet ist – entscheidet Alt-Text oft darüber, ob ein Empfänger die Nachricht überhaupt versteht. Für Affiliate-Marketer, die Werbe-E-Mails versenden, kann Alt-Text auf Produktbildern den Unterschied zwischen einem Klick und dem Löschen ausmachen.
Suchmaschinen nutzen Alt-Text zusammen mit Dateinamen, umgebendem Text und Seitenstruktur, um Bilder zu indexieren. Googles eigene Dokumentation bestätigt, dass Alt-Text der Suchmaschine hilft zu verstehen, was ein Bild zeigt und wie es zum Thema der Seite passt.
Bilder mit beschreibendem, präzisem Alt-Text erscheinen eher in den Ergebnissen der Google-Bildersuche – einem Kanal, der unabhängig von der normalen Websuche Traffic erzeugt. Für E-Commerce- und Affiliate-Websites kann die Bildersuche eine bedeutende Traffic-Quelle sein, wenn Produktbilder mit passendem Alt-Text versehen sind.
Ja – mit einer Einschränkung. KI-Systeme nutzen zunehmend Computer Vision, um Bilder direkt zu analysieren. Wenn ein KI-Modell eine Seite jedoch hauptsächlich über ihren Text und ihr HTML verarbeitet (wie es Such-Crawler und einige Inhalts-Indexierungs-Tools tun), liefert der Alt-Text ein explizites, vom Autor verfasstes Signal darüber, was das Bild im Kontext bedeutet. Das ist besonders relevant, da KI-gestützte Suchfunktionen – etwa Googles AI Overviews – Seiteninhalte zusammenfassen, um Nutzeranfragen zu beantworten.
Die Entscheidung, Alt-Text zu schreiben, hängt vom Zweck des Bildes ab. Die W3C Web Accessibility Initiative kategorisiert Bilder in mehrere Typen, die jeweils unterschiedliche Alt-Text-Anforderungen haben.
Bilder, die für die Seite relevante Informationen vermitteln, benötigen beschreibenden Alt-Text. Fragen Sie sich: Wenn dieses Bild verschwände, würde der Leser bedeutungsvollen Inhalt verlieren? Wenn ja, schreiben Sie Alt-Text, der die Informationen vermittelt, die das Bild liefert.
Funktionale Bilder lösen Aktionen aus – sie erscheinen in Schaltflächen, Links oder anderen interaktiven Elementen. Ihr Alt-Text sollte die Aktion beschreiben, nicht das Bild selbst.
Beispiel: Ein Lupen-Symbol in einer Suchschaltfläche benötigt alt="Search", nicht alt="Magnifying glass icon".
Bei funktionalen Bildern müssen Nutzer wissen, was passiert, wenn sie klicken – nicht, wie das Symbol aussieht.
Text sollte nach Möglichkeit echter HTML-Text sein und nicht in ein Bild eingebettet. Wenn Textbilder unvermeidbar sind (Banner, Werbegrafiken, einige Social-Media-Vorlagen), sollte der Alt-Text den exakten Text des Bildes wiedergeben.
Beispiel: Ein Werbebanner mit der Aufschrift “20 % Rabatt auf alle Tarife – Code SUMMER20 verwenden” sollte Alt-Text enthalten, der genau diese Worte wiedergibt.
Dekorative Bilder erfüllen keinen informativen oder funktionalen Zweck – sie existieren rein für die visuelle Atmosphäre. Hintergrundmuster, allgemeine Stockfotos als Abschnittstrenner und rein dekorative Symbole fallen in diese Kategorie.
Für dekorative Bilder verwenden Sie ein leeres alt-Attribut: alt="". Das wird auch als Null-Alt-Text bezeichnet.
Das ist das korrekte Verhalten; das Ansagen dekorativer Bilder erzeugt nur Lärm, ohne Bedeutung hinzuzufügen.
Wichtiges Detail: Das alt-Attribut muss dennoch vorhanden sein, nur eben leer. Wenn das alt-Attribut ganz weggelassen wird (<img src="decorative.jpg">), sind Screenreader gezwungen, den Dateinamen vorzulesen – eine schlechtere Erfahrung als Null-Alt-Text.
Wenn ein Bild Informationen wiederholt, die bereits im umgebenden Text stehen, erzeugt das Hinzufügen von Alt-Text eine Dopplung. Wenn eine Produktkarte beispielsweise ein Bild von “Wireless Bluetooth Headphones” neben einer Überschrift zeigt, die “Wireless Bluetooth Headphones” lautet, sollte der Alt-Text leer sein – alt="" –, weil die Information für Screenreader-Nutzer bereits über die Überschrift verfügbar ist.
Der Unterschied zwischen brauchbarem Alt-Text und nutzlosem Alt-Text hängt oft von ein paar grundlegenden Prinzipien ab.
Beschreiben Sie die Informationen, die das Bild vermittelt, nicht jedes visuelle Detail. Ein Foto einer wandernden Person braucht nicht die Farbe der Schnürsenkel – es braucht die Handlung, den Kontext und alle Details, die für den umgebenden Inhalt relevant sind.
Der meiste effektive Alt-Text bleibt unter 125 Zeichen. Screenreader machen an Satzzeichen Pausen, daher wird langer, ununterbrochener Alt-Text zu einer Klangmauer. Siteimprove empfiehlt, Alt-Text nach Möglichkeit unter etwa 100 Zeichen zu halten.
Dasselbe Bild kann je nach Erscheinungsort unterschiedlichen Alt-Text benötigen. Ein Foto eines Laptops auf einem Schreibtisch könnte auf einer Produktseite Alt-Text brauchen, der das Laptop-Modell beschreibt, oder auf einem Blog über Produktivität Alt-Text, der eine Remote-Arbeitsszene beschreibt.
Schreiben Sie Alt-Text immer für die Rolle des Bildes auf der konkreten Seite, nicht für das Bild isoliert.
Alt-Text dient in erster Linie der Barrierefreiheit. Verwenden Sie relevante Begriffe nur, wenn sie das Bild natürlich beschreiben.
Screenreader kündigen ein Bild bereits als Bild an.
Schreiben Sie den ersten Buchstaben groß. Beenden Sie Sätze mit einem Punkt. Screenreader nutzen die Zeichensetzung, um Tempo und Betonung zu bestimmen. Grammatikalisch korrekter Alt-Text klingt natürlicher und ist leichter zu verstehen.
Wenn das alt-Attribut in einem <img>-Tag vollständig fehlt, verhält es sich unterschiedlich:
DSC00472.jpg.Ein Bild mit fehlendem alt-Attribut unterscheidet sich grundlegend von einem mit leerem alt="". Ersteres erzeugt Verwirrung; Letzteres ist eine bewusste Entscheidung, die assistiven Technologien mitteilt, das Bild zu überspringen. Jedes <img>-Tag auf einer Seite sollte ein alt-Attribut haben – ob ausgefüllt oder leer.
Die meisten CMS-Plattformen – WordPress, HubSpot, Shopify und andere – verfügen über ein Alt-Text-Feld in der Bild-Upload- oder Medienbibliothek-Oberfläche.
In WordPress erscheint das Feld “Alternativtext”, wenn Sie ein Bild im Block-Editor oder in der Medienbibliothek auswählen, im rechten Einstellungsbereich. Geben Sie Ihre Beschreibung ein und speichern Sie. Das CMS fügt das alt-Attribut automatisch zum HTML hinzu.
Fügen Sie das alt-Attribut direkt innerhalb des <img>-Tags hinzu:
<img src="affiliate-dashboard.jpg" alt="Post Affiliate Pro dashboard showing monthly commission summary">
alt-Attribut kann an beliebiger Stelle innerhalb des <img>-Tags stehen, auch wenn es üblich ist, es nach src zu platzieren.Die meisten Social-Media-Plattformen bieten beim Erstellen eines Beitrags mit Bild eine Alt-Text-Option an:
Ersetzen Sie automatisch generierten Alt-Text immer durch eine von Menschen geschriebene Beschreibung. KI-generierter Alt-Text neigt zu generischen Etiketten – “Hund, Innenraum, Person” –, die den Zweck und Kontext des Bildes verfehlen.
Alt-Text spielt in Affiliate-Marketing-Workflows eine besondere und oft übersehene Rolle und betrifft Werbetreibende, Publisher und Programmmanager gleichermaßen.
Wenn Sie Ihren Affiliates Banner, Produktbilder und Werbe-Creatives bereitstellen, kommen diese Bilder selten mit Alt-Text. Affiliates, die eine Bilddatei über ein Affiliate-Dashboard erhalten, wissen möglicherweise nicht, was sie schreiben sollen – und viele lassen das alt-Attribut leer oder weg.
Programmmanager, die im Affiliate-Portal zu jedem Creative vorgeschlagenen Alt-Text bereitstellen, beseitigen diese Hürde.
Produktbewertungsbeiträge und Vergleichsartikel stützen sich stark auf Screenshots, Produktfotos und als Bilder gerenderte Vergleichstabellen. Jedes dieser Bilder braucht Alt-Text, der sowohl dem Leser als auch der Suchmaschine dient.
Wenn Screenreader-Nutzer auf diesen Alt-Text stoßen, erhalten sie dieselben Informationen, die ein sehender Leser aus dem Screenshot gewinnt. Wenn Suchmaschinen diesen Alt-Text indexieren, kann das Bild bei relevanten Suchanfragen zu Affiliate-Provisionseinstellungen auftauchen.
Produktbilder mit präzisem, beschreibendem Alt-Text können in der Google-Bildersuche für Longtail-Anfragen ranken. Dieser Bildklick führt zur Seite – und möglicherweise zu einer Anmeldung.
Das ist kein Ersatz für schriftliche Inhalte und Standard-SEO. Es ist ein zusätzlicher Kanal mit geringem Aufwand, der nur funktioniert, wenn Alt-Text konsequent eingesetzt wird.
Verwalten Sie mehrere Affiliate-Programme und verbessern Sie die Leistung Ihrer Affiliate-Partner mit Post Affiliate Pro.

Erfahren Sie, wie Sie effektiven Alt-Text für Bilder verfassen. Entdecken Sie Best Practices für Barrierefreiheit, SEO-Optimierung und spezifische Richtlinien f...

Erfahren Sie anhand praktischer Beispiele, wie guter Alt-Text aussieht. Entdecken Sie Best Practices für das Verfassen von prägnantem, spezifischem Alt-Text, de...

Erfahren Sie, wie Sie Bilder in HTML mit dem img-Tag hinzufügen. Entdecken Sie Best Practices für src-, alt-Attribute, responsive Bilder und Optimierungstechnik...
Cookie-Zustimmung
Wir verwenden Cookies, um Ihr Surferlebnis zu verbessern und unseren Datenverkehr zu analysieren. See our privacy policy.