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.