Website Accessibility Monitoring
Eine Formularvorlage, viele Seiten
Feldname, zweites Label, doppelte ID: drei Befunde aus einer Vorlage.
Befunde über Zeit
Monitoring beginnt bei der Änderung
Ein fester Termin allein findet keine Ursache. Verknüpfen Sie Releases, Veröffentlichungen und Stichproben mit vergleichbaren Prüfständen.
Illustrativer Verlauf
Eine Regression von der Änderung bis zum Re-Test
- 01BaselineUmfang und Verfahren festgehalten
- 02ReleaseFormularvorlage geändert
- 03Neuer BefundLabel-Verbindung fehlt
- 04Re-TestKorrektur am selben Fall bestätigt
Drei Fundstellen können eine Ursache haben. Der Verlauf bleibt erst dann aussagekräftig, wenn Bericht und Ticket auf die gemeinsame Komponente zeigen.
Wie oft prüfen?
Drei Rhythmen statt eines Pauschalintervalls
Legen Sie die Taktung nach Änderungshäufigkeit, Reichweite und Risiko fest. Dokumentieren Sie, welcher Auslöser welchen Prüfumfang startet.
- Bei jedem ReleaseAuslöser: Code
Geänderte Komponenten und die wichtigsten Abläufe gegen die Baseline prüfen.
- Bei jeder VeröffentlichungAuslöser: Inhalt
Neue Bilder, Überschriften, Tabellen und Einbettungen im Redaktionsprozess prüfen.
- Regelmäßig als StichprobeAuslöser: Termin
Repräsentative Seiten und Nutzeraufgaben mit manueller Prüfung ergänzen.
Vergleichbarer Prüfstand
Was jeder Lauf festhalten muss
Nur gleiche Bezugsgrößen ergeben einen brauchbaren Trend. Ändert sich der Umfang, gehört die Änderung sichtbar in den Bericht.
- Auslöser
- Release · Revisions-ID
- Umfang
- Vorlage + drei Seitentypen
- Verfahren
- Automatische Regeln + Tastatur + Vorleseprogramm
- Befund
- Regel · Seite · Element · Auswirkung
- Verantwortung
- Person · Fälligkeit · Re-Test
Automatische Läufe liefern Frühwarnsignale. Sie ersetzen weder menschliches Urteil noch eine repräsentative Konformitätsbewertung.
So prüfen Sie es
Kann Ihr Verlauf eine Frage beantworten?
- Was änderte sich?Release, Inhalt oder Prüfumfang benennen.
- Wo liegt die Ursache?Fundstellen auf Vorlage oder Prozess zurückführen.
- Ist die Korrektur belegt?Den ursprünglichen Fall im Re-Test wiederholen.
Aus dem Prüfbericht
Drei Befunde, eine Vorlage
Kritisch Das Feld in der gemeinsamen Vorlage Regel label
Ein Umbau hat die Beschriftung vom Feld getrennt. Über for und die id sitzen sie wieder zusammen.
Prüfen Zwei Beschriftungen an einem Feld Regel form-field-multiple-labels
Name und Hinweis stehen beide als label am selben Feld. Der Hinweis wird zum span mit aria-describedby.
Prüfen Dieselbe ID auf jeder Wiederholung Regel duplicate-id-aria
Die Vorlage vergibt eine feste ID. Kommt sie mehrfach im Dokument vor, trifft der ARIA-Verweis das falsche Ziel.
Zum Mitnehmen
Die Formularvorlage, korrigiert
Ein Name je Feld, ein Hinweis daneben, eigene IDs je Wiederholung.
Korrektur in 3 Schritten ansehen
Beschriftung und Feld wieder verbinden
Die Klasse bleibt, das Element wird zum label. Über for und die id gehören Text und Feld wieder zusammen.
KorrekturvergleichSchritt 1 · HTML Vorher
<span class="feldname">Mietdauer</span> <input id="mietdauer" type="number" min="1" max="24">Nachher
<label class="feldname" for="mietdauer">Mietdauer</label> <input id="mietdauer" type="number" min="1" max="24">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Mietdauer“. Der Cursor landet im Zahlenfeld.
Aus dem zweiten Label einen Hinweis machen
Ein Feld hat einen Namen und darf zusätzliche Hinweise tragen. aria-describedby macht aus dem zweiten Label den Hinweis.
KorrekturvergleichSchritt 2 · HTML Vorher
<label for="mietdauer">Mietdauer</label> <input id="mietdauer" type="number" min="1" max="24"> <label for="mietdauer">Angabe in Stunden</label>Nachher
<label for="mietdauer">Mietdauer</label> <input id="mietdauer" type="number" min="1" max="24" aria-describedby="mietdauer-hinweis"> <span id="mietdauer-hinweis">Angabe in Stunden</span>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt erst „Mietdauer“, dann den Hinweis. Beides bleibt sichtbar.
IDs je Wiederholung eindeutig vergeben
Eine wiederholte Vorlage vergibt dieselbe ID mehrfach. Der Verweis trifft dann das erste Vorkommen. Eine laufende Nummer löst das.
KorrekturvergleichSchritt 3 · HTML Vorher
<article class="karte" aria-describedby="karten-hinweis"> <p id="karten-hinweis">Preis je angefangener Stunde.</p> </article> <article class="karte" aria-describedby="karten-hinweis"> <p id="karten-hinweis">Abholung nur werktags.</p> </article>Nachher
<article class="karte" aria-describedby="karten-hinweis-1"> <p id="karten-hinweis-1">Preis je angefangener Stunde.</p> </article> <article class="karte" aria-describedby="karten-hinweis-2"> <p id="karten-hinweis-2">Abholung nur werktags.</p> </article>Markierte Zeilen wurden geändert
So prüfen Sie es Lassen Sie die zweite Karte vorlesen. Sie nennt jetzt ihren eigenen Hinweis.