Web Accessibility Monitoring
Neue Inhalte bringen neue Befunde
Links, Bilder, Farben: die Stellen, an denen Redaktion Barrieren einträgt.
Web Accessibility Monitoring
Ein Befund braucht einen Rückweg
Monitoring wird erst wirksam, wenn Änderungen vergleichbar geprüft, neue Befunde zugeordnet und Korrekturen belegt in den nächsten Lauf zurückgeführt werden.
Betriebsmodell · keine Produktansicht
Vom Website-Update zur belastbaren Nachprüfung
fortlaufender Kreislauf
- Komponenten-Release
- neuer redaktioneller Inhalt
- CMS- oder Designänderung
- Rückmeldung einer Person
- 01Umfang stabil halten
Gleiche Vorlagen, Kernwege, Regeln und angemeldete Zustände.
Basis · vergleichbar - 02Prüfung ausführen
Automatische Regeln, vereinbarte manuelle Checks und Feedback erfassen.
Lauf · mit Zeitbezug - 03Delta statt Summe lesen+ neu• weiterhin offen✓ behoben
Änderungen werden gegen die gewählte Basis erklärt.
- 04Ursache und Eigentümer finden
- Vorlage
- Frontend-Team
- Inhalt
- Redaktion
- Prozess
- Produktverantwortung
- 05Korrektur nachprüfen
Fundstelle, Prüfschritt und Ergebnis bleiben am Befund dokumentiert.
Beleg · abgeschlossen
Zurück in die Basis Erst nach der Nachprüfung wird der neue Stand zur Referenz für kommende Läufe.
Scan oder Monitoring?
Der Unterschied liegt zwischen den Läufen
Ein Scan liefert einen Zustand. Monitoring speichert den Bezug: Was ist seit der Basis neu, was blieb offen, was wurde geprüft behoben und wodurch kam es zurück?
Fundstellen, aber keine Änderungsgeschichte.
Prüfabdeckung
Drei Eingänge, ein gemeinsames Befundbuch
Automatisierung beobachtet wiederholbar prüfbare Regeln. Menschliche Prüfung und Rückmeldungen ergänzen, was kein Werkzeug sicher beurteilen kann.
Automatisch
- fehlende zugängliche Namen
- fehlende Textalternativen
- messbare Kontrastfehler
Stärke: wiederholbar über denselben Umfang.
Manuell
- Tastaturwege und Fokuslogik
- Qualität von Alternativtexten
- vollständige Nutzerprozesse
Stärke: Bedeutung und Bedienung beurteilen.
Feedback
- Barrieren im realen Nutzungskontext
- Geräte- und Hilfstechnik-Kombinationen
- Probleme außerhalb des Prüfmusters
Stärke: unerwartete Lücken sichtbar machen.
Vor der Werkzeugwahl
Schreiben Sie diesen Monitoring-Auftrag zuerst
Ein Werkzeug ist passend, wenn es Ihren Auftrag abbildet. Prüfen Sie die fünf Felder in einer Demo mit einer echten Änderung, nicht nur im Funktionsvergleich.
- Umfang
- Vorlagen, Kernwege, dynamische und angemeldete Zustände.
- Auslöser
- Releases, Inhaltsänderungen, regelmäßige Reviews und Feedback.
- Vergleich
- Neue, offene und behobene Befunde mit Fundstelle und Zeitpunkt.
- Routing
- Eigentümer nach Ursache, vereinbarte Reaktion und Eskalationsweg.
- Abschluss
- Nachprüfung, Beleg und dokumentierte Ursache der Regression.
Aus dem Prüfbericht
Drei Befunde aus dem neuen Lauf
Kritisch Neue Teaser ohne Linktext Regel link-name
Bild und Pfeil verlinken ohne Wort. Der Titel der Kachel wird zum Link, ein Link pro Kachel.
Kritisch Hochgeladene Bilder ohne alt Regel image-alt
Die Redaktion lädt Bilder ohne Textalternative hoch. Ein Pflichtfeld im Redaktionssystem hält den Befund aus dem nächsten Lauf.
Kritisch Neue Markenfarbe auf hellem Grund Regel color-contrast
Ein neuer Farbwert im Design fällt unter 4,5:1. Der Wert gehört einmal ins Stylesheet, nicht in jede Kachel.
Zum Mitnehmen
Die Teaser-Kachel, korrigiert
Ein Link pro Kachel und ein Farbwert an einer Stelle.
Korrektur in 2 Schritten ansehen
Den Kacheltitel zum Link machen
Ein Link pro Kachel, und sein Text nennt das Ziel. Das Bild daneben ist Dekoration und bekommt ein leeres alt.
KorrekturvergleichSchritt 1 · HTML Vorher
<a href="/sommerfest"> <img src="fest.jpg"> </a> <h3>Sommerfest am 12. Juli</h3>Nachher
<img src="fest.jpg" alt=""> <h3><a href="/sommerfest">Sommerfest am 12. Juli</a></h3>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Linkliste eines Vorleseprogramms. Jede Kachel steht dort mit ihrem Titel.
Die Markenfarbe einmal korrigieren
Der Farbwert steht an einer Stelle. Ein dunklerer Ton bringt jeden Kacheltext über 4,5:1, ohne die Vorlagen anzufassen.
KorrekturvergleichSchritt 2 · CSS Vorher
:root { --marke: #7fb3a2; } .kachel p { color: var(--marke); background: #ffffff; }Nachher
:root { --marke: #2f6d5a; } .kachel p { color: var(--marke); background: #ffffff; }Markierte Zeilen wurden geändert
So prüfen Sie es Vergleichen Sie zwei Läufe. Der Kontrastbefund verschwindet auf allen Kacheln gleichzeitig.