Alt-Text (Alt-Attribut)

Der Alt-Text ist ein Textattribut im HTML-Code eines Bildes. Er beschreibt Screenreadern, was auf dem Bild zu sehen wäre, und informiert Suchmaschinen über den Bildinhalt. Seit dem Barrierefreiheitsstärkungsgesetz ist die konsequente Nutzung von Alt-Texten für viele Website-Betreiber in Deutschland keine Kür mehr, sondern Pflicht.

Was ist ein Alt-Text?

Alt-Text steht für Alternativtext. Er erscheint im HTML-Code als alt-Attribut innerhalb eines img-Tags, zum Beispiel: alt="Schwarze Ledertasche mit goldenem Reißverschluss auf einem Holztisch". Das Attribut ist für Besucher unsichtbar, die ein Bild normal im Browser sehen.

Aktiv wird der Alt-Text in drei Situationen: wenn ein Bild nicht geladen werden kann, wenn ein Screenreader die Seite vorliest, oder wenn eine Suchmaschine den Seiteninhalt analysiert. In allen drei Situationen tritt der Alt-Text an die Stelle des Bildes. Er ist der einzige Zugang zum visuellen Inhalt für alle, die ihn nicht direkt sehen können.

Das Attribut selbst ist technisch einfach. Seine Wirkung ist es nicht: Ein fehlender, leerer oder inhaltsleerer Alt-Text kann gleichzeitig die Barrierefreiheit verletzen, das Suchmaschinenranking schwächen und eine gesetzliche Anforderung verfehlen.

Wozu dient der Alt-Text?

Der Alt-Text hat drei voneinander unabhängige Aufgaben, die alle gleichzeitig gelten:

• Barrierefreiheit: Screenreader und Braille-Zeilen lesen den Alt-Text vor. Für blinde und sehbehinderte Nutzer ist er der einzige Zugang zum Bildinhalt.
• Ersatzanzeige: Lädt ein Bild nicht, zeigt der Browser den Alt-Text statt einer leeren Fläche. Das passiert bei schlechten Verbindungen oder wenn Bilder im Browser deaktiviert sind.
• Suchmaschinenoptimierung: Google und andere Suchmaschinen können Bilder nicht direkt interpretieren. Der Alt-Text liefert den Textkontext für die Google Bildersuche und stärkt die inhaltliche Relevanz der Seite insgesamt.

Diese drei Aufgaben überschneiden sich. Ein Alt-Text, der den Bildinhalt präzise und in Kontext beschreibt, erfüllt alle drei gleichzeitig, ohne dass man sie einzeln optimieren müsste.

Wie schreibt man einen guten Alt-Text?

Ein guter Alt-Text beschreibt, was auf dem Bild zu sehen ist, und zeigt an, welche Funktion das Bild im Kontext der Seite trägt. In der Praxis entstehen zwei entgegengesetzte Fehler: zu wenig Beschreibung (ein unbearbeiteter Dateiname wie "DSC09143.jpg") oder zu viele Keywords, die keine Beschreibung mehr sind.

Diese Regeln helfen beim richtigen Maß:

• Maximal ca. 125 Zeichen: Viele Screenreader kürzen bei längeren Texten ab. Kürze schärft die Beschreibung.
• Kein "Bild von" oder "Foto zeigt": Screenreader kündigen das Bild bereits als Bild an. Diese Einleitung ist überflüssig.
• Keyword nur, wenn er zum Bild passt: Beschreibt das Ziel-Keyword das Bildmotiv, gehört es hinein. Erzwungene Keywords schaden mehr als sie nützen.
• Keine Doppelung der Bildunterschrift: Alt-Text und Bildunterschrift haben unterschiedliche Rollen. Der Alt-Text gilt für Nutzer ohne visuellen Zugang; die Bildunterschrift richtet sich an alle Besucher.

Ein Beispiel, das die drei Qualitätsstufen zeigt: Ein Bild zeigt einen Webdesigner am Dual-Monitor-Setup.

• Schwach: "Mann am Computer"
• Besser: "Webdesigner erstellt ein Website-Layout"
• Gut: "Webdesigner gestaltet eine Unternehmenswebsite im Webflow-Designer am Dual-Monitor-Setup"

Das dritte Beispiel ist nicht länger um der Länge willen. Es nennt Werkzeug, Aufgabe und Setting, weil das die relevante Information auf dieser Seite wäre. Eine Beschreibung, die mehr Kontext erfordert, gehört in den umliegenden Fließtext.

Im Rahmen einer systematischen Webflow SEO-Optimierung spielt der Alt-Text als Teil der Bilder-SEO eine messbare Rolle. Bilder mit präzisen Alternativtexten tauchen häufiger in der Google Bildersuche auf und tragen zur inhaltlichen Relevanz der gesamten Seite bei.

Dekorative Bilder: Wann bleibt das Alt-Attribut leer?

Nicht jedes Bild auf einer Website braucht eine Beschreibung. Rein dekorative Elemente, die keine inhaltliche Information tragen, erhalten ein leeres Alt-Attribut: alt="". Der Screenreader erkennt das leere Attribut als Signal und überspringt das Bild stillschweigend. Das verbessert den Lesefluss für sehbehinderte Nutzer, weil bedeutungslose Elemente nicht vorgelesen werden.

