Warum gibt WordPress alt="" aus, wenn der Alternativtext leer bleibt?

Ein leeres alt-Attribut teilt assistiven Technologien mit, dass das Bild dekorativ ist und übersprungen werden kann. Für Dekoration ist das richtig, ein inhaltlich wichtiges Bild wird dadurch aber verborgen. Automatisierte Werkzeuge können den Unterschied nicht erkennen und melden es daher nicht.

Warum verletzt die Standard-Navigation von WordPress die axe-Regel „list“?

Solange kein Menü angelegt ist, greift der Navigationsblock in Block-Themes auf eine Seitenliste zurück. In diesem Beispiel entstand dadurch ein ul-Element direkt in einem anderen ul. Nach der Umwandlung der Seitenliste in einzelne Links war die verschachtelte Liste verschwunden.

Bedeutet ein sauberer erneuter Scan, dass die WordPress-Website barrierefrei ist?

Nein. Er bedeutet, dass die ausgeführten automatisierten Regeln auf den geprüften Seiten und Zuständen nichts gefunden haben. Tastaturbedienung, Fokussichtbarkeit, Screenreader-Ausgabe und die Qualität der Alternativtexte muss weiterhin ein Mensch prüfen.

Tests & Tools

Barrierefreiheitsprobleme auf einer WordPress-Kundenwebsite beheben und erneut prüfen

Diese Anleitung begleitet eine Seite einer WordPress-Website vom ersten Scan bis zur erneuten Prüfung. Die Website ist eine Demo, die wir am 08.11.26 für diesen Artikel aufgesetzt haben, keine Kundenwebsite: WordPress 6.8.3, das Standard-Theme Twenty Twenty-Five und eine Startseite mit Inhalten, wie Agenturen sie typischerweise übernehmen. Alle Befunde und Messwerte stammen von dieser Website. Geprüft wurde mit axe-core 4.13.0, der Regel-Engine, die AllyProof neben HTML_CodeSniffer einsetzt; ein AllyProof-Scan derselben Seite kann daher zusätzliche Befunde melden.

Was der erste Scan fand

Drei Problemgruppen, alle als schwerwiegend eingestuft:

Befund	Wo	WCAG
Textkontrast 2,52:1 (erforderlich 4,5:1)	Einleitungsabsatz mit eigener grauer Textfarbe (`#a3a3a3` auf Weiß)	1.4.3
Link ohne zugänglichen Namen	Verlinktes Logo-Bild mit leerem Alternativtext	2.4.4, 4.1.2
Liste enthält eine Liste	Kopfnavigation: Der Standard-Fallback „Seitenliste“ erzeugte ein `ul` direkt im `ul` der Navigation	1.3.1

Der dritte Befund war nicht absichtlich eingebaut. Er stammt aus dem Standard-Header von WordPress auf einer Website, auf der noch niemand ein Menü angelegt hatte - das trifft auf viele frisch übergebene Kundenwebsites zu.

Was der Scan nicht erkennen konnte

Zwei Probleme auf derselben Seite bestanden alle automatisierten Regeln:

Ein inhaltlich wichtiges Foto, als dekorativ markiert. Bleibt der Alternativtext im Bild-Block leer, gibt WordPress alt="" aus. Screenreader überspringen das Bild dann. Bei einem Foto des Empfangs der Praxis verbirgt das Inhalt - ob ein Bild Bedeutung trägt, kann aber nur ein Mensch entscheiden, deshalb meldet keine Regel es.
Ein Platzhalter als einzige Beschriftung. Das eingefügte Newsletter-Formular hatte ein E-Mail-Feld mit placeholder="Your email" und ohne Label. axe-core akzeptiert den Platzhalter als zugänglichen Namen, die Regel besteht also - der Hinweis verschwindet aber, sobald jemand tippt. Ein sichtbares Label ist die verlässliche Lösung.

Halten Sie solche Punkte als manuelle Prüfung neben den automatisierten Befunden fest. Dann bleibt die Übergabe ehrlich: Das Scan-Ergebnis ist eine erste Liste, nicht die vollständige.

Die Korrekturen im WordPress-Editor

