R072: <select> rendered LTR with Arabic options
A dropdown of Arabic options that lays out left-to-right puts the chosen text on the left and the arrow on the right, the reverse of the page around it.
The check
- Id
- R072
- Category
- Forms
- Default severity
When it fires
A visible
<select>on an Arabic page, with Arabic among its options, renders left-to-right, so the chosen text sits on the left and the arrow on the right: the reverse of the page around it.Fix: Remove the LTR override (or set dir="rtl") on the select.
What it leaves alone
Selects set to dir="auto", and selects with no Arabic among their options, like a list of country codes. Up to six per page.
Broken, then fixed
<select dir="ltr">
<option>الرياض</option>
<option>جدة</option>
</select><select>
<option>الرياض</option>
<option>جدة</option>
</select>Check it by hand
Select the dropdown and run [getComputedStyle($0).direction, [...$0.options].slice(0, 3).map((o) => o.text)] in the DevTools console. ltr with Arabic options is the finding.
What the report shows you
Each R072 finding carries the fields below that apply to it, so you can see why it fired without rerunning the scan.
- computedDirection
- The direction the select renders in.
- optionSamples
- Up to three of its options, as written.
Does your page trip R072?
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