CEPD · Module 2 — Visual and information design for screens
Arabic layouts start from the right. Rebuild the hierarchy instead of mirroring coordinates.
About 18 min
Practice in the lesson player
Sorting, matching, quizzes, and the module gate stay behind a free account so scored answers are not public. The teaching notes below are the same cited curriculum.
01
Take an English course for warehouse pickers and apply a one-click horizontal flip. Continue moves to the left, which is right. But the aisle diagram flips too, so the aisles are now in the wrong order; the arrow that meant "forward" now points backward; and keyboard focus may start on the last control. RTL-native production keeps meaning, rewrites labels in Arabic, places the primary action where Arabic reading ends, and retests focus order.
02
Mirrored English: Diagrams of real places flipped. · English type scale with Arabic text. · Visual weight still balanced for left-start reading.
RTL-native layout: Real-world diagrams unchanged; labels in Arabic. · Arabic type scale, taller line height. · Weight rebalanced so the eye enters on the right.
03
Element | Mirror-only failure | RTL-native fix
Progress bar | Still fills from the left | Fills in the reading direction
Real-world diagram | Flipped, labels left in English | Unflipped, Arabic labels
Focus order | Tab starts at the visual end | Retest Tab order in Arabic
Numbers in text | Digits reversed around symbols | Bidi isolation on numbers and codes
04
WCAG 2.4.3 Focus Order (Level A) requires that focus moves in an order that preserves meaning. In RTL, that usually means right to left, top to bottom, matching how the screen is read. Authoring tools that position elements absolutely can keep the English tab order after mirroring. Test with a keyboard in the Arabic build, and test with a screen reader (NVDA on Windows, VoiceOver on Apple devices) set to Arabic: check that the language attribute is set so Arabic is read with an Arabic voice, and that numbers and English terms are announced correctly.
05
Build the Arabic version of the three templates from lesson 1. Run the RTL checks table and a keyboard pass. Add both language versions to your pattern sheet.