Stand: 26. Oktober 2026 · Tutorial-Reihe Barrierefreiheit, Strang Redaktion · Beitrag 3 von 20
Auf vielen Websites, die ich prüfe, steht bei den Bildern entweder gar nichts im Alt-Text-Feld oder der Dateiname: IMG_4821.jpg. Beides ist ein Fehler. Und beides lässt sich beheben, wenn du weißt, nach welcher Logik du entscheidest. Dieser Beitrag ist Teil der Tutorial-Reihe Barrierefreiheit und die ausführliche Version meiner Kurzanleitung zu Alt-Texten. Du brauchst keinen Code. Alles passiert im WordPress-Editor. Am Ende gibt es eine Checkliste zum Abhaken.
Was ist ein Alt-Text?
Der Alt-Text (Alternativtext) ist eine kurze Textalternative zu einem Bild: Er sagt in Worten, was das Bild an Information oder Funktion auf dieser Seite beiträgt. Man sieht ihn nicht, außer das Bild lädt nicht. Gebraucht wird er von drei Gruppen:
- Screenreader-Nutzer. Blinde und stark sehbehinderte Menschen lassen sich die Seite vorlesen. Bei einem Bild liest der Screenreader den Alt-Text vor. Fehlt er, liest er je nach Programm den Dateinamen vor oder sagt nur „Grafik“.
- Suchmaschinen und KI-Systeme. Sie nutzen den Alt-Text als Hinweis darauf, was auf dem Bild zu sehen ist.
- Alle mit schlechter Verbindung. Lädt das Bild nicht, steht der Alt-Text an seiner Stelle.
Woher die Anforderung kommt
Das alt-Attribut gibt es in HTML seit den 1990er-Jahren. Als Anforderung an barrierefreie Websites steht die Textalternative in den WCAG von Anfang an: schon die WCAG 1.0 von 1999 verlangten in Checkpoint 1.1 ein Textäquivalent für jedes Nicht-Text-Element. In den aktuellen WCAG 2.2 heißt das Kriterium 1.1.1 Nicht-Text-Inhalte und ist Stufe A, also das absolute Minimum. Über die Norm EN 301 549 steckt es auch in den Anforderungen, die das BFSG in Deutschland und das BaFG in Österreich meinen.
Das Kriterium verlangt für jedes Bild eine Textalternative, die denselben Zweck erfüllt. Ausgenommen sind Bilder, die reine Dekoration sind. Die müssen aber so gekennzeichnet sein, dass Hilfstechnik sie überspringen kann. „Nichts eintragen“ und „bewusst leer lassen“ sehen im Editor gleich aus, für den Screenreader ist der Unterschied entscheidend.
Was Prüfungen und Studien zeigen
Fehlende Alt-Texte gehören zu den häufigsten Fehlern im Netz. Die jährliche Analyse WebAIM Million prüft automatisiert die Startseiten der eine Million meistbesuchten Websites. Im Bericht 2026 (Daten von Februar 2026) hatten 53,1 % der Startseiten Bilder ohne Alternativtext. Bezogen auf alle Bilder fehlte der Alt-Text bei 16,2 %. Insgesamt wiesen 95,9 % der Startseiten mindestens einen erkennbaren WCAG-Fehler auf.
Zwei Einschränkungen gehören dazu. Automatische Tests sehen nur, ob ein Alt-Text vorhanden ist, nicht ob er sinnvoll ist. Der echte Wert liegt also eher höher. Und ein fehlendes Attribut ist nicht immer ein Fehler im Sinn der Nutzer: Bei einem dekorativen Bild wäre ein leeres Attribut richtig gewesen. Der Test kann beides nicht unterscheiden.
Wo dir das Problem begegnet
- Mediathek-Import: Beim Upload übernimmt WordPress den Dateinamen als Titel, der Alt-Text bleibt leer. Wer nur hochlädt und einfügt, hat hunderte Bilder ohne Alternative.
- Produktbilder im Shop: Alle Bilder eines Produkts heißen gleich oder tragen die Artikelnummer.
- Logo und Icons: Das Logo ist ein Link zur Startseite, hat aber „Logo“ oder nichts als Alt-Text.
- Banner und Aktionsbilder: Der Text steckt im Bild, im Alt-Text fehlt er.
- Diagramme in Berichten: Die Aussage steht nur in der Grafik.
- Dekorative Stockfotos: Sie werden mit langen Beschreibungen versehen, die niemand hören will.
So entscheidest du: vier Fragen für jedes Bild
Du musst keine Regelwerke auswendig lernen. Stell dir bei jedem Bild diese Fragen, in dieser Reihenfolge.
1. Ist das Bild nur Dekoration?
Wenn das Bild nichts zum Inhalt beiträgt, bleibt der Alt-Text bewusst leer. Der Screenreader überspringt es dann. Typische Fälle sind Zierlinien, Hintergrundmuster oder ein Stockfoto, das nur Stimmung macht. Prüffrage: Würde dem Leser etwas fehlen, wenn das Bild weg wäre? Wenn nein, ist es Dekoration. Im WordPress-Editor kennzeichnest du das über die Einstellung für dekorative Bilder, siehe unten.
2. Steckt Text im Bild?
Dann gehört dieser Text wortgleich in den Alt-Text. Ein Banner mit „Sommeraktion: 20 Prozent auf alle Gartenmöbel bis 31. August“ bekommt genau diesen Satz. Besser noch: Schreib die Information als echten Text auf die Seite. Text als Bild ist auch für Menschen mit Zoom und für Suchmaschinen ein Problem, und die WCAG verlangen bei Stufe AA, dass Text als Text vorliegt, wo die Technik das darstellen kann (Kriterium 1.4.5, Ausnahmen gelten etwa für Logos).
3. Ist das Bild ein Link oder ein Button?
Dann beschreibst du nicht das Bild, sondern das Ziel. Ein Logo, das zur Startseite führt, bekommt „Firmenname – zur Startseite“. Ein Lupen-Symbol im Suchfeld heißt „Suchen“, ein Warenkorb-Symbol „Warenkorb“. Der Nutzer will wissen, was beim Klick passiert, nicht wie das Symbol aussieht. Das hängt eng mit der Frage zusammen, wie du Linktexte formulierst.
4. Trägt das Bild eine Information?
Das ist der Normalfall bei Fotos mit Aussage, Produktbildern, Teamfotos und Diagrammen. Jetzt schreibst du einen echten Alt-Text. Dafür gelten wenige Regeln:
- Beschreibe, was für die Seite relevant ist, nicht alles, was zu sehen ist. Auf einer Seite über Gartenmöbel zählt das Material des Tisches, nicht die Farbe des Himmels dahinter.
- Kurz und konkret. Ein Satz reicht fast immer. Als Faustregel nennen viele Leitfäden rund 125 Zeichen. Das ist eine Konvention aus der Praxis, keine Vorgabe der WCAG.
- Nicht mit „Bild von“ oder „Foto zeigt“ anfangen. Der Screenreader kündigt ohnehin eine Grafik an.
- Keine Keyword-Listen. „Gartenmöbel Holz Tisch günstig kaufen“ ist kein Alt-Text, sondern Spam.
- Kein Dateiname. „IMG_4821.jpg“ sagt niemandem etwas.
Beispiele: schlecht, besser, gut
Ein Teamfoto auf der Über-uns-Seite:
- Schlecht: IMG_2231.jpg
- Besser: Team
- Gut: Das fünfköpfige Team vor dem Firmengebäude, vorne die Geschäftsführerin
Ein Produktfoto im Shop:
- Schlecht: Tisch
- Besser: Gartentisch aus Eichenholz
- Gut: Rechteckiger Gartentisch aus geöltem Eichenholz, 180 × 90 Zentimeter, mit Platz für sechs Personen
Ein Diagramm in einem Bericht:
- Schlecht: Diagramm
- Gut: Balkendiagramm: Der Umsatz stieg von 1,2 Millionen Euro im Jahr 2024 auf 1,6 Millionen Euro im Jahr 2025
Bei komplexen Diagrammen reicht ein Satz nicht. Dann gehört die Kernaussage in den Alt-Text und die vollständigen Zahlen als Tabelle oder Text direkt unter das Bild.
Ein Beispiel aus der Praxis
Ein typischer Fall in Shops: 300 Produktbilder, alle per Import angelegt, alle ohne Alt-Text. Wer versucht, jedes Bild einzeln zu beschreiben, gibt nach 20 auf. Der Weg, der funktioniert, ist Priorisierung:
- Zuerst die Seiten, über die Umsatz läuft: Startseite, Kategorieseiten, die zehn meistverkauften Produkte.
- Dann Logo, Icons und alle Bilder, die Links oder Buttons sind. Das sind wenige, aber sie blockieren die Bedienung.
- Dann Banner und Bilder mit Text.
- Zum Schluss die Masse. Hier hilft ein Schema aus den Produktdaten, etwa „Produktname, Material, Farbe“. Ein Skript kann das aus den vorhandenen Feldern füllen, die Stichprobe prüfst du von Hand.
Das Ergebnis ist keine perfekte Beschreibung jedes Bildes, aber eine Seite, auf der jede Bedienung funktioniert und die wichtigsten Inhalte vorgelesen werden.
Der Ablauf im WordPress-Editor
- Bild im Block anklicken.
- In der Seitenleiste das Feld für den Alternativtext suchen und den Text eintragen.
- Bei dekorativen Bildern die Option für dekorative Bilder aktivieren, sofern dein Editor sie anbietet. Sonst das Feld leer lassen.
- Verwendest du ein Bild aus der Mediathek wieder, prüfe den Alt-Text im neuen Zusammenhang. Dasselbe Foto kann an einer Stelle dekorativ und an anderer wichtig sein.
Alt-Texte und Rechtslage
Deutschland und Österreich: Das BFSG (DE) und das BaFG (AT) gelten seit dem 28. Juni 2025 für viele private Angebote, darunter Online-Shops und Dienstleistungen im elektronischen Geschäftsverkehr. Kleinstunternehmen mit weniger als 10 Beschäftigten und höchstens 2 Millionen Euro Jahresumsatz oder Jahresbilanzsumme sind bei Dienstleistungen ausgenommen. Bisher gilt in der Praxis die EN 301 549 in der Fassung 3.2.1 mit WCAG 2.1 AA als Maßstab. Die Fassung 4.1.1 mit WCAG 2.2 AA hat ETSI am 2. September 2026 veröffentlicht. Rechtlich maßgeblich wird sie erst mit der Zitierung im EU-Amtsblatt, die noch aussteht. Für Alt-Texte ändert das nichts: Kriterium 1.1.1 ist in beiden Fassungen gleich.
Schweiz: Für private Anbieter besteht heute noch keine gesetzliche Pflicht. Die Teilrevision des Behindertengleichstellungsgesetzes (BehiG) würde private Anbieter erstmals erfassen. Sie liegt noch beim Parlament. Ein Inkrafttreten ist frühestens 2027 denkbar, ein verbindliches Datum gibt es noch nicht. Wer aus der Schweiz in die EU verkauft, fällt schon jetzt unter die EU-Regeln.
Wo KI hilft und wo sie schadet
Ein KI-Werkzeug kann zu einem Bild einen Alt-Text vorschlagen. Bei großen Beständen spart das Zeit, weil du nicht bei null anfängst. Ich nutze das als Entwurf, nie als fertiges Ergebnis. Das Problem: Die KI sieht das Bild, aber nicht die Seite. Sie weiß nicht,
- ob das Bild dekorativ ist. Sie beschreibt es trotzdem ausführlich.
- was auf dieser Seite wichtig ist. Bei einem Produktfoto beschreibt sie den Hintergrund so sorgfältig wie das Produkt.
- ob das Bild ein Link ist und wohin er führt.
- wer die Person auf dem Foto ist. Namen trägst du selbst ein, soweit sie veröffentlicht werden dürfen.
Mein Ablauf: Erst entscheidest du mit den vier Fragen, ob und was beschrieben werden muss. Dann lässt du dir bei Bedarf einen Vorschlag machen und kürzt ihn auf das Relevante. Wer die Reihenfolge umdreht, bekommt eine Seite voller ausführlicher, aber falscher Alt-Texte. Der Beitrag funktioniert auch komplett ohne KI.
Warum es Sinn macht und wann du es anwendest
Alt-Texte lohnen sich bei jedem Bild, das etwas sagt oder etwas auslöst. Der Aufwand ist klein, der Effekt für Screenreader-Nutzer groß, und nebenbei verstehen Suchmaschinen deine Bilder besser. Rechtlich ist es das Kriterium mit der niedrigsten Hürde: Stufe A.
Wo es nichts bringt: bei Bildern, die du nur mit Keywords vollstopfst, und bei Beschreibungen, die den Text direkt daneben wiederholen. Steht die Information schon im Fließtext neben dem Bild, genügt ein kurzer Alt-Text oder ein leerer. Die häufigsten Fehler im Überblick: ein Skript, das den Seitentitel in jedes Bild schreibt; „Logo“ als Beschreibung eines Logos mit Link; Flyer und Speisekarten als Bild ohne Text daneben; und Alt-Texte, die nach einem Bildtausch nie mehr angeschaut werden.
Checkliste: Alt-Texte auf deiner Website
Hake ab, was auf deiner Website schon passt. Dein Stand bleibt in diesem Browser gespeichert.
- Kein Bild hat einen Dateinamen als Alt-Text. Stichprobe auf Startseite und Kontaktseite: Bild mit ausgeschalteter Grafikanzeige oder per Browser-Entwicklertools prüfen.
- Dekorative Bilder sind bewusst als dekorativ gekennzeichnet. Frag bei jedem Zierbild: Fehlt dem Leser etwas, wenn es weg ist?
- Logo und Symbole mit Link beschreiben das Ziel. „Firmenname – zur Startseite“, nicht „Logo“.
- Text im Bild steht auch als Text da. Banner, Flyer, Speisekarten: Ist die Information zusätzlich als Text vorhanden?
- Informative Bilder haben einen kurzen, konkreten Alt-Text. Ein Satz, ohne „Bild von“, ohne Keyword-Liste.
- Diagramme haben die Kernaussage im Alt-Text und die Daten als Text oder Tabelle.
- Nach einem Bildtausch wird der Alt-Text mitgeprüft. Gibt es dafür eine feste Regel im Team?
Wie weit deine Seite insgesamt ist, zeigt dir mein kostenloser Barrierefreiheit-Schnellcheck. Er findet Bilder ohne Alt-Attribut, kann aber nicht beurteilen, ob der Text sinnvoll ist. Das bleibt deine Aufgabe. Für Alt-Texte in PDFs gilt dasselbe Prinzip, prüfen kannst du sie mit dem PDF-Barrierefreiheit-Check. Wie du den Rest deiner Texte angehst, steht im Beitrag über barrierefreie Webseitentexte.
Häufige Fragen
Muss jedes Bild einen Alt-Text haben?
Jedes Bild braucht ein alt-Attribut. Bei Bildern mit Informationsgehalt steht darin eine Beschreibung, bei rein dekorativen Bildern bleibt es bewusst leer. Ein komplett fehlendes Attribut ist der Fehler.
Wie lang darf ein Alt-Text sein?
Die WCAG nennen keine Länge. In der Praxis reicht meist ein Satz, als Orientierung gelten rund 125 Zeichen. Bei Diagrammen schreibst du die Kernaussage in den Alt-Text und lieferst die Details als Text oder Tabelle daneben.
Soll ich im Alt-Text Keywords verwenden?
Nur, wenn sie das Bild ohnehin korrekt beschreiben. Der Alt-Text ist für Menschen geschrieben. Keyword-Listen schaden mehr, als sie nützen.
Was schreibe ich bei einem Logo?
Verlinkt das Logo auf die Startseite, schreibst du den Firmennamen und das Ziel, zum Beispiel „Firmenname – zur Startseite“. Steht der Firmenname direkt daneben als Text und das Logo ist kein Link, kann der Alt-Text leer bleiben.
Reicht ein KI-generierter Alt-Text?
Nur als Entwurf. Die KI kennt den Seitenkontext nicht und entscheidet nicht, ob ein Bild dekorativ ist. Jeden Vorschlag prüfst und kürzt du.
Du hast hunderte Bilder ohne brauchbare Alt-Texte? Ich gehe deinen Bestand durch, priorisiere nach Seitenwichtigkeit und schule dein Redaktionsteam, damit das Problem nicht wiederkommt. Mehr dazu unter Webentwicklung & Barrierefreiheit. Sprich mit mir über dein Projekt.
