Alt-Texte gehören zu den Dingen, die auf vielen Websites entweder vergessen oder komplett falsch verstanden werden. Manche tragen gar nichts ein. Andere stopfen Keywords hinein. Wieder andere schreiben halbe Romane, obwohl das Bild eigentlich nur Dekoration ist.
Dabei ist ein guter Alt-Text gar nicht so kompliziert.
Er soll Menschen helfen, die ein Bild nicht sehen können oder bei denen Bilder nicht geladen werden. Ein Screenreader kann den Alt-Text vorlesen und so erklären, welche wichtige Information im Bild steckt.
Wichtig ist aber: Ein Alt-Text beschreibt nicht einfach jedes Bild stumpf. Er beschreibt das, was für den Inhalt der Seite wichtig ist.
Was ist ein Alt-Text überhaupt?
Ein Alt-Text ist ein alternativer Text für ein Bild. Er wird im HTML beim Bild hinterlegt und kann von Hilfsmitteln wie Screenreadern vorgelesen werden.
Wenn ein Bild nicht angezeigt wird, kann der Alt-Text ebenfalls sichtbar werden. Für die Barrierefreiheit ist aber vor allem wichtig, dass Menschen ohne visuelle Wahrnehmung verstehen können, welche Information das Bild vermittelt.
Ein Alt-Text beantwortet also nicht nur die Frage:
„Was ist auf dem Bild zu sehen?“
Sondern eher:
„Welche Information braucht der Nutzer aus diesem Bild?“
Das ist ein kleiner, aber wichtiger Unterschied.
Warum Alt-Texte so wichtig sind
Bilder transportieren oft Informationen. Sie zeigen Produkte, Personen, Diagramme, Arbeitsschritte, Beispiele, Warnhinweise oder Ergebnisse.
Wenn diese Informationen nur im Bild stecken, sind sie für manche Nutzer nicht zugänglich.
Ein Beispiel:
Du hast auf einer Website ein Bild von einem kaputten Formularfeld mit roter Fehlermeldung. Wenn der Alt-Text nur „Screenshot“ lautet, hilft das nicht. Besser wäre eine Beschreibung, was der Screenshot zeigt.
Zum Beispiel:
„Screenshot eines Kontaktformulars mit Fehlermeldung bei einer ungültigen E-Mail-Adresse.“
So versteht der Nutzer den Inhalt auch ohne das Bild.
Nicht jedes Bild braucht einen Alt-Text
Das klingt erstmal widersprüchlich, ist aber wichtig.
Nicht jedes Bild trägt eine eigene Information. Viele Bilder sind nur dekorativ. Sie lockern eine Seite auf, erzeugen Stimmung oder füllen ein Layout.
Ein dekoratives Bild braucht keinen beschreibenden Alt-Text. Es sollte so eingebunden werden, dass Screenreader es ignorieren können.
Beispiele für dekorative Bilder:
Hintergrundmuster, Schmuckgrafiken, abstrakte Formen, rein dekorative Icons, Trenner, Zierbilder ohne Informationswert.
Wenn ein Bild nichts Neues sagt, muss es auch nicht vorgelesen werden. Sonst wird die Seite für Screenreader-Nutzer unnötig lang und anstrengend.
Der Kontext entscheidet
Ein und dasselbe Bild kann je nach Kontext einen anderen Alt-Text brauchen.
Nehmen wir ein Foto von einem Hund.
Auf einer Tierarzt-Website könnte der Alt-Text lauten:
„Hund wird von einer Tierärztin untersucht.“
In einem Blogartikel über Hunderassen vielleicht:
„Golden Retriever sitzt auf einer Wiese.“
Auf einer rein dekorativen Startseite kann das Bild vielleicht gar keinen beschreibenden Alt-Text brauchen.
Der beste Alt-Text entsteht also nicht nur durch Anschauen des Bildes. Man muss auch die Seite verstehen, auf der das Bild steht.
Gute Alt-Texte sind kurz, aber aussagekräftig
Ein Alt-Text sollte nicht unnötig lang sein. Meist reichen ein oder zwei klare Sätze, oft sogar eine kurze Beschreibung.
Schlecht:
„Bild“
Besser:
„Kontaktformular mit Feldern für Name, E-Mail-Adresse und Nachricht.“
Schlecht:
„Foto von Person“
Besser:
„Mitarbeiterin berät einen Kunden am Laptop.“
Schlecht:
„SEO Bild Barrierefreiheit Alt Text Website prüfen“
Besser:
„Laptop mit geöffneter Website und Symbolen für Barrierefreiheit.“
Ein guter Alt-Text ist verständlich, konkret und nicht mit Keywords vollgestopft.
Nicht mit „Bild von“ anfangen
In den meisten Fällen musst du nicht schreiben: „Bild von“, „Foto von“ oder „Grafik von“.
Screenreader erkennen in der Regel bereits, dass es sich um ein Bild handelt. Wenn der Alt-Text dann auch noch mit „Bild von“ beginnt, wird es schnell doppelt.
Statt:
„Bild von einem Laptop mit Website“
Besser:
„Laptop mit geöffneter Website und Kontaktformular.“
Es gibt Ausnahmen. Wenn es wichtig ist, dass es sich um ein Foto, eine Zeichnung, ein Gemälde oder einen Screenshot handelt, kann man das erwähnen.
Zum Beispiel:
„Screenshot eines WooCommerce-Checkouts mit markiertem Pflichtfeld.“
Hier ist „Screenshot“ relevant, weil es die Art der Darstellung erklärt.
Alt-Texte sind keine Keyword-Fläche
Viele Websitebetreiber denken bei Alt-Texten zuerst an SEO. Ja, Suchmaschinen können Alt-Texte auswerten. Aber der Hauptzweck ist Barrierefreiheit.
Ein Alt-Text sollte nicht so aussehen:
„Barrierefreie Website BFSG WCAG WordPress SEO Agentur Webseite prüfen“
Das ist nicht hilfreich. Es klingt unnatürlich und erklärt das Bild nicht.
Besser:
„Person prüft eine Website auf einem Laptop mit Symbolen für Tastaturbedienung und Kontrast.“
Wenn das Hauptkeyword natürlich passt, ist das okay. Aber es sollte nicht künstlich hineingepresst werden.
Produktbilder richtig beschreiben
Bei Online-Shops sind Alt-Texte besonders wichtig. Produktbilder helfen Kunden bei der Kaufentscheidung.
Ein Alt-Text sollte hier relevante Merkmale beschreiben:
Produktart, Farbe, Form, Material, wichtige Details, Ansicht oder Variante.
Beispiele:
„Schwarzer Lederrucksack mit Frontfach und silbernen Reißverschlüssen.“
„Weißer Sneaker mit heller Sohle und beigem Wildlederbesatz.“
„Blaues T-Shirt mit Rundhalsausschnitt und kleiner Brusttasche.“
Nicht jedes Produktbild braucht denselben Alt-Text. Wenn mehrere Bilder dasselbe Produkt aus verschiedenen Blickwinkeln zeigen, kann man die Ansicht erwähnen:
„Rucksack von vorne.“
„Rucksack von der Seite mit sichtbarem Flaschenfach.“
„Innenansicht des Rucksacks mit Laptopfach.“
So bekommen Nutzer echte Informationen statt Wiederholungen.
Infografiken brauchen mehr Erklärung
Infografiken sind schwierig, weil sie oft viele Informationen enthalten.
Ein kurzer Alt-Text reicht hier manchmal nicht aus. Wenn das Bild wichtige Aussagen, Zahlen oder Abläufe zeigt, sollten diese Informationen zusätzlich im normalen Text der Seite erklärt werden.
Der Alt-Text kann dann kurz beschreiben, worum es geht:
„Infografik mit fünf Prüfpunkten für barrierefreie Kontaktformulare.“
Die eigentlichen fünf Punkte sollten aber im Artikel selbst als Text stehen. So sind sie für alle zugänglich.
Wichtig: Keine wichtigen Inhalte nur in eine Grafik packen. Was wichtig ist, gehört auch als Text auf die Seite.
Diagramme und Charts beschreiben
Bei Diagrammen reicht ein Alt-Text wie „Balkendiagramm“ nicht aus. Nutzer müssen verstehen, welche Aussage das Diagramm macht.
Schlecht:
„Diagramm“
Besser:
„Balkendiagramm zeigt steigende mobile Website-Zugriffe von Januar bis Juni.“
Noch besser ist es, die wichtigsten Werte oder die Kernaussage im Fließtext zu nennen.
Wenn ein Diagramm komplex ist, kann der Alt-Text kurz sein und auf eine ausführliche Beschreibung im Text verweisen.
Zum Beispiel:
„Diagramm zur Entwicklung der Shop-Abbrüche. Die wichtigsten Werte werden im folgenden Abschnitt erklärt.“
Bilder mit Text vermeiden
Text direkt im Bild ist oft problematisch. Er kann für Screenreader unsichtbar sein, schlecht skalieren und auf kleinen Bildschirmen unlesbar werden.
Wenn Text im Bild unbedingt nötig ist, muss er im Alt-Text oder besser im normalen Seiteninhalt wiedergegeben werden.
Beispiel:
Ein Bild zeigt ein Schild mit dem Text „Eingang geschlossen“.
Alt-Text:
„Schild mit Hinweis: Eingang geschlossen.“
Noch besser wäre, wenn die Information zusätzlich als normaler Text auf der Seite steht.
Für Website-Design gilt: Wichtige Texte nicht als Bild einbauen. Nutze echten HTML-Text.
Icons richtig behandeln
Icons können dekorativ oder funktional sein.
Ein kleines Pfeil-Icon neben einem Link ist meistens dekorativ. Wenn der Linktext schon klar ist, braucht das Icon keinen eigenen Alt-Text.
Ein Suchsymbol ohne sichtbaren Text ist dagegen funktional. Dann muss klar sein, dass es die Suche öffnet.
Beispiele:
Dekoratives Icon neben „Kontakt aufnehmen“: kein eigener beschreibender Alt-Text nötig.
Icon-only Button mit Lupe: zugängliche Beschriftung wie „Suche öffnen“ nötig.
Icon-only Button mit Warenkorb: zugängliche Beschriftung wie „Warenkorb öffnen“ nötig.
Wichtig ist: Wenn ein Icon eine Funktion hat, muss diese Funktion verständlich benannt sein.
Verlinkte Bilder brauchen besondere Aufmerksamkeit
Wenn ein Bild ein Link ist, sollte der Alt-Text das Ziel oder die Funktion des Links beschreiben.
Beispiel:
Ein Logo im Header führt zur Startseite.
Guter Alt-Text:
„Zur Startseite“
Oder je nach Umsetzung:
„Firmenname“
Wenn ein Produktbild zur Produktseite führt, kann der Alt-Text das Produkt benennen:
„Blauer Wanderrucksack Modell Trail 25“
Nicht ideal wäre:
„Bild Produkt“
Der Nutzer soll verstehen, wohin der Link führt.
Teamfotos und Personenbilder
Bei Personenbildern kommt es auf den Zweck an.
Wenn es um ein Teammitglied geht, sollte der Alt-Text die Person benennen:
„Porträt von Anna Müller, Kundenberatung.“
Wenn der Name direkt unter dem Bild steht, reicht manchmal eine kürzere Beschreibung oder das Bild kann je nach Kontext weniger ausführlich sein.
Bei rein dekorativen Stockfotos wie „Menschen im Büro lachen“ sollte man überlegen, ob der Alt-Text überhaupt nötig ist. Wenn das Bild nur Stimmung erzeugt und keine echte Information liefert, kann es dekorativ sein.
Screenshots sinnvoll beschreiben
Screenshots werden in Anleitungen häufig genutzt. Hier sollte der Alt-Text nicht jedes kleine Detail beschreiben, sondern den Zweck des Screenshots.
Schlecht:
„Screenshot“
Besser:
„Screenshot der WordPress-Mediathek mit geöffnetem Feld für Alt-Text.“
Oder:
„Screenshot eines Formulars mit markierter Fehlermeldung unter dem E-Mail-Feld.“
Wenn der Screenshot Teil einer Anleitung ist, sollte der eigentliche Schritt im Text erklärt werden. Der Screenshot unterstützt dann nur.
Alt-Text oder Bildbeschreibung?
Viele Systeme unterscheiden zwischen Alt-Text, Bildunterschrift und Beschreibung. In WordPress sieht man zum Beispiel mehrere Felder.
Der Alt-Text ist für die Barrierefreiheit direkt am Bild wichtig.
Die Bildunterschrift ist sichtbar auf der Seite und wird von allen gelesen.
Die Beschreibung kann je nach Theme oder Mediathek genutzt werden, erscheint aber nicht immer sichtbar.
Für die Praxis heißt das:
Alt-Text: kurze, zweckbezogene Beschreibung für Screenreader.
Bildunterschrift: sichtbare Zusatzinformation für alle Nutzer.
Beschreibung: längere interne oder ergänzende Bildinformation, wenn nötig.
Nicht jedes Feld muss immer gefüllt sein. Aber der Alt-Text sollte bewusst entschieden werden.
Häufige Fehler bei Alt-Texten
Viele Alt-Texte sind gut gemeint, aber nicht hilfreich.
Typische Fehler sind:
gar kein Alt-Text bei wichtigen Bildern,
Dateinamen als Alt-Text,
Keyword-Stuffing,
zu lange Beschreibungen,
zu allgemeine Texte wie „Bild“,
jede Dekoration wird vorgelesen,
mehrere ähnliche Produktbilder haben denselben Alt-Text,
wichtige Infografik-Inhalte stehen nur im Bild,
Icons ohne Funktionsbeschreibung.
Die meisten Fehler entstehen, weil Alt-Texte nebenbei ausgefüllt werden. Besser ist, kurz nachzudenken: Was muss jemand wissen, der das Bild nicht sieht?
Gute und schlechte Beispiele
Schlecht:
„auto.jpg“
Besser:
„Roter Kleinwagen steht vor einer Werkstatt.“
Schlecht:
„Bild von Website“
Besser:
„Laptop mit geöffneter Startseite eines Online-Shops.“
Schlecht:
„Barrierefreiheit Website BFSG WCAG prüfen Test“
Besser:
„Website-Prüfung mit Symbolen für Kontrast, Tastaturbedienung und Formularfehler.“
Schlecht:
„Mann“
Besser:
„Handwerker montiert eine Fußbodenheizung im Estrich.“
Schlecht:
„Infografik“
Besser:
„Infografik zeigt die wichtigsten Schritte zur Prüfung eines Kontaktformulars.“
Wie lang sollte ein Alt-Text sein?
Es gibt keine perfekte Zeichenanzahl für jeden Fall. Ein Alt-Text sollte so lang sein wie nötig und so kurz wie möglich.
Für einfache Bilder reicht oft eine kurze Zeile.
Für komplexe Bilder sollte der Alt-Text nur eine knappe Einordnung liefern, während die Details im normalen Text stehen.
Als Faustregel:
Einfaches Bild: kurze Beschreibung.
Produktbild: relevante Kaufdetails nennen.
Screenshot: Zweck des Screenshots erklären.
Infografik: Thema nennen und Inhalte im Text erklären.
Dekoratives Bild: leer lassen oder als dekorativ markieren.
Alt-Texte in WordPress richtig eintragen
In WordPress kannst du Alt-Texte in der Mediathek eintragen. Das ist praktisch, aber man sollte trotzdem aufpassen.
Wenn ein Bild immer im gleichen Kontext verwendet wird, kann ein Alt-Text in der Mediathek passen.
Wenn dasselbe Bild an verschiedenen Stellen unterschiedliche Bedeutungen hat, kann ein allgemeiner Alt-Text ungenau sein.
Beispiel:
Ein Foto von einem Laptop kann in einem Artikel über Webdesign anders gemeint sein als in einem Artikel über Barrierefreiheit.
Dann sollte der Alt-Text im jeweiligen Inhalt angepasst werden, wenn das Theme oder der Editor das ermöglicht.
Was ist mit Beitragsbildern?
Beitragsbilder sind auf Blogs besonders häufig. Sie erscheinen in Artikelübersichten, auf Startseiten, in Social Shares oder im Beitrag selbst.
Ein Beitragsbild sollte einen Alt-Text bekommen, wenn es den Inhalt visuell unterstützt.
Beispiel für diesen Artikel:
„Infografik zur richtigen Erstellung von Alt-Texten für Bilder mit Laptop, Bildsymbolen und Barrierefreiheits-Hinweisen.“
Das erklärt, worum es geht, ohne den Artikel zu wiederholen.
Wenn ein Beitragsbild nur dekorativ ist und der Artikeltitel direkt danebensteht, kann man im Einzelfall auch kürzer bleiben. Wichtig ist, Dopplungen zu vermeiden.
Alt-Texte für Social Media
Auch Social-Media-Bilder sollten Alt-Texte bekommen. Gerade dort werden viele Informationen direkt ins Bild gepackt: Zitate, Hinweise, Angebote, Veranstaltungstermine oder Infografiken.
Wenn ein Bild Text enthält, sollte der wichtige Text im Alt-Text oder im Beitrag selbst vorkommen.
Bei Social Media gilt besonders: Menschen scrollen schnell. Ein klarer Alt-Text hilft, den Inhalt auch ohne Bild zu verstehen.
Praktische Formel für gute Alt-Texte
Eine einfache Frage hilft fast immer:
Was müsste ich jemandem sagen, der das Bild nicht sehen kann, damit er den Inhalt versteht?
Daraus entsteht meist automatisch ein brauchbarer Alt-Text.
Du kannst auch diese kleine Formel nutzen:
Motiv + wichtige Information + Kontext
Beispiele:
„Laptop mit geöffneter Website und sichtbarem Kontaktformular.“
„Produktfoto eines schwarzen Rucksacks mit Laptopfach.“
„Screenshot einer Fehlermeldung im Checkout nach fehlender Postleitzahl.“
„Infografik mit Prüfpunkten für barrierefreie Navigation.“
Kurze Checkliste für Alt-Texte
Prüfe deine Bilder mit diesen Fragen:
Trägt das Bild eine wichtige Information?
Ist das Bild nur dekorativ?
Beschreibt der Alt-Text den Zweck des Bildes?
Ist der Alt-Text kurz und verständlich?
Wurden Keywords natürlich verwendet, statt gestopft?
Sind Produktdetails enthalten, wenn sie wichtig sind?
Sind Infografik-Inhalte zusätzlich als Text vorhanden?
Haben verlinkte Bilder eine sinnvolle Linkbeschreibung?
Wurden Icons mit Funktion zugänglich benannt?
Sind Dateinamen wie „IMG_1234“ vermieden?
Wenn du diese Punkte beachtest, bist du schon deutlich besser unterwegs als viele Websites.
Fazit: Gute Alt-Texte sind klar, nützlich und kontextbezogen
Alt-Texte sind kein lästiges SEO-Feld, das man schnell mit Keywords füllt. Sie sind ein wichtiger Teil barrierefreier Inhalte.
Ein guter Alt-Text hilft Menschen, die ein Bild nicht sehen können. Er erklärt die relevante Information, ohne unnötig lang zu werden. Und er berücksichtigt den Kontext, in dem das Bild erscheint.
Mein praktischer Rat: Schreibe Alt-Texte nicht mechanisch. Schau dir das Bild an, lies den Abschnitt drumherum und frage dich: Welche Information würde fehlen, wenn das Bild nicht da wäre?
Genau diese Information gehört in den Alt-Text.
So werden Bilder nicht nur schöner eingebunden, sondern auch verständlicher, zugänglicher und professioneller.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.