How to use this
Print it. Open the site on a laptop and a phone, switch to the Arabic version, and walk through. Mark each item pass / fail / borderline. If anything past 5 fails, the launch isn't ready.
Layout and structure
Where most issues live.
1. Direction attribute set correctly
The HTML element on the Arabic version has dir="rtl" and lang="ar". On the English version, dir="ltr" and lang="en". Sounds basic; missed often.
2. Navigation order is mirrored
Logo on the right, menu items reading right to left, language toggle on the far left. Not English-order with Arabic labels — that's the most common single mistake.
3. Cards, columns, and grids visually flip
A 3-card grid that reads card-1 / card-2 / card-3 in English should read card-1 / card-2 / card-3 right-to-left in Arabic. Use CSS logical properties (margin-inline-start, padding-inline-end) instead of -left / -right.
4. Icons that imply direction get mirrored
Forward arrows, back arrows, breadcrumb chevrons, play buttons. Decorative icons (heart, star, calendar) do not get mirrored.
5. Image content stays visually correct
A photo of someone reading a book or pointing at a screen should not be mirrored when the layout flips. Mirror layout, not content.
6. Quote marks face the right direction
Arabic uses « » or specific Arabic quotation marks. Don't auto-generate Latin curly quotes.
Typography
Where bilingual quality is decided.
7. Arabic typeface loaded and rendering
View source. Check the font-family stack actually starts with the Arabic typeface, not a system fallback.
8. Arabic line-height is at least 1.6×
Latin text is comfortable at 1.4–1.5. Arabic needs more — 1.6 minimum for body, 1.8 for editorial.
9. Arabic body type is at least 16px on desktop, 17px on mobile
Arabic at 14px is unreadable to most users. Bump up.
10. Letter-spacing is zero on Arabic
Arabic letters connect; tracking them apart breaks the script. Default to 0; only deviate with reason.
11. Arabic and Latin baselines align in mixed-language lines
If a phone number or email is embedded in Arabic body text, the Latin sits on the right baseline.
12. No software-italic on Arabic
Arabic has no italic. font-style: italic on Arabic produces a slanted mess.
Forms and inputs
Where bilingual UX gets tested for real.
13. Form labels align right
Labels and helper text right-aligned with their input.
14. Input text aligns right by default
Including placeholder text. Numeric inputs (phone, ID, postal code) may stay left-aligned by convention — confirm with the audience.
15. Required-field asterisks on the correct side
On the left of the label in RTL (since reading flows right to left, the asterisk lands at the end of the label).
16. Error messages position consistently
Below or beside the input, right-aligned, in Arabic.
17. Country-code selector lists Qatar at the top
Default to +974. Search field accepts Arabic input.
18. Date pickers display Arabic numerals (or Hijri if relevant)
Decide once across the site. Hijri matters for some government and religious-sector clients.
Navigation and interaction
19. Language toggle is persistent and accessible
Same position on every page. Reachable on mobile without scroll.
20. Language toggle preserves the page
Switching from /en/services to /ar/services lands the user on the Arabic services page, not the Arabic homepage.
21. Deep-linked URLs open in the right language
If someone clicks an Arabic URL from social, they land on the Arabic site.
22. Hover and focus states behave the same in both directions
Rollover effects, dropdowns, and tooltips don't break when the layout mirrors.
23. Keyboard navigation tabs in the right order
Tab key moves through interactive elements right-to-left in RTL mode.
Content and SEO
24. Page title, meta description, and OG tags translated, not just the visible text
View source on the Arabic page. All meta should be Arabic.
25. Hreflang tags declared correctly
Each language version declares hreflang tags pointing to the other(s).
26. URLs include language identifier
Either subfolder (/ar/, /en/) or subdomain (ar.example.com). Decide once, stick with it.
27. Sitemap includes both language versions
Both URLs listed, both submitted to Search Console.
Performance and rendering
28. Arabic font weight subset shipped
Don't load all weights — pick the 2–3 you actually use, subset to character ranges you serve, ship via woff2.
29. Hero image and text render before the font swaps
Use font-display: swap on the Arabic typeface so the hero isn't blank during font load.
30. Test on real devices in both languages
Specifically: a budget Android phone with slow connection, viewing the Arabic version. The performance picture there is the truth; everything else is optimistic.
The honest line
Most bilingual sites in production today fail somewhere between item 8 and item 22. Run this list on yours. The fixes are usually small individually and dramatic in cumulative effect — they're the difference between a site that feels bilingual and a site that feels translated.