Setting dir="rtl" mirrors a layout but does not adapt it. The seven things that break most often are Arabic typography, line length, keyboard focus order, icon direction, numerals, form validation messages, and animation direction. Focus order is the one that matters most, because it is a real accessibility failure.
1. Typography that was never chosen
The most common RTL failure is that nobody picked an Arabic typeface. The site specifies a Latin font stack, the browser falls back to whatever system Arabic font it has, and the result differs on every device.
Arabic type also sits differently on the line. It generally needs more line height than Latin text at the same size, and font sizes that feel right in English often feel cramped in Arabic. Set these deliberately per language rather than sharing one value.
2. Line lengths tuned for the wrong script
Arabic is more visually dense than Latin at equivalent sizes. A measure that reads comfortably in English can feel heavy in Arabic. If your body text container was sized for English, check it again with real Arabic content rather than placeholder text.
3. Keyboard focus order, the one that actually matters
This is the failure with real consequences. Mirroring a layout visually does not change the DOM order, so keyboard and screen reader users can end up moving through the page in an order that no longer matches what they see.
It is also the failure automated accessibility checks are least likely to catch, because nothing is technically invalid. It just does not make sense to a person using it. Test by tabbing through the Arabic version yourself.
If you test one thing on an RTL build, tab through it with a keyboard. Visual mirroring plus unchanged DOM order is the most common serious RTL bug.
4. Icons mirrored when they should not be
Directional icons should flip: back and forward arrows, progress indicators, anything indicating sequence. Non-directional icons should not: logos, photographs, clocks, checkmarks, and anything containing Latin text.
A blanket CSS transform that flips every icon on the page will mirror your logo. This happens more often than you would expect.
5. Numerals handled inconsistently
Arabic content can use Western numerals or Eastern Arabic numerals, and Saudi usage commonly favours Western ones in commercial contexts. What matters is picking one and applying it consistently, including in prices, phone numbers, dates and form inputs.
Mixing the two within a single page is a detail that reads as carelessness to a native speaker, in exactly the same way inconsistent currency formatting would in English.
6. Validation messages in the wrong language
Browser-native form validation messages appear in the browser's language, not your page's. Custom validation strings frequently get missed in translation passes because they only appear on error. Trigger every error state in Arabic and check.
7. Animations moving the wrong way
Slide-in transitions, carousels and drawer menus all carry direction. In RTL they should generally move the opposite way. This is rarely a functional bug, but it makes an interface feel subtly wrong, and it is a clear signal to a native user that Arabic was an afterthought.
How to catch these before launch
- Use CSS logical properties throughout, so direction is handled structurally rather than by overrides.
- Review the Arabic version with real content, never placeholder text.
- Tab through every page in Arabic with a keyboard.
- Trigger every form error state in Arabic.
- Have a native speaker review the interface, not just the copy.
