Skip to content
BFSG compliance since 2025

Accessible checkout: the last stretch where orders are lost

This page deals exclusively with the ordering and payment process: cart, address form, shipping and payment selection, error dialogues, sign-in and order confirmation. We test every step with keyboard and screen reader against WCAG 2.2 AA and fix the findings in the existing code — audit from €2,480 net.

Checkout audit from €2,480 net Fines up to €100,000 (BFSG Section 37) This site itself meets WCAG 2.2 AA

3.3

WCAG section on input assistance — the core of the checkout

6

steps from cart to order confirmation

28.06.2025

BFSG obligation in force

50+

accessibility projects delivered

The ordering process is the legally most sensitive part of your shop

The German Accessibility Strengthening Act (BFSG) requires consumer-facing online shops to be accessible per WCAG 2.2 AA. This explicitly covers concluding a contract — in other words, the checkout itself. Violations can lead to orders from market surveillance authorities and fines of up to €100,000 (BFSG Section 37). That accessibility works in practice we demonstrate on ourselves: this site itself meets WCAG 2.2 AA.

A shop only earns money once the order has been submitted. That is exactly where people who depend on assistive technology most often fail: at an error message that is only marked in red, at a payment form inside a third-party iframe, at an order button that cannot be reached by keyboard. This page therefore deals exclusively with completing a purchase — from the cart to the order confirmation and the invoice document. How we make a complete shop technically accessible, including categories, search, filters and product pages, is described on the page about the accessible online shop. Which BFSG obligations apply to retailers, marketplaces and omnichannel commerce overall is set out on the page about accessible e-commerce. The legal frame comes from the Accessibility Strengthening Act.

One field in the payment flow — before and after

Accessible checkout · WCAG 2.2 AA
A checkout barrier turns into an operable purchase
Exactly where orders break off — the address field in the payment flow
Before · checkout3 critical barriers
Email
No label — screen reader only says "edit field"
Contrast 2.4:1 — below 4.5:1 (WCAG 1.4.3)
Error marked in red only, without text
VS
After · checkoutWCAG 2.2 AA
Email address *
Visible label, programmatically associated
Contrast 5.1:1 — AA met
Error text via aria-describedby, focus set
Order flow conformance · before61 %
Order flow conformance · after92 %
Checkout auditfrom €2,480 net
Tested with NVDA and VoiceOverprioritized findings list
Example comparison of a checkout address field before and after remediation. Illustrative depiction; the conformance values do not come from a specific client project.

Audit checkout and payment

from €2,480 fixed price net
  • Cart, address form, shipping, payment, review, confirmation
  • Tested with NVDA and VoiceOver plus keyboard-only operation
  • Error dialogues and validation reviewed in detail against WCAG 3.3
  • Entry point via the BFSG quick check from €490

Price for the WCAG 2.2 AA audit of an SME website up to 30 pages including the order flow. Stand-alone order flows without the rest of the shop are calculated by number of steps and payment methods. All figures on the pricing page.

The Six Steps of the Order Flow — and What to Test in Each

The checkout concentrates the most demanding WCAG 2.2 success criteria, because almost everything here is forms, state changes and legally binding input. Section 3.3 (input assistance) is decisive: labels or instructions (3.3.2), error identification (3.3.1), error suggestion (3.3.3) and error prevention for legal commitments (3.3.4). Two criteria newly introduced by WCAG 2.2 hit the ordering process directly: Redundant Entry (3.3.7) prohibits asking again for data already provided without good reason, and Accessible Authentication (3.3.8) rules out cognitive function tests during sign-in, such as image puzzles without an alternative (source: W3C WCAG 2.2). On top of that come the general requirements for keyboard operability (2.1.1), visible focus (2.4.7) and the new rule that the focused area must not be obscured by sticky elements (2.4.11).

1. Cart and quantity changes

Quantity fields with their own label per line item, remove buttons with an unambiguous reference to the article instead of three identical delete links. Changes to the total are announced through a live region so screen reader users notice the recalculation at all.

2. Address and contact data

Visible, programmatically associated labels instead of placeholder text. Correct autocomplete attributes so stored addresses can be filled in automatically (WCAG 1.3.5). Required fields are not only marked with an asterisk but also exposed programmatically.

3. Shipping and delivery options

Shipping methods as a genuine radio group with fieldset and legend, operable with arrow keys. Changes to price and delivery time are announced on switching. Time-slot pickers and calendar widgets must work without dragging (WCAG 2.5.7).

4. Payment selection

Payment methods as a radio group, not as clickable tiles without a role. Fields loaded on demand — an IBAN field for direct debit, for example — are announced and receive focus in a logical order. Embedded provider forms are tested separately.

5. Review and order

