R081: flex row-reverse faking RTL instead of dir (tab order fights visual order)
On a right-to-left page, a nav or list set to flex-direction: row-reverse shows its items in reverse source order, so pressing Tab moves focus against the direction Arabic readers scan.
The check
- Id
- R081
- Category
- Accessibility
- Default severity
When it fires
medium confidence
On a right-to-left page, a visible
<nav>, list, or element inside navigation lays out withflex-direction: row-reverse. The visual order and the source order now disagree, so pressing Tab moves focus against the order the reader sees. Reported at medium confidence.Fix: Drop row-reverse; with dir="rtl" flexbox mirrors on its own and tab order stays correct.
What it leaves alone
Left-to-right pages, and row-reverse on elements that are neither navigation nor lists, like a card layout, which this rule does not check. Up to five per page.
Broken, then fixed
[dir="rtl"] .menu {
display: flex;
flex-direction: row-reverse;
}.menu {
display: flex;
}Check it by hand
Select the menu and run getComputedStyle($0).flexDirection in the DevTools console, then press Tab through it: focus should move in the order you read.
What the report shows you
Each R081 finding carries the fields below that apply to it, so you can see why it fired without rerunning the scan.
- flexDirection
- The computed
flex-direction. - tag
- The element's tag.
- inNav
- Whether it sits inside navigation.
Components that pass it by construction
These Ritla UI components satisfy R081 by how they are built. Used as documented, they do not bring this defect onto your page.
Does your page trip R081?
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