- 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
Watch a recipe site's ingredient list closely and you'll spot this: RTL/LTR mixed text without direction handling, scrambling readable order.
Why it matters
Screen-reader and keyboard users who encounter content in DOM order. In this case (a recipe site's ingredient list), they lose track of what belongs to what.
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
The screen reader must read content in an order matching the visual/logical order, item by item — nothing skipped, merged, fragmented, or added.
Outcome
Once corrected, a recipe site's ingredient list lets them navigate the content in a sensible order, specifically for the “Mixed-Direction Text That Scrambles the Reading Order” issue on a recipe site's ingredient list.
Who is affected
Screen-reader and keyboard users who encounter content in DOM order.
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