Vom Testergebnis zur betroffenen Stelle
Der Barrierefreiheits-Inspektor verbindet einen Befund aus dem Plugin mit der entsprechenden Stelle auf deiner Website. Du kannst zum Beispiel einen schwer erkennbaren Link finden, die Erklärung lesen und eine mögliche Änderung vorübergehend ansehen. Dafür musst du keinen HTML-Code bearbeiten.
Der Inspektor steht in allen Tarifen bereit. Das Öffnen, Durchsehen und Anzeigen gespeicherter Fixes verbraucht kein KI-Kontingent. Nur eine neue KI-Generierung nutzt dein verfügbares Kontingent. Ein automatischer Test und eine Vorschau ersetzen keine vollständige manuelle WCAG-Prüfung.
Inspektor öffnen und bedienen
- Öffne im Plugin Barrierefreiheitstest und die Details eines gespeicherten Ergebnisses.
- Wähle Inspektor öffnen, um die betroffenen Elemente zu durchgehen. Die Inspektor-Aktion an einem einzelnen Befund führt direkt zu dieser Stelle.
- Nutze die Elementnummern, Vorheriges Element, Nächstes Element oder Überblick. Mehrere Befunde können dasselbe Element betreffen.
- Lies zuerst die Karte Befund. Sie beschreibt das gemeldete Problem. Die Element-Karte darüber hilft dir, die richtige Stelle zu erkennen.
Auf dem Desktop kannst du den Inspektor über die Positionsauswahl andocken und am vorgesehenen Rand vergrößern. Auf dem Smartphone erscheint er als unteres Panel. Mit Inspektor ausblenden erhältst du mehr Platz; anschließend kannst du ihn wieder einblenden. Eine aktive Vorschau bleibt dabei erhalten. Bediene die Schaltflächen und aufklappbaren Bereiche auch mit Tab sowie Enter oder Leertaste.
Was zeigt die Element-Karte?
| Anzeige | Bedeutung und hilfreicher nächster Schritt |
|---|---|
| Ausgewähltes Element | Text oder Beschreibung, an dem du die Stelle erkennst. Bei einem Bild kann dies der Alternativtext sein. Eine Beschreibung aus dem gespeicherten Ergebnis kann vom heutigen Seiteninhalt abweichen. |
| Symbol und Elementtyp | Zeigen beispielsweise Link, Bild, Überschrift oder Schaltfläche. Der Typ wird zusätzlich als Text genannt. |
| Sichtbarkeit | Beschreibt, ob die Stelle im aktuellen Seitenzustand sichtbar und hervorhebbar ist. Sichtbar bedeutet noch nicht barrierefrei. |
| DOM-Pfad | Die technische Adresse des Elements innerhalb der geladenen Seite. Du brauchst sie meist nur, wenn du den Befund an deinen Entwickler weitergibst. Sie ist keine Internetadresse. |
| Beschreibung | Hilft bei der Zuordnung. Sie ist keine verbindliche Wiedergabe dessen, was jeder Screenreader ansagt. |
| Rolle | Die Funktion des Elements, etwa link für Link oder button für Schaltfläche. Diese technischen Werte werden nicht übersetzt. |
| Größe | Die aktuell gemessene Breite und Höhe in Pixeln. Daraus allein lässt sich nicht beurteilen, ob das Element ausreichend bedienbar ist. |
| Accessibility-Baum | Eine Einschätzung, ob das Element für assistive Technologien verfügbar ist. Die Grenzen dieser Anzeige erklärt der nächste Abschnitt. |
Öffne DOM-Pfad und Details, wenn du diese Zusatzangaben brauchst. Der Kopierbutton übernimmt den Pfad; eine Rückmeldung bestätigt das Kopieren.
Was bedeutet Accessibility-Baum?
Der Browser stellt Hilfsmitteln wie Screenreadern eine vereinfachte Darstellung der Seite bereit. Sie enthält zum Beispiel Namen, Rollen und Zustände von Bedienelementen. So kann ein Screenreader eine Schaltfläche samt Beschriftung und Zustand vermitteln.
Enthalten (bestmögliche Ermittlung) bedeutet: Das Plugin schätzt anhand der geladenen Seite, dass das Element darin verfügbar ist. Es liest nicht den tatsächlichen Accessibility-Baum des Browsers aus. Die Anzeige beweist deshalb weder eine korrekte Ansage noch vollständige Bedienbarkeit.
Ausgeschlossen (bestmögliche Ermittlung) ist nicht automatisch ein Fehler. Dekoration oder der Inhalt eines geschlossenen Menüs darf je nach Situation ausgeblendet sein. Ein benötigter Link oder eine aktive Schaltfläche muss dagegen zugänglich bleiben. Prüfe die betroffene Funktion mit der Tastatur und bei Bedarf mit einem Screenreader.
Die WCAG verlangen bei Bedienelementen unter anderem, dass Name, Rolle und relevante Zustände ermittelbar sind. Die Anzeige hilft bei der Orientierung, ist aber kein eigenständiges WCAG-Prüfergebnis. WCAG 4.1.2: Name, Rolle, Wert – W3C-Erklärung
Wenn keine eindeutige Markierung erscheint
| Situation | Was du tun kannst |
|---|---|
| Unsichtbar | Öffne das betreffende Menü, den Tab oder den Dialog selbst, sofern die Funktion dort liegt. Der Inspektor öffnet absichtlich geschlossene Bereiche nicht automatisch. |
| Nur sichtbarer Kontext | Das Element besitzt keine eigene sichtbare Fläche. Die Markierung zeigt zur Orientierung einen sichtbaren untergeordneten Bereich. Prüfe die Beschreibung und den Befund zusammen. |
| Nicht gefunden | Die Seite kann sich seit dem Test geändert haben. Starte einen neuen Barrierefreiheitstest und öffne den Inspektor aus diesem Ergebnis. |
| Mehrere passende Elemente | Vergleiche Linktext und umgebenden Absatz. Wähle ein Vorschauziel nur, wenn du die Stelle sicher zuordnen kannst. Gleicher Text oder die erste Position allein reichen nicht. |
| Befund betrifft die ganze Seite | Es gibt kein einzelnes Ziel. Prüfe die im Befund beschriebene Seitenstruktur statt einer bestimmten Schaltfläche. |
| Kontext ungültig oder abgelaufen | Lade die Ergebnisliste neu und öffne den Inspektor erneut von dort. Wiederhole den Test, wenn die Seite inzwischen geändert wurde. |
Eine Verbesserung mit AI-Element-Fix prüfen
Wähle AI-Element-Fix generieren. Das Plugin nutzt den verfügbaren Befund und einen begrenzten Elementkontext für den Vorschlag. Prüfe die empfohlene Lösung, bevor du Änderungen übernimmst.
- Warum ist das wichtig? erklärt die Auswirkung auf Besucher.
- Code und Vorschau zeigt vorhandenes und gegebenenfalls vorgeschlagenes Markup. Lange Codezeilen lassen sich horizontal scrollen und kopieren.
- So prüfst du die Änderung nennt die anschließenden Kontrollen.
Eine angebotene Vorschau ändert die Seite nur vorübergehend in deinem Browser. Du kannst sie rückgängig machen; beim Wechsel zum nächsten Element wird sie zurückgenommen. Ausblenden und erneutes Einblenden des Inspektors speichern oder entfernen sie nicht. Eine Vorschau speichert keine Inhalte oder Einstellungen in WordPress.
Nicht jede Lösung lässt sich sicher vorführen. Fehlt die Vorschau oder prüfbarer Code, lies den Hinweis an dieser Stelle. Prüfe den Kontext, wiederhole gegebenenfalls den Test oder gib die Anleitung an deinen Entwickler weiter. Verändere keine beliebigen Attribute nur, um einen Testhinweis verschwinden zu lassen.
Typische Befunde im Zusammenhang mit WCAG
Ein Link ist nur durch seine Farbe erkennbar: Eine dauerhafte Unterstreichung kann ihn auch ohne Farberkennung kenntlich machen. Der Kontrast zum Hintergrund muss zusätzlich passen. Der im Befund genannte Unterschied zwischen Link und Fließtext ist eine andere Messung. WCAG 1.4.1: Benutzung von Farbe
Eine Überschrift passt nicht zur Gliederung: Prüfe den Abschnitt und die vorhergehenden Überschriften. Wähle die Ebene nach dem Inhalt, nicht nach der gewünschten Schriftgröße. Nicht jeder Rücksprung zu einer übergeordneten Ebene ist falsch. WCAG 1.3.1: Informationen und Beziehungen
Eine Schaltfläche hat keinen verständlichen Namen: Ergänze eine passende Beschriftung, die die Aktion erklärt. Prüfe anschließend, ob sie auch mit einem Screenreader verständlich ist. Die Rolle allein ersetzt keinen Namen. WCAG 4.1.2: Name, Rolle, Wert
Änderungen dauerhaft übernehmen und kontrollieren
- Ermittle, wo das Element gepflegt wird: im Inhalt, einem Block, dem Page Builder, einer Vorlage oder einem anderen Plugin.
- Setze die geprüfte Änderung dort um. Das Kopieren des Vorschlags allein ändert die Website nicht.
- Prüfe die betroffene Funktion auf Desktop und Smartphone, mit der Tastatur und bei Bedarf mit einem Screenreader. Achte auf verständliche Beschriftung, sichtbaren Fokus und erhaltene Funktion.
- Starte einen neuen Barrierefreiheitstest. Ein verschwundener Befund bestätigt nur die betreffende automatische Prüfung; kontrolliere auch die Nutzung im Zusammenhang.
Weitere Informationen: Barrierefreiheitstest · Erklärung & Lösung und AI-Element-Fix