Kontrast. Absatz auswählen, Stile > Farbe > Text öffnen und eine dunklere Farbe wählen. Wir haben #525252 verwendet, das auf Weiß 7,81:1 erreicht. Bevorzugen Sie eine Farbe aus der Theme-Palette, damit spätere Änderungen einheitlich bleiben.
Verlinktes Logo. Bild-Block auswählen und Alternativer Text ausfüllen. Bei einem verlinkten Bild beschreiben Sie das Ziel: „Über Riverside Dental“.
Foto vom Empfang. Einen Alternativtext ergänzen, der sagt, was das Bild zeigt: „Empfangstresen der Praxis Riverside Dental“. Ist ein Bild tatsächlich dekorativ, ist ein leerer Alternativtext richtig - als bewusste Entscheidung, nicht als Voreinstellung.
Navigation. Im Website-Editor die Navigation im Header auswählen, darin die Seitenliste auswählen und in einzelne Links umwandeln (der Editor bietet dafür eine Bearbeiten-Aktion am Seitenliste-Block an; die Bezeichnung unterscheidet sich je nach Version). Das Menü besteht danach aus einer einzigen Linkliste.
Newsletter-Formular. Im Block „Individuelles HTML“ ein sichtbares <label for="newsletter-email">E-Mail-Adresse</label> ergänzen, dem Eingabefeld die passende id geben und autocomplete="email" hinzufügen. Stammt das Formular von einem Newsletter-Anbieter, prüfen Sie zuerst, ob dessen Formular-Editor eine Label-Einstellung hat - dann übersteht die Korrektur ein erneutes Einfügen.

Die erneute Prüfung

Derselbe axe-core-Lauf ergab nach den Änderungen keinen automatisierten Befund, bei 1280 Pixel und bei 375 Pixel Breite (dort klappt das Theme die Navigation zusammen). Die beiden Punkte für die manuelle Prüfung wurden durch die Änderungen in Schritt 3 und 5 behoben.

Was ein Mensch noch prüfen sollte, bevor Sie dem Kunden die Seite als erledigt melden:

Mit der Tabulatortaste durch die Seite gehen: Alle Links, der Menüschalter und das Formular sind erreichbar, der Fokus ist sichtbar und die Reihenfolge ist sinnvoll.
Das mobile Menü mit Tastatur und Screenreader öffnen und schließen.
Die Alternativtexte im Kontext vorlesen: Vermitteln sie, was sehende Besucher dem Bild entnehmen?
Das Newsletter-Formular leer und mit ungültiger Adresse absenden und prüfen, ob der Fehler angekündigt und erklärt wird.

Derselbe Ablauf mit AllyProof

Der kostenlose Einzelseiten-Test zeigt die automatisierten Befunde für eine URL. Nutzen Sie nach dem Ausrollen einer Korrektur im Ergebnis Neuen Scan starten: Ein wiederholter Test innerhalb von 24 Stunden zeigt sonst das zwischengespeicherte Ergebnis, und das wäre keine erneute Prüfung. Eine Kundenwebsite, die Sie betreuen, fügen Sie als Website hinzu: Jeder spätere Scan - manuell oder geplant (monatlich im Free-Tarif, wöchentlich im Business-Tarif) - markiert nicht mehr gefundene Probleme als behoben, sodass der Verlauf zeigt, welche Korrekturen wirken. Business kostet 35 € pro Website und Monat oder 336 € pro Website und Jahr, mit einer 14-tägigen Testphase für berechtigte Konten (Zahlungsmethode erforderlich; verlängert sich bis zur Kündigung).

Schicken Sie dem Kunden drei Dinge: was gefunden und mit welchem Datum behoben wurde, was die automatisierte erneute Prüfung ergab und welche manuellen Prüfungen abgeschlossen oder noch offen sind. Das hilft einem Kunden mehr als ein Score und verspricht keine Konformität, die ein Scan nicht feststellen kann.

Häufige Fragen

Warum gibt WordPress alt="" aus, wenn der Alternativtext leer bleibt?: Ein leeres alt-Attribut teilt assistiven Technologien mit, dass das Bild dekorativ ist und übersprungen werden kann. Für Dekoration ist das richtig, ein inhaltlich wichtiges Bild wird dadurch aber verborgen. Automatisierte Werkzeuge können den Unterschied nicht erkennen und melden es daher nicht.
Warum verletzt die Standard-Navigation von WordPress die axe-Regel „list“?: Solange kein Menü angelegt ist, greift der Navigationsblock in Block-Themes auf eine Seitenliste zurück. In diesem Beispiel entstand dadurch ein ul-Element direkt in einem anderen ul. Nach der Umwandlung der Seitenliste in einzelne Links war die verschachtelte Liste verschwunden.
Bedeutet ein sauberer erneuter Scan, dass die WordPress-Website barrierefrei ist?: Nein. Er bedeutet, dass die ausgeführten automatisierten Regeln auf den geprüften Seiten und Zuständen nichts gefunden haben. Tastaturbedienung, Fokussichtbarkeit, Screenreader-Ausgabe und die Qualität der Alternativtexte muss weiterhin ein Mensch prüfen.