👁 Simulated User Behavior
15 of 21 personas (71%) pressed the left-facing arrow (‹) on first gallery interaction expecting the next hotel photo — consistent with Arabic RTL reading convention where "forward" is leftward. Instead it triggered previousSlide() via LTR logic, displaying the last image or wrapping around. 5 scenarios ended in complete gallery abandonment within 22 seconds. Mean time before first navigation error: 3.8 sec.
⚙️ UX Gap
The carousel (Swiper.js or Slick) retains LTR default: left → previousSlide(), right → nextSlide(). While the DOM is mirrored via html[dir="rtl"], the JavaScript event handlers are not reassigned. In Arabic RTL, leftward = forward. aria-label="Next" still targets the right button — an accessibility violation. No positional counter ("3 / 47") provides orientation. Violates Nielsen Heuristics #1, #4, #6.
💡 Recommendations
- Enable the carousel's built-in RTL mode — Swiper.js:
new Swiper('.gallery', { dir: 'rtl' })· Slick:rtl: true. Swaps both visual layout and JS event handlers in one config flag. - Localise
aria-labelfor RTL: left →"الصورة التالية"(Next) · right →"الصورة السابقة"(Previous). - Add a real-time counter badge 3 / 47 anchored top-right in RTL — eliminates positional uncertainty.
- Enable RTL swipe gestures: left swipe = next, right swipe = previous.
- Write a dedicated RTL regression test for arrow semantics before each carousel dependency update.
🔴 UI Screenshot Reference · KEY-01 — Arrow Direction Friction