An Arabic website development checklist

An Arabic website needs more than translated pages. This checklist groups the build into eight areas, from content to launch day, with a short reason beside each item so you know what breaks if you skip it. Use it when you plan, when you review the first build, and again before launch.

It assumes Arabic and English sharing one codebase, and most points also fit other right-to-left languages. Visual design principles are in the article on [designing bilingual products for right-to-left readers](/blog/designing-bilingual-rtl-products), and wider planning is in the guide to [bilingual Arabic and English products](/guides/bilingual-arabic-english-products).

Language and content

• **Write Arabic natively, in Modern Standard Arabic.** A word-for-word translation keeps English sentence order and sounds stiff; use dialect only in short, deliberate places.
• **Plan both languages before you build.** Decide which pages exist in both and which belong to one market, so no link leads to a missing page.
• **Keep one term list.** One agreed Arabic term for each product, feature and plan, and a rule for names that stay in Latin script, keeps the site consistent.
• **Pick your digits once.** Western digits (0 to 9) or Eastern Arabic-Indic digits, applied everywhere; mixing both on a page looks careless.
• **Keep words out of images.** Text in images cannot be translated, searched or read by a screen reader.
• **Translate the small things.** Alt text, button labels, error messages, the cookie banner, the 404 page and emails are most often left in English.

Layout and mirroring

• **Set lang and dir on every page.** On the html element, lang=ar and dir=rtl tell browsers, screen readers and search engines the language and direction.
• **Write layout in logical CSS,** with start and end instead of left and right, so one stylesheet serves both directions. Then flip what does not follow on its own: transforms, gradients, shadows and background positions.
• **Mirror by judgement.** Arrows, chevrons, steps and progress bars flip; logos, clocks and photographs do not. Our [Arabic and RTL design](/services/ui-ux-design/arabic-rtl-design) page explains the rule.
• **Isolate mixed text.** Wrap inserted names and codes in the bdi element, use dir=auto on fields people type into, and keep emails, phone numbers and web addresses left to right. Otherwise punctuation jumps to the wrong end of a sentence.
• **Mirror gestures and sliders,** and test code that reads scroll offsets, because horizontal scrolling behaves differently in right-to-left containers.
• **Audit third-party widgets.** Chat, maps, booking and payment forms often stay left to right or lack Arabic.

Fonts and typography

• **Choose a family with real Arabic coverage** and a Latin cut that matches in weight and size. A fallback that fills the gaps makes mixed lines look uneven.
• **Never add letter-spacing to Arabic, and skip italics and capitals.** Spacing breaks the joins between letters, and Arabic has no italic or capital forms.
• **Give lines room.** Roughly 1.6 to 1.8 times the font size is a common starting point for body text, and headings need more, because Arabic marks sit above and below the line and clip in tight boxes.
• **Subset fonts with care.** Letters change shape by position, so a subset that drops the shaping data breaks the joins. Keep it, and split Latin and Arabic into separate files with unicode-range.
• **Load fonts without jumps.** Use WOFF2, preload the weight above the fold, set font-display, and pick a fallback with similar metrics so text does not shift when the font arrives.

Forms and data

• **Accept Arabic names.** A pattern that allows only A to Z rejects real customers. Allow letters from any script, spaces and common marks.
• **Accept Eastern Arabic-Indic digits and convert them.** Arabic keyboards can type them. Convert to 0 to 9 before you validate or store, or phone and card checks fail.
• **Normalise before you search or compare.** People type one word with different alef forms, ya or alef maqsura, ta marbuta or ha, optional vowel marks and the stretching character. Fold them together so search finds the word.
• **Store text as UTF-8 end to end.** One step with another encoding turns Arabic into question marks. Exported CSV files may also need a byte-order mark before Excel reads them correctly.
• **Format with locale tools.** Use the browser's Intl APIs and set the numbering system explicitly, for example with the u-nu-latn extension, because defaults differ between Arabic locales.
• **Keep addresses flexible.** Many places use a PO box, an area, a landmark or a national address code instead of a street and postcode, so do not make every field required.
• **Send messages in the reader's language.** Emails need dir=rtl too. An SMS in Arabic uses a different encoding and holds about 70 characters per message against 160 for plain Latin text, so keep one-time codes short.

URLs, hreflang and search

• **Give each language its own URL.** A page that switches language by cookie or location lets search engines see only one version.
• **Link every version to its alternates with hreflang.** Each page lists itself and all its translations, the links are reciprocal, and the values are valid codes such as ar and en, or ar-SA for a region. Add x-default for the page shown when no language matches.
• **Point each canonical at its own page.** A canonical on the Arabic page that names the English page tells search engines to ignore the Arabic.

• **Choose a slug rule and keep it.** Latin slugs are easier to type and share; Arabic slugs read naturally but are percent-encoded when copied. Changing later needs redirects.
• **Research Arabic keywords.** Readers search in their own words, spellings and dialect, not your English keywords translated.
• **Make the language switcher a plain link** to the same page in the other language, not the home page, and do not redirect by browser language with no way back.

Performance

• **Test on a mid-range phone and a slower connection,** not only on a developer laptop. Many visitors browse on phones.
• **Budget your JavaScript and fonts.** Heavy bundles hurt most on mid-range phones, so load only the active language's messages and only the font weights you use.
• **Size images and reserve their space** so the layout does not shift in either direction.
• **Serve from close to your readers.** Use a CDN with presence in or near your region, and measure the real response time from there.
• **Measure each language on its own.** A heavier Arabic font can move Largest Contentful Paint and Cumulative Layout Shift for Arabic pages only.

Accessibility

• **Treat [WCAG](/glossary/wcag) 2.2 level AA as the baseline.** It is the standard that accessibility reviews refer to.
• **Check contrast on Arabic text.** Thin strokes and small dots lose clarity, so aim for at least 4.5 to 1 on body text and test at real sizes.
• **Mark foreign passages with lang.** An English product name inside an Arabic sentence needs lang=en so a screen reader switches voice.
• **Test with real screen readers.** VoiceOver, TalkBack and NVDA with Arabic voices show what the reading order and labels sound like.
• **Match arrow keys to the visual direction** in tabs, sliders and menus, and keep focus order in step with the layout.
• **Make targets big enough.** WCAG 2.2 asks for pointer targets of at least 24 by 24 CSS pixels, with some exceptions. Larger is kinder on phones.

Testing and launch

• **Test on real devices** in both languages: iPhone, Android and desktop browsers. Fonts and keyboards differ by device.
• **Run every template with hard content:** the longest title, a name in Arabic and Latin, a long number, empty and error states. Layouts break at the extremes.
• **Have a native reader review the site** against a short list of tasks. Only a native reader catches stiff phrasing, wrong terms and small glitches in mixed text.
• **Check hreflang and canonicals with a crawler.** One missing return link can cause the pair to be ignored.
• **Check emails, PDFs and print,** such as invoices and receipts, in right-to-left.
• **Review launch basics in both languages:** redirects from old URLs, the 404 page, robots.txt, the sitemap, social previews, the consent banner and analytics split by language. The [secure-by-default web checklist](/blog/secure-by-default-web-checklist) covers HTTPS and headers.
• **Name an owner for each language** after launch. The Arabic site drifts out of date when only the English one is updated.