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
This sample snapshot reviews a public checkout flow and identifies visible accessibility risks that may affect keyboard navigation, screen-reader understanding, and form completion. The findings are not a legal assessment or certification. They are practical observations intended to help a web team prioritize fixes in a customer-critical flow.
2. Geprüfter Flow
Beispiel-Snapshot für
example-store.com
Cart → Checkout → Payment
Flow-Typ
E-commerce checkout
Geprüfte Seiten
4 öffentliche Seiten
3. Top sichtbare Barrierefreiheitsrisiken
- Checkout button has no accessible name (high)
- Required form field is not programmatically labelled (medium)
- Error message is not clearly exposed after form submission (medium)
4. Entwicklerfertige Issue-Details
Checkout button has no accessible name
Element: button.checkout-submit
EAA relevance: EAA readiness — visible accessibility risk on public checkout flow
Reproduction Steps
- Navigate to https://example-store.com/checkout with items in cart
- Inspect the final submit button with a screen reader or axe DevTools
- Observe missing accessible name on button.checkout-submit
Customer Impact
Screen-reader users may not understand what action the button performs.
Business Impact
If a customer cannot identify the final checkout action, they may be blocked from completing a purchase. Technical note: The button appears visually, but the accessible name is missing or unclear.
Suggested Fix
Add clear visible text or an accessible name that describes the action.
Copy-Paste Example
Example only — adapt to your codebase.
<button class="checkout-submit" aria-label="Complete order">
Complete order
</button>Acceptance Criteria
- The button is announced as "Complete order" or equivalent by assistive technology
- The button can be reached and activated by keyboard
Required form field is not programmatically labelled
Element: input#customer-email
EAA relevance: EAA readiness — visible accessibility risk on public checkout flow
Reproduction Steps
- Open https://example-store.com/checkout
- Tab to the customer email field
- Confirm input#customer-email has no associated label in the accessibility tree
Customer Impact
Assistive technology users may not know what information is required.
Business Impact
Form completion friction may cause checkout abandonment. Technical note: The visible label is not correctly connected to the input field.
Suggested Fix
Associate the label with the input using a valid for/id relationship or equivalent accessible labeling method.
Copy-Paste Example
Example only — adapt to your codebase.
<label for="customer-email">Email address</label>
<input id="customer-email" type="email" name="email" required />Acceptance Criteria
- The field label is announced correctly by assistive technology
- The required state is clear
Error message is not clearly exposed after form submission
Element: .field-error
EAA relevance: EAA readiness — visible accessibility risk on public checkout flow
Reproduction Steps
- Submit the checkout form with an invalid email address
- Observe the visual error message appears
- Confirm the error is not announced by screen reader or linked to the field
Customer Impact
Users may not understand why they cannot continue.
Business Impact
Validation errors that are not announced block users from completing checkout. Technical note: The error message appears visually but may not be announced or connected to the relevant field.
Suggested Fix
Connect the error message to the field and ensure the message is announced when validation fails.
Acceptance Criteria
- Users can identify which field has an error
- Users understand the problem and can correct it without visual-only cues
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
- Re-run accessibility checks on /checkout after fixes are deployed
- Verify checkout button has accessible name via screen reader
- Confirm form labels are programmatically associated
- Test error messages are announced on validation failure
7. Monitoring-Empfehlung
After initial fixes, consider Transaction Flow Monitoring to detect regressions on checkout and payment steps.