The summary before submission satisfies WCAG 3.3.4: all details are reviewable, correctable and require confirmation. The order button carries an unambiguous, self-explanatory label and is reachable by keyboard without being obscured by a sticky footer.

6. Confirmation and receipt

The confirmation page announces success through a status message, not only through a green tick. Order number and summary are available as text. Invoice PDFs must be accessible too — see accessible PDFs.

Error Dialogues: the Most Common Reason for Abandonment

A sighted user orients visually: they see the red border around an incorrectly filled field and the error text below it. A screen reader user perceives none of this if the field is not programmatically associated with the error message. A user with motor impairments relying on the keyboard cannot reach the order button if it sits outside the tab order. And anyone magnifying the page to 200 percent loses sight of the error message if it sits at the top of the page while focus stays at the bottom. Error handling is therefore not a detail of the order form but its most critical function.

We implement checkout error handling following a fixed pattern. Every form field gets a programmatically associated label. Required fields are marked via aria-required and a visible hint, not by colour alone. Error messages are associated with the field via aria-describedby, output as text and additionally collected in an error summary at the start of the form whose entries link to the affected field. After a validation error, focus moves automatically to the first faulty entry. The message names not only the problem but also the way to fix it — asking for an email address containing an at sign instead of stating that the input is invalid. How this is implemented technically is explored in the article on accessible error and status messages.

Guest Checkout, Accounts and Accessible Authentication

In many shops there is a hurdle before the payment flow proper that WCAG 2.2 addresses explicitly for the first time: signing in. Success criterion 3.3.8 (Accessible Authentication, level AA) requires that no authentication step depends on a cognitive function test unless an alternative is offered. Image puzzles, arithmetic tasks and transcribing distorted character strings all fall under this. Equally problematic is blocking paste in the password field, because that disables password managers. We encounter both regularly in audits — and both can be fixed with manageable effort.

In practice this means: password fields allow paste and autofill and carry the appropriate autocomplete values. Two-factor codes are supported via autocomplete too, so they do not have to be typed out. Where spam protection is necessary, we rely on methods that require no cognitive effort — server-side checks or invisible methods with a documented alternative. And because the fastest accessible sign-in is the one that does not happen, we recommend a full guest checkout without forcing account creation. Where an account is mandatory, registration itself must meet the criteria. The article on accessible authentication describes the options in detail.

The accessible address form in detail

Four properties an order form depends on

The address form is the longest contiguous input block in the checkout. This is where it is decided whether an order can be completed without a mouse and without looking at the screen. We rebuild it so that labels, autofill, error association and focus management work together instead of blocking each other.

  • Visible label per field, programmatically associated (WCAG 3.3.2)
  • autocomplete attributes for name, street, postcode, city and email (WCAG 1.3.5)
  • Error text at the field plus a linked error summary (WCAG 3.3.1, 3.3.3)
  • Data already provided is not requested again (WCAG 3.3.7)
Error summary
1 entry to check: email address
Entry links straight to the affected field
Delivery address
First name *
Street and number *
Email address *
"Please enter an email address containing @."
Focus jumps to the first faulty field after validationautocomplete active

Payment Methods and Their Typical Barriers

Card entry in a third-party iframe

Card fields almost always sit in a payment provider's iframe. Typical findings: iframe without a title attribute, fields without labels, error output by colour only. We test every embedded field, document what lies outside your code and coordinate changes with the provider.

Invoice and direct debit

Selecting them loads additional fields — IBAN, account holder, mandate text. These dynamic blocks must be announced and receive focus in a logical order. The mandate text belongs on the page as readable text, not as an image or a non-scrollable overlay.

Redirect and wallet methods

Methods that jump to an external page break the context. On return, focus must be set sensibly and the new status announced. If a popup opens, there needs to be a recognizable warning beforehand and a way back without a mouse.

Instalments and credit checks

These flows often contain long terms, time limits and additional identity checks. Time limits must be extendable (WCAG 2.2.1), terms must be available as structured text, and identity checks must not require a cognitive function test.

Responsibility for External Payment Providers

Payment processing is the area where shop operators depend most heavily on third parties. Embedded payment forms can bring their own accessibility problems: iframes without an accessible title, card fields without labels, verification methods that cannot be solved with a screen reader. Legally this does not release you: the BFSG addresses the provider of the service, and towards your customers that is you. We therefore test the accessibility of the integrated providers, document barriers outside your control and, where necessary, recommend alternative payment routes.

Where possible we configure payment providers for maximum accessibility: correct labelling of the embedded fields, accessible error handling and accessible confirmation pages. If a limitation remains, it belongs transparently in the accessibility statement — together with an alternative route to concluding the contract, by phone or email for instance. This documentation is not an admission but exactly what BFSG Section 14 requires. How a solid statement is structured is covered on the page about the accessibility statement.

Embedded payment forms under the microscope

