Alt Texte schreiben für Websites und Webshops

Ein Produktfoto ohne Beschreibung, ein Diagramm ohne Erklärung oder ein wichtiges Teambild, dessen Kontext fehlt: Für Menschen, die eine Website mit Screenreader nutzen, bleiben solche Inhalte unsichtbar. Alt Texte schreiben ist deshalb keine kleine SEO-Aufgabe am Ende eines Projekts. Es ist ein konkreter Teil guter Inhalte, barrierefreier Webgestaltung und professioneller Kommunikation.

Gerade für KMU ist das Thema gut beherrschbar, wenn es von Beginn an in den Redaktions- und Pflegeprozess integriert wird. Entscheidend ist nicht, möglichst viele Keywords in ein Bildfeld zu schreiben. Entscheidend ist, dass ein Alt-Text jene Information vermittelt, die das Bild an dieser Stelle für den Inhalt leistet.

Was ein Alt-Text tatsächlich leistet

Der Alternativtext ist eine textliche Bildbeschreibung im HTML-Code. Kann ein Bild nicht geladen werden oder wird es mit einem Screenreader ausgegeben, übernimmt er die Aufgabe des Bildes. Besucherinnen und Besucher erfahren dadurch, was abgebildet ist und warum es im jeweiligen Zusammenhang relevant ist.

Das ist besonders wichtig für barrierefreie Websites. Aber auch technisch und redaktionell bringt die saubere Pflege Vorteile: Inhalte bleiben verständlicher, wenn Bilder nicht verfügbar sind, und Suchmaschinen erhalten zusätzlichen Kontext. Der SEO-Nutzen ist jedoch ein Nebeneffekt. Wer Alt-Texte nur für Rankings schreibt, produziert oft unnatürliche oder wiederholte Formulierungen, die weder Nutzern noch Suchmaschinen helfen.

Ein guter Alt-Text beantwortet in wenigen Worten zwei Fragen: Was ist zu sehen? Und welche Information trägt dieses Bild zum Inhalt bei? Die zweite Frage macht den Unterschied. Ein Foto einer Mitarbeiterin kann je nach Seite ganz unterschiedlich beschrieben werden. Auf der Teamseite ist ihre Funktion relevant. In einem Beitrag über ein Beratungsprojekt kann dagegen die Arbeitssituation wichtiger sein.

Alt Texte schreiben: Kontext vor Schema

Es gibt keine sinnvolle Standardformel, die auf jedes Bild passt. Die Beschreibung richtet sich nach Bildtyp, Seiteninhalt und Funktion. Ein dekoratives Hintergrundbild braucht meist keinen Alternativtext. Ein Produktbild, eine Infografik oder eine Schaltfläche mit Symbol dagegen schon.

Nehmen wir ein Webshop-Beispiel. Die Formulierung „Lederhandtasche“ ist technisch korrekt, aber zu allgemein, wenn Farbe, Modell oder besondere Ausstattung für die Kaufentscheidung relevant sind. „Braune Lederhandtasche mit kurzem Henkel und abnehmbarem Schulterriemen“ beschreibt das Produkt konkret, ohne den Text mit Suchbegriffen zu überladen.

Auf einer Leistungsseite wäre „Webdesigner arbeitet am Laptop“ oft wenig hilfreich. Wenn das Bild den Ablauf einer Agenturleistung illustriert, ist „Abstimmung eines Website-Konzepts zwischen Design und Entwicklung“ aussagekräftiger. Die Beschreibung muss nicht jedes sichtbare Detail aufzählen. Sie soll die relevante Aussage transportieren.

Informative Bilder

Informative Bilder ergänzen den Text oder vermitteln eigenständig eine Aussage. Dazu gehören Produktbilder, Fotos von Referenzprojekten, Lagepläne, Prozessgrafiken oder Bilder mit sichtbaren Ergebnissen. Hier sollte der Alt-Text präzise benennen, was für das Verständnis nötig ist.

Bei einer Referenz kann etwa „Startseite eines Webshops für regionale Feinkost mit Produktkategorien und saisonalem Banner“ passend sein. Ob Farben, Geräte oder Personen erwähnt werden, hängt davon ab, ob sie inhaltlich eine Rolle spielen. Allgemeine Floskeln wie „Bild von“ oder „Foto zeigt“ können Sie weglassen. Ein Screenreader kündigt das Element bereits als Bild an.

Funktionale Bilder und Icons

Bilder, die eine Aktion auslösen, brauchen einen Alt-Text, der die Funktion beschreibt, nicht das Motiv. Eine Lupe in der Navigation ist nicht „Lupe“, sondern „Suche öffnen“. Ein Pfeil am Slider ist nicht „Pfeil nach rechts“, sondern „Nächstes Bild anzeigen“.

Das gilt auch für verlinkte Logos und grafische Buttons. Wenn ein Firmenlogo zur Startseite führt, kann der Alternativtext „Zur Startseite von Musterfirma“ lauten. So wird klar, wohin die Aktion führt. Bei Bedienelementen ist diese Klarheit wichtiger als eine optisch genaue Beschreibung.

Dekorative Bilder

Ein Bild ist dekorativ, wenn sein Wegfall keine Information und keine Funktion entfernt. Das können Hintergrundstrukturen, Schmuckelemente oder ein rein stimmungsvolles Bild neben einem bereits vollständig erklärten Text sein. Solche Bilder sollten für Screenreader verborgen bleiben, üblicherweise mit leerem Alt-Attribut: `alt=““`.

Ein leerer Alt-Text ist nicht dasselbe wie ein fehlendes Alt-Attribut. Fehlt das Attribut, versuchen Screenreader unter Umständen, Dateinamen oder technische Informationen auszugeben. Das ist für Nutzerinnen und Nutzer störend und vermittelt keinen brauchbaren Inhalt.

