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

The page has a logical tab order

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

Many different users rely on the keyboard to navigate applications, from users with temporary and permanent motor impairments to users who use keyboard shortcuts to be more efficient and productive. A logical tab order is an important part of providing a smooth keyboard navigation experience.

How to manually test #

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

Learn more in Keyboard access fundamentals.

Are you able to reach all of the interactive controls on the page? If not, you may need to use tabindex to improve the focusability of those controls. The general rule of thumb is that any control a user can interact with or provide input to should aim to be focusable and display a focus indicator. If a keyboard user can't see what's focused, they have no way of interacting with the page.

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 aren't able to reach all of the interactive controls on the page, the first go-to fix is to replace custom controls with standardized HTML alternatives. For example, replace a <div> acting like a button with <button>. Using built-in HTML elements can greatly improve the accessibility of your site, and significantly cut down on your workload.

If you're building custom interactive components with no standardized HTML equivalent, use the tabindex attribute to ensure that they're keyboard accessible. For example:

<div tabindex="0">Focus me with the TAB key</div>

Learn more in Control focus with tabindex.

Resources #

Source code for The page has a logical tab 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.