ComplyPages

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

  1. Executive Summary
  2. Geprüfter Flow
  3. Top sichtbare Barrierefreiheitsrisiken
  4. Entwicklerfertige Issue-Details
  5. Vorgeschlagene Fix-Queue
  6. Retest-Checkliste
  7. 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

Risiko: Mittel

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

CP-0001

Checkout button has no accessible name

openhigh
Flow: Payment confirmationhttps://example-store.com/checkout
Screenshot for CP-0001

Element: button.checkout-submit

WCAG 2.1 A 4.1.2WCAG 2.1 AA 2.4.6

EAA relevance: EAA readiness — visible accessibility risk on public checkout flow

Reproduction Steps

  1. Navigate to https://example-store.com/checkout with items in cart
  2. Inspect the final submit button with a screen reader or axe DevTools
  3. 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
CP-0002

Required form field is not programmatically labelled

openmedium
Flow: Customer details formhttps://example-store.com/checkout

Element: input#customer-email

WCAG 2.1 A 1.3.1WCAG 2.1 A 3.3.2WCAG 2.1 A 4.1.2

EAA relevance: EAA readiness — visible accessibility risk on public checkout flow

Reproduction Steps

  1. Open https://example-store.com/checkout
  2. Tab to the customer email field
  3. 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
CP-0003

Error message is not clearly exposed after form submission

openmedium
Flow: Checkout form validationhttps://example-store.com/checkout

Element: .field-error

WCAG 2.1 A 3.3.1WCAG 2.1 A 4.1.3

EAA relevance: EAA readiness — visible accessibility risk on public checkout flow

Reproduction Steps

  1. Submit the checkout form with an invalid email address
  2. Observe the visual error message appears
  3. 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.

Beispiel-EAA-Barrierefreiheits-Snapshot | ComplyPages