Visual order on the page follows DOM order

This technique assures that the source code and the visual presentation of the content are ordered in the same way. With CSS, the order of the content in the source code can be changed to suit any visual presentation.

Despite being meaningful in themselves, each order may confuse assistive technology users. If the user is interacting with the content through a keyboard, it may be because they have turned off the author-specified presentation, accessed the content directly from the source code (such as with a screen reader), or switched off the author-specified presentation.

Blind users who use screen readers to read the page will become confused when they encounter information differently from sighted users who read the page according to visual order.

When using a screen-reader and a magnifier, a user with low vision may be confused when the reading order appears to jump around on the screen. Keyboard users may have difficulty predicting where the focus will go next when the visual order does not match the source order.

Fixing the problem

If the focus order seems wrong, you should rearrange the elements in the DOM to make the tab order more natural.

If you've used CSS to visually reposition elements, assistive technology users will experience a nonsensical navigation. Instead of using CSS, move the element to an earlier position in the DOM.

If offscreen content is still accessible to keyboard controls, consider removing it using tabindex="-1".