Skip to content
Learn Measure Blog Case studies About
On this page
  • How to manually test
  • How to fix
  • Resources

Visual order on the page follows DOM order

May 2, 2019 — Updated Sep 19, 2019
Appears in: Accessibility audits
On this page
  • How to manually test
  • How to fix
  • Resources

Implementing a logical tab order is an important part of providing your users with a smooth keyboard navigation experience. Screen readers and other assistive technologies navigate the page in DOM order. The flow of information should make sense.

How to manually test #

To check if your application's tab order is logical, try tabbing through your page. In general, focus should follow reading order, moving from left to right, from the top to the bottom of your page.

There are two main ideas to keep in mind when assessing your tab order:

  • Are the elements in the DOM arranged in a logical order?
  • Is offscreen content correctly hidden from navigation?

Notice any jumps in navigation that seem jarring. Also notice any offscreen jumps, where tabbing brings you to content that's not meant to be visible.

Learn more in Keyboard access fundamentals.

How to fix #

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".

Learn more in Control focus with tabindex.

Resources #

Source code for Visual order on the page follows DOM order audit

Last updated: Sep 19, 2019 — Improve article
Return to all articles
Share
subscribe

Contribute

  • File a bug
  • View source

Related content

  • developer.chrome.com
  • Chrome updates
  • Web Fundamentals
  • Case studies
  • Podcasts
  • Shows

Connect

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • All products
  • Terms & Privacy
  • Community Guidelines

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.