DOM order (logical-order)

The sequence in which content is presented visually matches the reading order in the DOM. e.g., headings, paragraphs, and other structural elements are ordered logically both visually and programmatically.


Illogical DOM order:

In this example DOM order does not match visual order, because of CSS properties:


This paragraph appears second visually but is first in the DOM

This heading appears first visually but is second in the DOM


The (DOM/programmatic) structure of the above example looks like this:

Note: Impossible to automatically test or detect. Requires a human tester or AI to visually & programmatically analyze the page, compare the visual and DOM order, and determine if the DOM order matches the visual order.

axe detected: none  |  QualWeb detected: none