Skip to content
ENالعربية

R001: document direction missing, contradicted, or declared only in CSS

Whether <html> says right-to-left and the page actually renders that way: a missing or overridden dir flips the whole layout for an Arabic reader.

The check

Id
R001
Category
Document and metadata
Default severity
critical

When it fires

  1. critical

    The page is Arabic, <html> has no dir or says dir="ltr", and nothing in the CSS makes it right-to-left. The whole layout runs left-to-right.

    Fix: Add dir="rtl" to the root element: <html dir="rtl" lang="ar">.

  2. critical

    <html dir="rtl"> is declared, but a stylesheet sets direction: ltr on html or body, so the page renders left-to-right anyway. Reading the HTML alone will not find it.

    Fix: Find the rule setting direction: ltr on html or body and remove it, or scope it to the elements that genuinely need it. The attribute cannot win against a stylesheet.

  3. medium

    The layout renders right-to-left, but <html> does not say dir="rtl": the direction comes from CSS or from <body dir="rtl">. It looks right; what is missing is the declaration.

    Fix: Set dir="rtl" on the root element: <html dir="rtl" lang="ar">. CSS moves the boxes; the attribute is what :dir(), form controls, dir="auto" and assistive technology resolve against.

What it leaves alone

Pages that are not Arabic, and a page that declares right-to-left on <html> and renders that way. It judges the root only: a dir on an element inside the page is R020's concern.

Broken, then fixed

before.html
<html lang="ar">
<body>
  <h1>نظّم عمل فريقك في مكان واحد</h1>
</body>
</html>
after.html
<html dir="rtl" lang="ar">
<body>
  <h1>نظّم عمل فريقك في مكان واحد</h1>
</body>
</html>

Check it by hand

Open DevTools on the page and run [document.documentElement.dir, getComputedStyle(document.body).direction] in the console. A healthy Arabic page prints ['rtl', 'rtl']. An empty first value is the missing declaration; ['rtl', 'ltr'] means a stylesheet is overriding it.

What the report shows you

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

dirAttr
The dir attribute on <html> exactly as written, or nothing when it is absent.
computedRootDirection
The direction the page actually renders in, read from the computed style of body.
detectionSignals
Why the page counts as Arabic: an Arabic lang, an rtl dir, or at least 40% Arabic letters in the visible text.
arabicLetterRatio
The share of letters in the visible text that are Arabic, from 0 to 1.

More document and metadata checks

Does your page trip R001?

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