Skip to content
ENالعربية

R023: Text inputs rendered LTR where Arabic input is expected

Arabic typed into a left-to-right text box, search box or textarea starts at the wrong edge with its punctuation on the wrong side; email, phone, URL, number and password fields are skipped.

The check

Id
R023
Category
Direction and bidi
Default severity
high

When it fires

  1. high

    A visible text or search input, or a textarea, renders left-to-right while its placeholder or label is in Arabic: the field expects Arabic, which will type in from the wrong edge. This holds even when the field says dir="ltr", unless its inputmode or autocomplete says it holds digits, a code or an address.

    Fix: Add dir="rtl" to the field, or dir="auto" if input language varies.

  2. highmedium confidence

    A visible text or search input, or a textarea, on an Arabic page renders left-to-right with no dir attribute and no Arabic placeholder or label to confirm what it expects.

    Fix: Add dir="rtl" to the field, or dir="auto" if input language varies.

What it leaves alone

Email, phone, URL, number and password fields, which should stay left-to-right (R070 checks the opposite), and a text field whose inputmode is numeric, decimal, tel, email or url, or whose autocomplete names a one-time code or a payment card field, for the same reason; fields set to dir="rtl" or dir="auto"; a field set to dir="ltr" with nothing Arabic about it, which is taken as intended; and fields no reader can type into: type="hidden", aria-hidden="true" or inert on the field or an ancestor, a box of one pixel or none, or a clip or clip-path that leaves nothing showing, which is how a component library carries a custom select's value.

Broken, then fixed

before.html
<input type="search" dir="ltr" placeholder="ابحث في المنتجات">
after.html
<input type="search" dir="rtl" placeholder="ابحث في المنتجات">

Check it by hand

Select the field and run [getComputedStyle($0).direction, $0.dir, $0.placeholder] in the DevTools console. ltr on a field meant for Arabic is the finding; typing a few Arabic words shows the caret starting at the wrong edge.

What the report shows you

Each R023 finding carries the fields below that apply to it, so you can see why it fired without rerunning the scan.

control
input or textarea.
type
The input's type, or nothing when it is a textarea or the type is unset.
placeholder
The placeholder as written.
label
The text of the field's label.
computedDirection
The direction the field renders in.

Components that pass it by construction

These Ritla UI components satisfy R023 by how they are built. Used as documented, they do not bring this defect onto your page.

More direction and bidi checks

Does your page trip R023?

Paste a URL. Ritla renders the page on desktop, tablet and mobile, runs every check, and shows the top issues with screenshot evidence.

Scan a page freeBrowse the checks