Fragments, Portals, and the DOM Order Trap
Keep rendered order matching the accessibility tree.
Source Order Is the Default Order
Screen readers and the keyboard follow the DOM order, the order elements appear in the document. CSS may move things visually, but reading order does not change.
Fragments Add No Extra Box
A React Fragment groups children without adding a wrapper div. That keeps your DOM clean and avoids breaking lists or tables with stray elements.
<>
<th>Name</th>
<th>Email</th>
</>All lessons in this course
- Route Changes Without Page Reloads
- Managing Focus With Refs and useEffect
- Fragments, Portals, and the DOM Order Trap
- jsx-a11y and Component-Level Guardrails