> ## Documentation Index
> Fetch the complete documentation index at: https://docs.resurs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Accessibility

> Built-in accessibility features and what to keep in mind when integrating the payment widget.

## 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](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html) 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:

| Element            | Role / attribute                                        | Behavior                                                      |
| ------------------ | ------------------------------------------------------- | ------------------------------------------------------------- |
| Loading container  | `role="status"`, `aria-label="Loading payment methods"` | Announced politely when methods are loading                   |
| Error container    | `role="alert"`                                          | Announced immediately when an error occurs                    |
| Multi-option group | `role="radiogroup"` with `aria-label`                   | Groups and labels radio options with the payment method title |
| Collapsible header | `aria-expanded="true/false"`                            | Reflects open and closed state                                |

## 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()`](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/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.