Barrierefreie Bilder in WordPress sind kein Hexenwerk – das alt-Attribut ist seit jeher fest eingebaut. Trotzdem scheitern die meisten Websites genau hier. Der Grund ist selten böser Wille, sondern die WordPress-spezifische Architektur: Alt-Texte leben an mehreren Orten gleichzeitig, Page Builder kochen ihr eigenes Süppchen, und was in der Mediathek gepflegt wird, kommt nicht automatisch überall an.
Diese Checkliste ist das WordPress-Gegenstück zu unserer plattformübergreifenden EAA-Checkliste für E-Commerce – hier geht es um die konkreten Handgriffe und Fallstricke im WordPress-Ökosystem.
1. Der Rechtsrahmen in Kürze
Drei Regelwerke sind für WordPress-Betreiber relevant – und alle drei laufen bei Bildern auf dieselbe technische Anforderung hinaus:
| Regelwerk | Gilt für | Anforderung bei Bildern |
|---|---|---|
| EAA / BFSG | E-Commerce & bestimmte Dienstleistungen in der EU (seit 28.06.2025) | WCAG 2.1 AA – Textalternative (SC 1.1.1) |
| ADA | US-Markt; Klagewelle gegen Websites (4.500+ Klagen 2024) | De-facto-Standard: WCAG 2.1 AA |
| WCAG 2.1 AA | Technischer Standard hinter beiden | SC 1.1.1 (Alt-Text) und SC 1.4.5 (Text im Bild) |
Die gute Nachricht: Wer die WCAG-Anforderungen für Bilder erfüllt, deckt EAA und ADA in diesem Punkt gleichzeitig ab. Es gibt keine drei verschiedenen Alt-Text-Standards.
2. Wo WordPress Alt-Texte speichert – und warum das wichtig ist
Der häufigste Verständnisfehler bei WordPress-Bildern: die Annahme, der Alt-Text sei eine Eigenschaft „des Bildes“. Tatsächlich gibt es zwei Speicherorte:
Mediathek vs. Beitrag
Mediathek: Der Alt-Text am Mediathek-Eintrag ist die Vorlage. Er wird verwendet, wenn das Bild neu eingefügt wird – und bei Beitragsbildern (Featured Images) direkt ausgespielt.
Beitrag/Seite: Beim Einfügen in den Block-Editor wird der Alt-Text in den Block kopiert. Ab dann sind beide unabhängig: Wer später die Mediathek korrigiert, ändert damit nicht die bereits eingefügten Bilder in bestehenden Beiträgen.
Für Ihre Prüfung heißt das: Es genügt nicht, die Mediathek durchzugehen. Bestandsinhalte müssen dort geprüft werden, wo sie ausgespielt werden – im gerenderten HTML. Genau deshalb arbeitet ein sauberes Audit immer mit dem Frontend (Scan oder Quelltext), nie nur mit dem Backend.
3. Die 8-Punkte-Checkliste
Scannen Sie die gerenderte Website, nicht die Mediathek: Wie viele <img>-Elemente haben kein oder ein leeres alt-Attribut? Der Gratis-Barriere-Check liefert die Aufschlüsselung pro Seite. Schnelltest für Einzelseiten: F12 → Konsole → document.querySelectorAll('img:not([alt])').length.
Pflegen Sie Alt-Texte am Mediathek-Eintrag (Feld „Alternativtext“) – davon profitieren alle künftigen Einbindungen und alle Beitragsbilder. Bei hunderten Einträgen ist das der Punkt, an dem Bulk-Generierung ansetzt.
Wegen der Kopie-Logik aus Abschnitt 2: Bereits veröffentlichte Beiträge behalten ihren alten (oder fehlenden) Alt-Text, auch wenn die Mediathek längst korrigiert ist. Prüfen Sie Top-Beiträge gezielt im Editor – das Alt-Text-Feld sitzt in den Block-Einstellungen des Bild-Blocks.
Trennlinien, Ornamente, rein atmosphärische Bilder bekommen alt="" – im Block-Editor einfach das Feld leer lassen (der Editor weist selbst darauf hin). Wichtig: Das Attribut muss vorhanden und leer sein. Fehlt es ganz, lesen Screenreader oft den Dateinamen vor.
Der meistübersehene Punkt: Ist ein Bild der einzige Inhalt eines Links (Logo → Startseite, Banner → Aktionsseite), beschreibt der Alt-Text das Linkziel, nicht das Bild: „Zur Startseite“ statt „Firmenlogo“. Ein leerer Alt-Text macht den Link für Screenreader-Nutzer unbenutzbar – hier wäre alt="" also ausnahmsweise ein schwerer Fehler.
WCAG 2.1 AA (SC 1.4.5) verlangt echten Text statt Text-Grafiken, wo immer möglich (Ausnahme u. a. Logos). Aktionsbanner mit eingebackenem Text sind der Klassiker: Wenn unvermeidbar, muss der Alt-Text die komplette Textinformation transportieren – „20 % Rabatt auf alle Sommermodelle bis 31.08.“ und nicht „Banner“.
Bilder in Galerien, Slidern und Builder-Widgets umgehen teils die Standard-Logik. Prüfen Sie im gerenderten HTML, ob die Alt-Texte wirklich ankommen – Details zu den Builder-Eigenheiten in Abschnitt 4.
Definieren Sie, wie ab sofort jedes neue Bild seinen Alt-Text bekommt – idealerweise automatisch beim Upload in die Mediathek, damit die Lücke nicht wieder aufreißt. Redaktionsregel dazu: Vor dem Veröffentlichen einmal die Bild-Blöcke durchklicken.
4. Gutenberg, Page Builder & Themes: die Eigenheiten
Im Block-Editor (Gutenberg) ist die Welt in Ordnung: Bild-Block auswählen, Alt-Text in den Block-Einstellungen pflegen, fertig. Der Editor erinnert sogar daran, dass leere Alt-Texte dekorativen Bildern vorbehalten sind.
Komplizierter wird es außerhalb des Standards:
- Page Builder (Elementor, Divi, WPBakery & Co.) haben eigene Bild-Widgets mit eigenen Alt-Text-Feldern. Manche übernehmen den Mediathek-Wert, manche nicht – verlassen Sie sich nie darauf, sondern prüfen Sie das gerenderte HTML.
- Hintergrundbilder per CSS (beliebt in Buildern für Hero-Sektionen) können technisch gar keinen Alt-Text tragen. Faustregel: Trägt das Bild Information, gehört es als
<img>in den Inhalt; ist es reine Dekoration, ist CSS-Background sogar die sauberste Lösung. - Theme-Bilder (Logo im Customizer, Header-Bilder) haben je nach Theme eigene Pflegeorte – das Logo-Beispiel aus Checklisten-Punkt 5 wird meist im Customizer bzw. Site Editor gesetzt.
5. Mehrsprachige Websites: WPML & Polylang
Auf mehrsprachigen WordPress-Websites vervielfacht sich das Thema – und wird gleichzeitig am häufigsten übersehen. Denn ein deutscher Alt-Text auf der englischen Seitenversion hilft englischsprachigen Screenreader-Nutzern nicht und rankt nicht in der englischen Bildersuche. Barrierefreiheit und Bild-SEO gelten pro Sprachversion.
- WPML: Die Medienübersetzung verwaltet pro Sprache eigene Übersetzungen der Bild-Metadaten – auch des Alternativtexts. Prüfen Sie, ob die Medienübersetzung überhaupt aktiv ist: Ohne sie spielen alle Sprachversionen denselben Alt-Text aus.
- Polylang: Gleiches Prinzip über die Medien-Übersetzungsfunktion – jede Sprachversion eines Mediums trägt ihren eigenen Alternativtext, der separat gepflegt werden muss.
- Kontrolle immer im Frontend: Öffnen Sie dieselbe Seite in jeder Sprache und prüfen Sie das gerenderte
alt-Attribut – die Übersetzungs-Plugins haben zu viele Konfigurationsvarianten, um sich auf die Backend-Ansicht zu verlassen.
Für die Praxis relevant: Bei AutoAlt.ai kostet Mehrsprachigkeit nichts extra – 1 Credit deckt 1 Bild in beliebig vielen der über 130 unterstützten Sprachen ab. Der Aufwand für eine dreisprachige Website ist damit derselbe wie für eine einsprachige.
6. Der WooCommerce-Sonderfall
Betreiben Sie einen WooCommerce-Shop, gelten alle acht Checklisten-Punkte – plus eine Besonderheit: WooCommerce verteilt Produktbilder auf drei Pflegeorte (Hauptbild, Produktgalerie, Variantenbilder in der Varianten-Ansicht). Gerade Variantenbilder fallen bei manuellen Audits durch, weil sie tief im Produkt-Editor stecken. Zusätzlich gilt für Shops seit dem 28. Juni 2025 die EAA/BFSG-Pflicht – die shopspezifischen Punkte (Varianten, Kategorie-Banner, Priorisierung nach Traffic) behandelt ausführlich unsere EAA-Checkliste für E-Commerce; die technische Umsetzung zeigt die WooCommerce-Integration.
7. Selbst testen in 5 Minuten
Bevor Sie in Tools oder Dienstleister investieren: Drei schnelle Prüfungen zeigen, wo Ihre WordPress-Website steht.
- Konsolen-Schnelltest: Beliebige Seite öffnen, F12 drücken, in der Konsole
document.querySelectorAll('img:not([alt])').lengthausführen – das zählt Bilder ganz ohnealt-Attribut. Ergänzend zähltdocument.querySelectorAll('img[alt=""]').lengthdie leeren Attribute; gleichen Sie diese Zahl mit Ihren tatsächlich dekorativen Bildern ab. - Editor-Gegenprobe: Öffnen Sie Ihren meistbesuchten Beitrag im Block-Editor und klicken Sie die Bild-Blöcke durch – so sehen Sie direkt, ob die Kopie-Falle aus Abschnitt 2 bei Ihnen zugeschlagen hat (Mediathek gepflegt, Beitrag veraltet).
- Screenreader-Probe: VoiceOver (Mac, Cmd+F5) oder NVDA (Windows, kostenlos) über eine Seite laufen lassen. Werden Dateinamen vorgelesen, fehlen Attribute; herrscht „Rauschen“ durch beschriebene Zierbilder, fehlt
alt="".
Für den Gesamtüberblick statt Einzelseiten: Der Gratis-Barriere-Check crawlt die Website und liefert die Aufschlüsselung pro Seite.
8. Automatisierung für Bestand und Zukunft
Die Checkliste manuell abzuarbeiten funktioniert bis zu einigen Dutzend Bildern. Darüber übernimmt sinnvollerweise ein Werkzeug die Fleißarbeit: Das AutoAlt.ai-Plugin für WordPress generiert KI-Alt-Texte für die gesamte Mediathek per Bulk, versorgt neue Uploads automatisch und schreibt dabei in das echte alt-Attribut – mit Schutz für bereits manuell gepflegte Texte. Wie die KI-Generierung technisch funktioniert und wo ihre Grenzen liegen, erklärt der Beitrag Wie KI-Alt-Text-Generatoren funktionieren.
Was automatisierbar ist – und was nicht
Beschreiben, formulieren, übersetzen: Automatik. Die redaktionellen Entscheidungen der Checkliste – dekorativ oder informativ (Punkt 4), Linkziel-Beschreibung (Punkt 5), Text-im-Bild-Fälle (Punkt 6) – bleiben menschliche Stichproben-Arbeit. Diese Kombination bringt einen typischen WordPress-Bestand in wenigen Stunden auf Konformitätsniveau, nicht in Wochen.
9. Häufige Fragen
Warum hat mein Bild im Beitrag einen anderen Alt-Text als in der Mediathek?
WordPress kopiert den Mediathek-Alt-Text beim Einfügen in den Beitrag. Danach sind beide unabhängig: Änderungen in der Mediathek wirken sich nicht rückwirkend auf bereits eingefügte Bilder aus. Bestandsinhalte müssen deshalb im Beitrag selbst geprüft werden.
Wie kennzeichne ich ein dekoratives Bild im Block-Editor?
Alt-Text-Feld einfach leer lassen – der Block-Editor weist selbst darauf hin, dass leere Alt-Texte für dekorative Bilder gedacht sind. WordPress rendert dann alt=““, was Screenreader korrekt überspringen.
Was gilt für verlinkte Bilder, z. B. ein Logo mit Link zur Startseite?
Wenn ein Bild der einzige Inhalt eines Links ist, muss der Alt-Text das Linkziel beschreiben, nicht das Bild: „Zur Startseite“ statt „Firmenlogo“. Ein leerer Alt-Text wäre hier ein schwerer Fehler, weil der Link für Screenreader-Nutzer unbenutzbar wird.
Sind Bilder mit Text darin erlaubt?
WCAG 2.1 AA (SC 1.4.5) verlangt: Wenn dieselbe Darstellung mit echtem Text möglich ist, soll echter Text verwendet werden. Ausnahmen sind u. a. Logos. Wo Text im Bild unvermeidbar ist, muss der Alt-Text den kompletten Textinhalt wiedergeben.
Reicht ein Accessibility-Plugin, um WordPress-Bilder konform zu machen?
Overlay-Widgets, die Alt-Texte per JavaScript nachladen, schreiben nichts in den Quellcode – ohne SEO-Wert und in der Accessibility-Community umstritten. Konform und zugleich SEO-wirksam sind nur Alt-Texte, die im HTML-alt-Attribut stehen.
Checklisten-Punkt 1: jetzt in 2 Minuten erledigen.
Der kostenlose Barriere-Check scannt Ihre WordPress-Website und zeigt pro Seite, wo Alt-Texte fehlen.