Skip to content
Wiki
Sequence
CSS Positioning

CSS Positioning

When the sequence in which content is presented affects its meaning, a correct reading sequence can be programmatically determined.

WCAG 1.3.2 (opens in a new tab)

The order of content can influence the meaning of it, and so messing with this order can cause users to encounter the content in a different order than intended.

Examples of issues that could be caused by this would be reading the paragraph before its heading, or perceiving an ordered list in the incorrect order.

Common ways to break this ordering is to use things like position: absolute or specific flex/grid positioning, but note that it only impacts this guideline if the order is meaningful.

If may not be meaningful if the content that is re-ordered is a collection of articles, as the order they are encountered may not be important. But if it were a 1 to 10 list then these should be kept in order.

The example below has forcefully re-ordered the buttons visually, so the programmatic order is different to the visual order.

How to fix

If the order is meaningful, then you should avoid using CSS positioning to re-order content. Ensuring the DOM order is the same as the visual order helps to alleviate most of these issues.

Checking by disabling CSS can also help identify issues and then rearranging in the DOM or ensuring the correct order is somehow presented to users would fix this issue.

If the order is not meaningful, like nav bar position or a collection of articles, then it is not necessary to worry about this guideline.

References