Skip to main content

​
Keyboard navigation

All interactive elements are reachable by keyboard:
  • Tab moves focus through payment methods and links.
  • Enter or Space expands and collapses a payment method.
  • Arrow keys navigate between options inside a multi-option group (native radio button behavior).

​
Focus indicators

Focused elements show a 2px outline that uses --resurs-checkout-accent-color. If you override that property, verify that your chosen color meets WCAG contrast requirements against the background — the widget cannot enforce contrast on values you provide.

​
Reduced motion

The widget respects the prefers-reduced-motion: reduce media query. When a user has enabled this preference, all expand/collapse animations are disabled. Only non-motion transitions (shadow, color, background) remain active. There is no configuration needed — the behavior is automatic. If you disable animation manually with --resurs-checkout-transition-duration: 0s, the result is the same as reduced motion regardless of user preference.

​
ARIA roles and states

The widget uses ARIA to convey state to assistive technologies:

​
Screen reader text

Decorative images (loading spinner, error icon) use alt="" so screen readers ignore them. Payment method icons use descriptive alt text. External terms links include a visually hidden (opens in new tab) label. It is hidden from sighted users but read aloud by screen readers.

​
Heading hierarchy

In managed mode (resurs-payment-method-selector), the payment method title and subtitle are rendered as <h3> and <h4> elements. Make sure your surrounding page structure treats these as appropriate sub-headings. In full-control mode you provide your own title and subtitle markup, so heading hierarchy is your responsibility.

​
Dark mode

The widget’s internal colors use the CSS light-dark() function. It follows the page’s color-scheme automatically — no additional theming is needed for dark mode. If you set color-scheme on the page yourself, the widget inherits it. If you don’t set it, the widget follows the operating system preference.

​
Color contrast

The widget ships with colors that meet WCAG AA contrast ratios under the default theme. If you override CSS custom properties — accent color, text color, background — you are responsible for verifying contrast in the resulting combination.