Website-Audit-Software
Aus einer Meldung wird ein Arbeitsauftrag
Links, Schaltflächen, Bilder: die Befunde, die jedes Werkzeug meldet.
Prüfabdeckung sichtbar machen
Ein Audit sieht nur den Zustand, den Sie öffnen
Gute Audit-Software nennt nicht nur Regeln. Sie hält URL, Interaktion, Element und Zeitpunkt so fest, dass ein Befund wiederholbar wird.
URL, Viewport, Prüfzeit
manuell hergestellter Zustand
Klickfolge und Testdaten
gleiche Konfiguration über Zeit
Im Lauf enthaltenDieser Zustand wird gerendert und geprüft.
Nicht automatisch erreichtEr braucht eine Aktion, Anmeldung oder eigene Konfiguration.
Menschliche BewertungDie Regel kann Fundstellen liefern, aber nicht jede Qualitätsfrage entscheiden.
Aus der Regel wird erst mit Kontext ein Arbeitsauftrag
Ein exportierter Regelname reicht nicht. Vier Belege halten den Fehler auffindbar.
Automatisieren Sie Fundstellen, nicht das Urteil
Dieselben Regeln haben einen maschinellen und einen inhaltlichen Anteil.
Software: Findet einen Link ohne ermittelbaren Namen.
Prüfung: Beschreibt der Linktext sein Ziel im jeweiligen Kontext?
Software: Findet eine Schaltfläche ohne ermittelbaren Namen.
Prüfung: Benennt der Name die ausgelöste Aktion eindeutig?
Software: Findet ein Bild ohne erforderliches alt-Attribut.
Prüfung: Passt der Text zur Funktion dieses Bilds auf dieser Seite?
Wählen Sie nach Abdeckung und Übergabe
- ZugangErreicht das Werkzeug öffentliche, angemeldete und interaktive Zustände?
- WiederholungLassen sich dieselben Schritte in CI oder Monitoring erneut ausführen?
- BelegEnthält jeder Befund URL, Zustand, Element und verständliche Regelhilfe?
- WorkflowBleiben Verantwortung, Korrektur und Re-Test miteinander verbunden?
Testen Sie die Software mit einem Zustandswechsel
1Prüfen Sie eine Seite im Ausgangszustand.
→2Öffnen Sie Menü, Dialog oder Formularfehler.
→3Prüfen Sie erneut und vergleichen Sie Fundstellen und Belege.
Ein brauchbarer Prozess macht sichtbar, welcher Zustand geprüft wurde und wie Sie ihn für den Re-Test wiederherstellen.
Primärquellen
- W3C WAI: Evaluating Web AccessibilityWerkzeuge unterstützen; fachkundige menschliche Bewertung bleibt erforderlich.
- axe-core: JavaScript APIGerenderter Kontext und erneute Prüfung aktivierter Inhalte
- W3C: WCAG-EM 2.0Repräsentative Stichprobe, Zustände und vollständige Prozesse
Aus dem Prüfbericht
Drei Meldungen, drei Arbeitsaufträge
Kritisch Leere Links in der Kachelvorlage Regel link-name
Das Werkzeug meldet Links ohne Text. Ein Wort im Link nennt das Ziel, einmal in der Vorlage geändert.
Kritisch Symbolknöpfe in der Kopfzeile Regel button-name
Ein Knopf ohne Text bleibt namenlos. aria-label benennt die Aktion, die der Klick auslöst.
Kritisch Bilder aus dem Redaktionssystem Regel image-alt
Bilder ohne alt landen als eigene Zeile im Bericht. Ein Pflichtfeld beim Hochladen hält sie draußen.
Zum Mitnehmen
Die Kachelvorlage, korrigiert
Ein Linktext, ein Knopfname, ein Alt-Text.
Korrektur in 3 Schritten ansehen
Den Kachel-Link sein Ziel nennen lassen
Ein Bild allein ist kein Linktext. Der Titel der Kachel wird zum Link, das Bild daneben bleibt Dekoration.
KorrekturvergleichSchritt 1 · HTML Vorher
<a href="/kurse/toepfern" class="kachel"> <img src="toepfern.jpg"> </a>Nachher
<img src="toepfern.jpg" alt=""> <a href="/kurse/toepfern" class="kachel">Zum Töpferkurs</a>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jede Kachel nennt ihr Ziel.
Den Symbolknopf benennen
Das Symbol bleibt sichtbar und für Vorleseprogramme verborgen. aria-label liefert das Wort, das der Bericht vermisst.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" class="suche"> <svg aria-hidden="true"><use href="#icon-lupe"></use></svg> </button>Nachher
<button type="button" class="suche" aria-label="Suche öffnen"> <svg aria-hidden="true"><use href="#icon-lupe"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf die Lupe. Sie heißt jetzt „Suche öffnen“.
Redaktionsbilder beschriften
Der Dateiname ist kein Alt-Text. Ein Satz sagt, was das Bild zum Beitrag beiträgt.
KorrekturvergleichSchritt 3 · HTML Vorher
<img src="upload-2026-04.jpg" class="beitragsbild">Nachher
<img src="upload-2026-04.jpg" class="beitragsbild" alt="Offener Brennofen mit fertigen Schalen">Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie Bilder im Browser aus. An der Stelle steht der Satz.