Accessibility

The checkout is a region landmark named "ripper checkout — secure payment" with two live regions, and only one of them holds text at a time: a visually hidden, polite status region announces progress, steps and the outcome, and a visible, assertive alert region carries validation messages and failures. Every field is labelled; Tab order follows the visual order; Enter on the pay button pays; Escape cancels with user_cancelled.

accessibility.ariaLabel renames the landmark. announceErrors: false keeps the inline errors and stops announcing errors; progress, steps and the outcome are still announced (true, the default, announces validation once per pass, never per keystroke). reducedMotion: true switches the one animation off (so does prefers-reduced-motion).

const result = await ripper.collect({ amount: 4200, currency: 'GBP', accessibility: { ariaLabel: 'Pay Acme Coffee', announceErrors: true, reducedMotion: false } });

describedBy names ids on YOUR page. The checkout renders inside its own isolated root, and an id reference cannot reach out of it, so the runtime does the work for you: the named elements' text is copied into the checkout and kept in sync as it changes. aria-labelledby is not accepted — the label is ariaLabel only. Precedence, stated once: the React prop wins over the collect() option, which wins over the integration's default.

const result = await ripper.collect({ amount: 4200, currency: 'GBP', accessibility: { describedBy: 'order-summary' } });