Skip to content
ENالعربية

R025: Directional icon pointing against the sequence its control advances

On a right-to-left page "next" runs leftward, so an arrow named arrow-right inside a next button, left unmirrored, tells an Arabic reader it goes back instead of forward.

The check

Id
R025
Category
Direction and bidi
Default severity
medium

When it fires

  1. medium

    On a right-to-left page, an icon whose name says left or right sits inside a control labelled next or previous, in English or Arabic, and after any mirroring it points away from where the control goes. On a right-to-left page next runs left and previous runs right. An icon that points the right way is left alone, whatever side its name says.

    Fix: Make it point the way the control advances: flip it under [dir=rtl] with transform: scaleX(-1), or reference the glyph that points the way the control advances.

  2. mediumlow confidence

    An icon named for a direction, like arrow-right or icon-next, is not mirrored and has no next or previous label to check it against. Nothing says it points the wrong way, so this is a prompt to look, at low confidence.

    Fix: Flip it under [dir=rtl] with transform: scaleX(-1), or reference the mirrored glyph.

What it leaves alone

Left-to-right pages, hidden icons, and a mirrored icon with no label to check it against, since mirroring is the ordinary fix. Over-mirroring, like a blanket flip that also turns a clock or a checkmark, is not checked.

Broken, then fixed

before.html
<button aria-label="التالي">
  <svg class="icon-arrow-right">…</svg>
</button>
after.html
<button aria-label="التالي">
  <svg class="icon-arrow-left">…</svg>
</button>

Check it by hand

Select the icon and run getComputedStyle($0).transform in the DevTools console: matrix(-1, 0, 0, 1, 0, 0) means it is mirrored. Then check it against its control: on a right-to-left page, next should point left.

What the report shows you

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

token
The direction word as the page writes it: a class, sprite id, ligature, image name or aria-label.
source
Where the name came from: svg-class, svg-use, class, ligature, img, bg-image or aria-label.
mirrored
Whether the page already flips it for right-to-left.
controlLabel
The next or previous wording on the control around it.
controlAdvances
Which way that wording says the control goes: forward or backward.
glyphPoints
The side the icon points, after any mirroring.
expectedOnRtl
The side it should point on a right-to-left page.
namesFunctionNotSide
Present when the name states a function, like next, rather than a side.

More direction and bidi checks

Does your page trip R025?

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