Where iframes put accessibility at risk

Third-party payment forms often live inside an iframe whose accessibility you cannot control yourself. We test every embedded field, document barriers outside your control and secure the purchase through an accessible alternative route.

  • iframe titles and field labels tested systematically
  • Verification methods without a screen reader alternative identified and named
  • The provider's error output tested for screen reader compatibility
  • Transparent documentation in the accessibility statement
iframe · payment provider (third-party code)third-party iframe
Card number — label present
Expiry date — label present
Security code — label missing, noted in the report
Verification without a screen reader alternative
Alternative route: order can be completed by phone or email
Finding feeds into the accessibility statementdocumented

Three test methods we apply to every checkout step

Screen reader run-through

We put an article in the cart and order through to the confirmation page with NVDA and VoiceOver — listening to what is actually announced instead of only reading the code.

Keyboard run-through

The entire order flow is completed using only tab, arrow and enter keys, including deliberately faulty entries, to expose focus traps and unreachable buttons.

200 % magnification

Forms and summaries are magnified to 200 percent to reveal overlaps, truncated error texts and fields obscured by sticky bars (WCAG 1.4.4, 2.4.11).

Our Testing Workflow for Order Flow and Payment

We record how many steps your checkout has, which payment methods are active, whether a guest route exists and which providers are embedded. That determines the scope — not the number of products in the catalogue.

We will place one complete order with you — using a screen reader

In more than 50 accessibility projects (project experience) we have made order flows usable from cart to confirmation page. Let us show you where your checkout stands today.

Abandonment Reasons That Have Nothing to Do With Price

When cart abandonment is discussed, the talk is usually about shipping costs, delivery times or missing payment methods. For people who depend on assistive technology the reason often sits one level below: the form does not say what is wrong. The order button cannot be reached by keyboard. The time limit in the payment step expires before the entry is finished. Around 7.8 million (Federal Statistical Office, 2023) people in Germany have a recognized severe disability, plus millions with temporary or age-related limitations. This group does not abandon because it does not want to buy, but because it cannot.

The second effect is broader: a checkout that works without a mouse, with enlarged text and with clear error messages works better for everyone else too. Sensible autocomplete attributes save every customer typing. A comprehensible error message instead of a bare validation warning prevents support enquiries. A summary showing all details before submission reduces mis-orders and returns. Accessibility in the checkout is therefore rarely only a compliance expense; it is at the same time an investment in the quality of the order flow.

For that state to last, the team needs to know what matters. Our training shows development and editorial teams how to build new checkout features accessibly from the outset. For ongoing assurance after implementation there is BFSG monitoring, which reports regressions after updates before they cost orders.

The purchase completion in context is described in the article on accessible checkout in e-commerce. How forms and their validation are built cleanly is explored in the article on accessible forms. Why sign-in methods based on puzzles are not conformant is explained in the article on accessible authentication. And because many checkout building blocks come from outside, the article on third-party widgets and BFSG duties is worth reading. For the shop beyond the till — search, filters, product pages, implementation in code — the page on the accessible online shop is the right entry point; the obligations for retailers overall are set out under accessible e-commerce, embedded in accessibility by industry.

Key Points at a Glance

  • The checkout has the highest density of WCAG criteria — section 3.3 (input assistance) plus the new criteria 3.3.7 and 3.3.8 from WCAG 2.2
  • Error dialogues decide between abandonment and completion: error text at the field, linked summary, focus on the first faulty entry
  • Sign-in without a cognitive function test, password managers allowed, guest checkout as the simplest accessible route
  • Embedded payment forms remain your responsibility towards the customer — test, document, offer an alternative route
  • The order flow is covered by the WCAG 2.2 AA audit from €2,480 net, entry via the BFSG quick check from €490

Frequently Asked Questions About Accessible Checkout

How the customer portal of a municipal utility could look

The draft shows structure and handling: short paths to meter reading and instalment, a form naming the error at the field, plain language and text size in the header. The utility in it is invented.

Draft
Municipal utility

Customer portal with self-service and plain language

A draft for a municipal utility portal: submitting a meter reading, adjusting the instalment and registering a move sit side by side as six short paths, and the form checks entries and places the error as text right next to the field. Reporting a fault is laid out in four steps, and the tariff comparison is a table with labelled rows and columns. Text size and plain language can be switched in the page header.

Plain languageText sizeForm validationFault reporting

Illustrative layout drafts. The businesses shown are fictitious; these are not client projects.

What can we help you with?

One click is enough — everything after that is optional.

Tell us briefly about the project

Everything on this step is optional.

When would you like to start? (optional)
Rough budget range (optional)

Optional — you are not committing to anything.

How can we reach you?

We usually get back to you within one business day.

By submitting you consent to the processing of your details to handle this request. Details in our privacy policy.

Related industries and regions