What Is the CSS Order Property and Its A11y Risks?

The CSS order property allows developers to rearrange flexbox and grid child elements visually without changing the underlying HTML document structure. While useful for responsive design adjustments, manipulating display order creates a disconnect between the visual presentation and the DOM source code. This mismatch introduces severe accessibility barriers for keyboard users, screen reader users, and people navigating via spatial inputs, as sequential navigation follows the source order rather than the visual sequence on screen.

How the CSS Order Property Works

In CSS Flexible Box and CSS Grid layouts, elements are displayed by default according to their source order in the HTML markup, effectively sharing an initial order value of 0. Applying integer values—positive or negative—to the order property alters where the item renders along the layout axis.

Elements with lower integer values appear before elements with higher integer values. For instance, giving an element order: -1 moves it to the start of the layout container visually, while order: 1 places it toward the end. However, this manipulation is purely visual; the Document Object Model (DOM) tree remains unchanged.

The Disconnect Between DOM Order and Visual Order

The core accessibility issue stems from the separation of presentation and document structure. Assistive technologies and browser navigation models rely strictly on the DOM tree to determine reading order and keyboard focus flow.

When CSS reorders elements:

  • DOM order governs screen reader traversal, keyboard tab index sequences, and print outputs.
  • Visual order governs only what sighted users observe on the rendered canvas.

When these two structures diverge, user interfaces break core accessibility expectations mandated by accessibility guidelines, such as WCAG 2.2 Success Criterion 1.3.2 (Meaningful Sequence) and Success Criterion 2.4.3 (Focus Order).

Primary Accessibility Risks

1. Disorienting Keyboard Navigation

Keyboard users navigate interactive elements—such as links, buttons, and form controls—using the Tab key. Because the browser resolves tab sequences based on DOM order, focus jumps erratically across the screen if the visual order has been heavily altered with the order property. A user tabbing forward might see their focus indicator jump backward, across columns, or off-screen, making navigation unpredictable and disorienting.

2. Confusing Screen Reader Reading Sequences

Screen readers interpret and announce content sequentially according to the DOM source. When visual layout differs from markup order, non-sighted users experience a logical flow different from sighted users. For dual users—such as individuals with low vision who use screen magnification alongside screen reader speech output—the audio announcement will not correspond to the element currently highlighted on screen.

3. Pointer and Switch Device Mismatches

Users relying on switch access hardware, head pointers, or eye-tracking systems often depend on logical spatial scanning patterns. A fractured layout order forces switch interfaces to traverse the interface in an unnatural sequence, slowing down navigation and increasing physical fatigue.

Best Practices and Safe Alternatives

To maintain an accessible interface, visual order should mirror the source order whenever possible:

  • Rearrange the Source Markup First: If an item must appear earlier in the flow across all viewports, move the element directly within the HTML template rather than reordering it with CSS.
  • Limit order to Purely Decorative or Static Content: Using order on non-interactive, non-text elements (such as decorative background shapes or icons) carries fewer risks, provided the surrounding text flow remains coherent.
  • Test Focus Traversal Manually: Always use the Tab key to verify that the focus indicator moves smoothly and predictably from top-to-bottom and left-to-right (or the relevant reading direction of the document).
  • Leverage Modern CSS Reading Flow Controls: Emerging CSS features (such as reading-flow) aim to harmonize focus order with visual grid and flex arrangements, but until widespread cross-browser support and assistive technology compatibility are standard, relying on HTML source order remains the most robust strategy.