So entstehen brauchbare Beschreibungen im Arbeitsalltag

Der einfachste Weg ist, die Beschreibung dort zu verfassen, wo das Bild in das Content-Management-System eingefügt wird. Wer die Seite gerade bearbeitet, kennt den Kontext. Werden Alt-Texte erst Wochen später gesammelt nachgetragen, fehlen häufig Informationen zu Motiv, Zweck und Aussage.

Für Teams empfiehlt sich eine kurze redaktionelle Prüfung vor der Veröffentlichung. Prüfen Sie zuerst, ob das Bild informativ, funktional oder dekorativ ist. Formulieren Sie dann die wesentliche Information in einem natürlichen Satz oder einer kurzen Wortgruppe. Zum Schluss lesen Sie Überschrift, Fließtext und Alt-Text gemeinsam. Wiederholt der Alt-Text den unmittelbar danebenstehenden Text vollständig, bringt er oft keinen zusätzlichen Nutzen.

Die Länge ist kein Selbstzweck. Viele Alt-Texte kommen mit einem Satz aus. Bei komplexen Darstellungen reicht ein langer Alternativtext allein oft nicht aus. Eine Umsatzgrafik etwa sollte die entscheidende Entwicklung im Alt-Text knapp zusammenfassen, beispielsweise „Balkendiagramm mit steigenden Onlineumsätzen von 2023 bis 2025“. Die konkreten Werte und ihre Einordnung gehören zusätzlich in den sichtbaren Text, eine Tabelle oder eine ausführliche Bildbeschreibung.

Bei Bildern mit Text muss der sichtbare Text grundsätzlich im Alt-Text vorkommen, sofern er für die Aussage relevant ist. Das betrifft etwa Angebotsgrafiken, Aktionsbanner oder Social-Media-Motive, die auf der Website eingebunden werden. Besser ist es allerdings, zentrale Botschaften nicht ausschließlich in ein Bild zu packen. Sichtbarer HTML-Text ist flexibler, zugänglicher und einfacher zu pflegen.

Typische Fehler, die sich leicht vermeiden lassen

In der Praxis sehen wir immer wieder ähnliche Probleme. Dateinamen wie „IMG_4821.jpg“ oder „AdobeStock_12345“ werden als Bildbeschreibung übernommen. Solche Angaben helfen niemandem. Ebenso problematisch sind Alt-Texte wie „Webdesign Tirol, Webagentur Innsbruck, Website erstellen lassen“. Das wirkt nicht nur künstlich, sondern beschreibt das Bild nicht.

Auch die identische Wiederholung desselben Alt-Texts bei mehreren Produktbildern ist ungünstig. Zeigen die Fotos Vorderseite, Rückseite und Detailansicht, sollten die Beschreibungen diesen Unterschied abbilden. Bei Variantenbildern sind Farbe, Größe oder Ausführung dann relevant, wenn sie erkennbar und für die Auswahl wichtig sind.

Vorsicht ist bei automatischen Bildbeschreibungen geboten. Moderne Systeme können Motive teilweise erkennen, liefern aber oft zu allgemeine oder unpassende Ergebnisse. Als Ausgangspunkt können sie Zeit sparen. Die fachliche Prüfung durch jemanden, der Produkt, Zielgruppe und Seitenkontext kennt, ersetzen sie nicht.

Verantwortung zwischen Redaktion, Design und Entwicklung

Barrierefreie Bildinhalte entstehen nicht allein in der Redaktion. Design, Entwicklung und Content-Pflege müssen zusammenspielen. Im Design sollte früh geklärt werden, ob Informationen nur über Bilder, Farben oder Icons transportiert werden. In der Entwicklung muss sichergestellt sein, dass das gewählte CMS Alt-Texte korrekt ausgibt und dekorative Elemente sauber behandelt. Die Redaktion trägt schließlich dafür Sorge, dass die Beschreibungen inhaltlich stimmen und aktuell bleiben.

Für bestehende Websites lohnt sich eine schrittweise Bestandsaufnahme. Beginnen Sie mit Seiten, die besonders häufig besucht werden oder für Anfragen und Verkäufe relevant sind: Startseite, Leistungsseiten, Kategorie- und Produktseiten, Kontaktbereich sowie wichtige Ratgeberartikel. Prüfen Sie dort nicht nur, ob ein Feld befüllt ist, sondern ob der Text zum jeweiligen Bild und dessen Funktion passt.

Bei umfangreichen Webshops lässt sich diese Arbeit gut in die laufende Produktpflege integrieren. Neue Artikel erhalten ihre Bildbeschreibungen direkt beim Anlegen. Bestehende Sortimente werden nach Priorität überarbeitet, etwa nach Umsatz, Saison oder Zugriffszahlen. So bleibt der Aufwand planbar und die Qualität steigt kontinuierlich.

Gute Alt-Texte sind sichtbare Sorgfalt im Hintergrund

Wer Alt Texte schreiben konsequent in seine Website-Prozesse aufnimmt, verbessert nicht nur ein technisches Detail. Die Website wird für mehr Menschen verständlich, Inhalte werden sorgfältiger gepflegt und Bildmaterial erhält einen klaren redaktionellen Zweck. Das passt besonders zu Unternehmen, die ihren digitalen Auftritt als verlässlichen Vertriebskanal und nicht als einmaliges Gestaltungsprojekt verstehen.

Beginnen Sie bei den Bildern, die für Ihre Kunden und Ihr Geschäft wirklich etwas erklären oder auslösen. Ein präziser Satz an der richtigen Stelle ist meist wertvoller als eine lange Liste von Keywords – und er zeigt, dass Ihre Website auch dort mitdenkt, wo viele Besucher gar nicht hinsehen.