Accessibility

Accessibility

We want the recharge form to work for everyone — including with a keyboard, a screen reader, high-contrast mode or a slow connection.

Standards we aim for

We target the WCAG 2.1 Level AA success criteria for text contrast, interactive controls and non-text content. This is a working target and a small team can never claim perfection — pages get regular passes and we treat any reported gap as a bug.

Colour and contrast

Body text sits on #faf8f2 against ink #1c2721 and clears AA at normal sizes. Buttons use amber #f4a83a or green #3d8a49 with the same ink label. Focus rings are visible without relying on colour alone.

Keyboard navigation

Every interactive element on the site is reachable with Tab and activatable with Enter or Space. The menu drawer opens with the burger button and closes with Esc. Form fields have a logical tab order — card number, amount, email, continue — and the FAQ accordions expand and collapse on Enter.

Screen readers and labels

Interactive controls carry an accessible name. The language switcher and the mobile drawer use aria-label; the current language is marked with aria-current="true". Modal dialogs (the drawer and the cookie notice) have role="dialog" and a matching label so assistive tech announces them properly. Form fields use real <label> elements — no floating placeholder-only inputs.

Images and media

All meaningful images have alt text; decorative shapes and dividers are marked as decorative so screen readers skip them. There is no auto-playing video or audio anywhere on the site, and there is no carousel that rotates on its own.

Motion and layout

Motion is used sparingly — the drawer slides in, the cookie banner fades. Users who set the operating-system preference for reduce motion get reduced or no animation. Layouts reflow down to a 320-pixel-wide viewport without horizontal scroll, and content is readable at 200% browser zoom.

Language and bidi

Every page has an explicit lang attribute. Phone numbers and the F-code plus-code address are wrapped in <bdi> so they render correctly in RTL contexts as well. The Arabic mirror at /ar/ uses dir="rtl" and its own set of typographical rules.

Known gaps

Third-party components in the payment flow — for example a bank's 3-D Secure page — are not under our control and their accessibility depends on the bank. If a specific bank's page fails for you, tell us; we can suggest an alternative and forward the complaint.