Der Unterschied zwischen einem leeren und einem fehlenden Attribut ist hier entscheidend:

• alt="" (leer): Das Bild ist dekorativ. Der Screenreader überspringt es. Das ist korrekt.
• Kein alt-Attribut: Viele Screenreader lesen in diesem Fall den Dateinamen vor, zum Beispiel "IMG_4729.jpg". Das ist nie gewünscht und wird von Barrierefreiheits-Audits als Fehler gewertet.

Typische dekorative Bilder: grafische Trennlinien, abstrakte Hintergrundflächen, wiederkehrende strukturelle Elemente ohne inhaltlichen Wert. Entscheidend ist immer die Funktion des Bildes im Seitenkontext, nicht sein Aussehen.

Alt-Text und das Barrierefreiheitsstärkungsgesetz

Das Barrierefreiheitsstärkungsgesetz (BFSG) verpflichtet private Unternehmen in Deutschland seit dem 28. Juni 2025 zur digitalen Barrierefreiheit. Grundlage sind die Web Content Accessibility Guidelines (WCAG) 2.1 auf Level AA.

Alt-Texte sind ein Kernelement dieser Anforderungen. WCAG-Kriterium 1.1.1 ("Nicht-Text-Inhalt") verlangt eine Textalternative für jedes nicht-textuelle Element. Fehlen Alt-Texte oder sind sie inhaltsleer, gilt das als Verstoß gegen dieses Kriterium.

Betroffen sind Unternehmen, die digitale Produkte und Dienstleistungen im B2C-Bereich anbieten: E-Commerce-Shops, Banken, Reiseanbieter und Buchungsplattformen. Öffentliche Stellen unterliegen bereits länger der BITV 2.0. Wer eine neue Website aufbaut oder bestehende Inhalte grundlegend überarbeitet, sollte Alt-Texte von Anfang an als Pflichtfeld mitdenken und nicht als nachträgliche Korrektur.

Alt-Texte in Webflow pflegen

In Webflow lassen sich Alt-Texte an drei verschiedenen Stellen setzen, je nachdem, wie das Bild in die Seite kommt:

• Im Designer: Jedes Bild-Element hat in der rechten Einstellungsleiste ein dediziertes Alt-Text-Feld. Webflow übernimmt standardmäßig den Dateinamen, wenn dieses Feld leer bleibt.
• Im Asset Manager: Für Bilder, die über den Asset Manager hochgeladen werden, lässt sich ein Standard-Alt-Text hinterlegen. Dieser gilt als Voreinstellung, wenn das Bild später in eine Seite eingefügt wird.
• Im CMS: Bei Webflow CMS Collections können Bild-Felder um ein eigenes Alt-Text-Feld ergänzt werden. Redakteure pflegen dann Bild und Alternativtext gemeinsam in einem Schritt.

Der häufigste Fehler in Webflow: Der Standardwert aus dem Dateinamen bleibt unverändert. "hero-banner-v3-FINAL.png" ist für Screenreader bedeutungslos und zieht den Barrierefreiheitsscore der gesamten Seite nach unten.

Für Teams mit mehreren Redakteuren empfiehlt sich eine kurze interne Guideline: Welche Felder sind Pflicht? Was gehört in den Alt-Text, was in die Bildunterschrift? Wer trägt die Verantwortung? Diese Fragen vorab zu klären spart spätere Korrekturrunden.

Häufige Fehler beim Alt-Text

Die meisten Alt-Text-Probleme entstehen nicht durch fehlendes Wissen, sondern durch fehlende Routine. Diese Fehler tauchen am häufigsten auf:

• Dateiname als Alt-Text: "DSC04827.jpg" oder "website-image-01.png" beschreiben nichts.
• Keyword-Stuffing: Eine Liste von Keywords ohne Beschreibungscharakter schadet dem SEO-Signal und belastet Screenreader-Nutzer.
• Identische Texte für alle Bilder: "Produktbild" für dreißig verschiedene Produkte ist keine Beschreibung.
• Fehlendes Alt-Attribut: Ohne das Attribut lesen viele Screenreader den Dateinamen vor.
• Zu langer Alt-Text: Ab ca. 125 Zeichen kürzen Screenreader ab. Mehr Kontext gehört in den umliegenden Fließtext.

Für Betreiber einer Webflow-Website für Unternehmen lässt sich die Alt-Text-Prüfung gut in den regulären Content-Pflegeprozess integrieren: als fester Schritt bei jedem neuen Bild-Upload und periodisch als Teil eines Barrierefreiheits-Audits.

Alt-Text und Title-Attribut: Der Unterschied

Das Title-Attribut (title="…") bei Bildern ist kein Ersatz für den Alt-Text. Es erscheint beim Überfahren mit der Maus als Tooltip und wird von Screenreadern unterschiedlich behandelt. Manche lesen es vor, manche ignorieren es. Für Barrierefreiheit und SEO ist das alt-Attribut das relevante Feld.

Das title-Attribut kann ergänzend gesetzt werden, wenn ein kurzer Tooltip für Mausnutzer sinnvoll ist. Eine Pflichtfunktion hat es nicht. Wer die zwei Attribute verwechselt und den Alt-Text leer lässt, erfüllt weder die WCAG-Anforderungen noch die Erwartungen der Suchmaschinen.