Accessibility for Arabic apps and websites: a practical guide

What accessibility means, and why it matters for Arabic apps

Accessibility means anyone can use your app or website: someone who relies on a screen reader because they are blind or have low vision, someone who enlarges text because they are past sixty, someone who cannot tell red from green, someone using their phone one-handed while pushing a shopping cart. The goal is simple: nobody should be unable to book, buy or pay because of a design that could have been fixed.

Arabic apps face extra problems. Many tools and templates were built for English first and then flipped for Arabic in a hurry. The result: screen readers that read Arabic text with an English voice nobody understands, arrow icons pointing the wrong way, tiny Arabic type where dots and marks crowd together, and unnamed buttons because the designer relied on an icon alone.

It is not just charity. In many Gulf families a son or daughter orders on behalf of their parents because the app is too hard for them. If the parent can book the clinic or order from the restaurant directly, you have won a direct customer. Some government and regulated bodies also have digital accessibility requirements, so if you build for one, ask which standards apply from the start.

A design that works for the grandparent works for the grandchild; the reverse is not always true.

Arabic-specific problems and how to fix them

The global reference is WCAG, which applies to every language. But some issues show up in Arabic far more than elsewhere:

The core checklist for any Arabic app

• Contrast: body text is dark on light or light on dark; no pale grey on white. Faint colors vanish in summer sun.
• Size and zoom: the app respects the phone's text-size setting and does not break when zoomed.
• Touch targets: buttons are big enough for a finger, with space between them. Apple and Google guidelines suggest roughly 44 points and 48 dp respectively as minimums.
• Alt text: every meaningful image has a short Arabic description, such as oud perfume 100 ml in a gold box; decorative images stay silent.
• Not color alone: an order marked cancelled says so in words, not just in red.
• Focus order: moving with a keyboard or by swiping in a screen reader flows right to left and top to bottom in a logical way.
• Motion: animations and auto-playing sliders can be paused, and nothing flashes quickly.
• Headings: each page has one main heading and ordered subheadings, because screen-reader users navigate by headings.

If your site is bilingual, apply the list to both versions, and make sure the language switch itself is readable and labeled the way users look for it: English on the Arabic site, العربية on the English site. More in building a bilingual Arabic–English website.

Forms, sign-up and checkout: where users get lost

Most usability-driven drop-offs happen in forms: sign-up, address, verification code, payment. These screens deserve double care.

• Every field has a visible label above it, not placeholder text that disappears while typing.
• Error messages appear next to the field and explain the fix: mobile number must start with 05 and have 10 digits, not invalid input.
• The phone field opens the number pad and accepts both Arabic-Indic and Western digits, converting them automatically.
• The OTP code autofills from the message where the system supports it, with enough time before it expires and a clear resend button.
• The National Address or Makani can be typed or picked on a map, with a text alternative for people who cannot use the map.
• Payment buttons (mada, Apple Pay, Tabby, Tamara) have readable names, and the final total with VAT and delivery is stated clearly before confirmation.

Test your app yourself in 30 minutes

You do not need a lab to find the biggest problems. Your phone is enough for a first pass:

1. 1
   Turn on a screen reader in Arabic

   Enable VoiceOver on iPhone or TalkBack on Android with the device language set to Arabic, then try to complete a full order with your eyes closed. Is every button announced with a clear name?

2. 2
   Max out the text size

   Raise the font size in phone settings and open the app. Does text overlap, or do buttons fall off the screen?

3. 3
   Try one hand

   Use only your thumb. Are the key buttons within reach? Do you hit the wrong button because they are crowded?

4. 4
   Switch to grayscale

   Turn on grayscale in accessibility settings. Can you still tell order status, errors and active buttons apart?

5. 5
   Use only the keyboard on a computer

   Move through the site with Tab alone. Can you see where you are? Can you open the menu and finish checkout?

6. 6
   Hand it to an older relative

   Give the app to a parent or relative without explaining anything and watch where they stop. It is the most honest test session you will get.

Ask for it from day one: a ready Fanann prompt

Retrofitting accessibility after launch is harder than building it in. When you describe your app to the Fanann Agent, include accessibility requirements just as you mention payments and language. If the app already exists, ask for a full review followed by small, sequential fixes.

Common mistakes even big apps make

Watch the copy too: plain language and short sentences help everyone, while heavy formal Arabic tires all readers. And do not leave English button labels such as Submit inside the Arabic interface; a screen reader will pronounce them confusingly. For help wording your interface, see how to describe the design you want.

Frequently asked questions

Terms in this article