Sehen Sie, wie ein ComplyPages-Finding aussieht
Unsere Berichte sind auf Handlung ausgelegt. Jedes Finding erklärt, wo das Problem auftritt, warum es wichtig ist und was Ihr Entwickler oder Ihre Agentur als Nächstes tun kann.
Berichtsstruktur
- Executive Summary
- Geprüfter Flow
- Top sichtbare Barrierefreiheitsrisiken
- Entwicklerfertige Issue-Details
- Vorgeschlagene Fix-Queue
- Retest-Checkliste
- Monitoring-Empfehlung
1. Executive Summary
Dieses Beispiel-Snapshot prüft einen öffentlichen Bezahlvorgang und benennt sichtbare Barrierefreiheits-Risiken, die Tastaturbedienung, Verständlichkeit für Screenreader und das Ausfüllen von Formularen betreffen können. Es ist weder eine rechtliche Bewertung noch eine Zertifizierung, sondern eine praktische Beobachtung, die einem Webteam hilft, Korrekturen in einem kundenkritischen Ablauf zu priorisieren.
2. Geprüfter Flow
Beispiel-Snapshot für
example-store.com
Warenkorb → Kasse → Zahlung
Flow-Typ
E-Commerce-Bezahlvorgang
Geprüfte Seiten
4 öffentliche Seiten
3. Top sichtbare Barrierefreiheitsrisiken
- Die Bestellschaltfläche hat keinen zugänglichen Namen (hoch)
- Ein Pflichtfeld ist nicht programmatisch beschriftet (mittel)
- Die Fehlermeldung wird nach dem Absenden nicht eindeutig ausgegeben (mittel)
4. Entwicklerfertige Issue-Details
Die Bestellschaltfläche hat keinen zugänglichen Namen
Element: button.checkout-submit
EAA relevance: EAA-Bereitschaft — sichtbares Barrierefreiheits-Risiko im öffentlichen Bezahlvorgang
Schritte zur Reproduktion
- https://example-store.com/checkout mit gefülltem Warenkorb öffnen
- Die abschließende Schaltfläche mit Screenreader oder axe DevTools prüfen
- Fehlenden zugänglichen Namen auf button.checkout-submit feststellen
Auswirkung für Kundinnen und Kunden
Screenreader-Nutzende erfahren möglicherweise nicht, welche Aktion die Schaltfläche auslöst.
Geschäftliche Auswirkung
Wer die abschließende Bestellaktion nicht erkennt, kann den Kauf nicht abschließen. Technischer Hinweis: Die Schaltfläche ist sichtbar, ihr zugänglicher Name fehlt jedoch oder ist unklar.
Vorgeschlagene Korrektur
Einen sichtbaren Text oder einen zugänglichen Namen ergänzen, der die Aktion beschreibt.
Beispiel zum Kopieren
Nur ein Beispiel — an Ihren Code anpassen.
<button class="checkout-submit" aria-label="Bestellung abschließen">
Bestellung abschließen
</button>Abnahmekriterien
- Die Schaltfläche wird von Hilfstechnik als „Bestellung abschließen“ oder gleichwertig angekündigt
- Die Schaltfläche ist per Tastatur erreichbar und auslösbar
Ein Pflichtfeld ist nicht programmatisch beschriftet
Element: input#customer-email
EAA relevance: EAA-Bereitschaft — sichtbares Barrierefreiheits-Risiko im öffentlichen Bezahlvorgang
Schritte zur Reproduktion
- https://example-store.com/checkout öffnen
- Per Tabulator zum E-Mail-Feld navigieren
- Bestätigen, dass input#customer-email im Accessibility-Baum keine zugeordnete Beschriftung hat
Auswirkung für Kundinnen und Kunden
Nutzende von Hilfstechnik wissen möglicherweise nicht, welche Angabe erwartet wird.
Geschäftliche Auswirkung
Erschwertes Ausfüllen erhöht die Abbruchquote im Bezahlvorgang. Technischer Hinweis: Die sichtbare Beschriftung ist nicht korrekt mit dem Eingabefeld verbunden.
Vorgeschlagene Korrektur
Die Beschriftung über eine gültige for/id-Beziehung oder ein gleichwertiges Verfahren mit dem Feld verbinden.
Beispiel zum Kopieren
Nur ein Beispiel — an Ihren Code anpassen.
<label for="customer-email">E-Mail-Adresse</label>
<input id="customer-email" type="email" name="email" required />Abnahmekriterien
- Die Feldbeschriftung wird von Hilfstechnik korrekt angekündigt
- Der Pflichtcharakter des Feldes ist eindeutig
Die Fehlermeldung wird nach dem Absenden nicht eindeutig ausgegeben
Element: .field-error
EAA relevance: EAA-Bereitschaft — sichtbares Barrierefreiheits-Risiko im öffentlichen Bezahlvorgang
Schritte zur Reproduktion
- Das Bestellformular mit einer ungültigen E-Mail-Adresse absenden
- Beobachten, dass die sichtbare Fehlermeldung erscheint
- Bestätigen, dass der Fehler weder angekündigt noch mit dem Feld verknüpft ist
Auswirkung für Kundinnen und Kunden
Nutzende verstehen möglicherweise nicht, warum sie nicht fortfahren können.
Geschäftliche Auswirkung
Nicht angekündigte Validierungsfehler hindern Nutzende daran, die Bestellung abzuschließen. Technischer Hinweis: Die Fehlermeldung erscheint sichtbar, wird aber womöglich nicht angekündigt oder dem Feld zugeordnet.
Vorgeschlagene Korrektur
Die Fehlermeldung mit dem Feld verknüpfen und sicherstellen, dass sie bei fehlgeschlagener Validierung angekündigt wird.
Abnahmekriterien
- Nutzende erkennen, welches Feld fehlerhaft ist
- Nutzende verstehen das Problem und können es ohne rein visuelle Hinweise beheben
5. Vorgeschlagene Fix-Queue
Probleme werden nach Schweregrad und Kundenauswirkung priorisiert. Ihr Entwickler oder Ihre Agentur arbeitet die Queue der Reihe nach ab.
6. Retest-Checkliste
- Barrierefreiheitsprüfung auf /checkout nach dem Deployment erneut ausführen
- Mit dem Screenreader prüfen, ob die Bestellschaltfläche einen zugänglichen Namen hat
- Bestätigen, dass Formularbeschriftungen programmatisch zugeordnet sind
- Prüfen, dass Fehlermeldungen bei fehlgeschlagener Validierung angekündigt werden
7. Monitoring-Empfehlung
Nach den ersten Korrekturen empfiehlt sich eine laufende Überwachung der Transaktionsstrecke, um Regressionen in Kasse und Zahlung zu erkennen.