- Success Criterion 1.3.2
- Conformance level A
Mixed-Direction Text That Scrambles the Reading Order
1.3.2 — Meaningful Sequence
Scenario
Setting
A recipe site's ingredient list
What’s wrong
RTL/LTR mixed text without direction handling, scrambling readable order.
Example
<li>2 cups دقيق للخبز - all-purpose flour</li>Why it matters
Without direction markup, the bidi algorithm can flip the order of the quantity relative to the Arabic phrase, so an Arabic-speaking cook sees "2 cups" jump to the wrong side of the ingredient name.
How to test
Read mixed-direction (RTL/LTR) text with a screen reader: check for a dir attribute on the foreign-direction span — without it, the reading order can scramble.
How to fix
Wrap embedded runs of the opposite direction with dir or the bdi element so the bidi algorithm cannot scramble neighboring numbers and punctuation.
<li><span dir="ltr">2 cups</span> <bdi>دقيق للخبز</bdi> (all-purpose flour)</li>Outcome
A bilingual reader now sees the quantity and ingredient name stay in a stable, predictable order.
Who is affected
Bidirectional readers of Arabic, Hebrew, and other RTL scripts, plus screen reader users, hear or see numbers and ingredient names reordered unpredictably.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- CSS Layout Changes That Scramble the Screen Reader’s Reading Order
- Word Spelled Out Letter by Letter Instead of Read as a Word
- Text Columns Faked With Spaces Read Aloud Out of Order
- Layout Table That Reads in a Nonsensical Order When Linearized
- CSS Reordering That Makes Code Order Differ From Visual Order
- Multi-Column Article Whose Code Order Interleaves the Columns