Focus Order

10 minute read

Last updated: Feb 23, 2026

Summary

People who are keyboard navigators often rely on the Tab key to navigate through focusable elements like links, buttons, and form fields. When these elements don’t receive focus in a logical order, it is difficult for keyboard navigators to understand where they are on a page or to navigate content and complete tasks successfully.

Overview

Focus or tab order is the order in which focusable elements receive keyboard focus. Focusable elements are interactive elements like links, buttons, form fields, and any other interactive component. You should be able to access every interactive component when using the Tab key to navigate through the focusable elements on a web page.

Correct focus order is an important aspect of keyboard accessibility. Elements must not receive focus in a non-logical order that does not make sense, and the focus must not jump unexpectedly around the page. If such changes occur, keyboard users may lose their place and struggle to understand how to interact with a website or document.

Focusable elements receive keyboard focus in the order in which they appear in the code. If the visual order of the site matches the code, focus order should generally not be an issue. However, if a website’s content is repositioned with CSS (Cascading Style Sheets) so that the visual order of the content no longer matches the code, then the focus order may not match the visual order of the page’s content either. Similarly, a PDF form must have a logical focus order that matches the visual layout of the page. It is important to check that the focus order makes logical sense and helps users navigate the content.

When using the Tab key to navigate:

The focus must move through the page in a logical order.
All focusable elements must receive focus (no elements are skipped).
Non-focusable elements such as headings must not receive focus.

See Using the Keyboard for more information on keyboard navigation.

Who is Helped

All individuals who are keyboard navigators benefit from a logical focus order.

People with physical and mobility disabilities may be unable to use a mouse or trackpad. Instead, they rely on the keyboard or other devices that operate like a keyboard to navigate. This group includes a diverse range of disabilities, from paraplegics and people affected by paralysis to people with arthritis and carpal tunnel syndrome. Anyone with limited manual dexterity may use a keyboard or a keyboard alternative, such as a mouth stick, head wand, switch device, or voice control software, to navigate when using a computer. People with temporary disabilities, like a broken arm, may also rely on keyboard navigation.
Most people who use screen readers rely heavily on keyboard navigation. Screen reader users who are blind and unable to see a mouse pointer rely solely on keyboard navigation.
Some individuals with low vision or cognitive and learning disabilities are better able to navigate digital content using an alternative input device instead of a mouse.
Even those who use a keyboard for navigation by personal preference benefit from content with a logical focus order.

Guidelines

There is one basic guideline for focus order - it must make sense to the user. You must ensure navigable (focusable) elements receive focus in a logical order that preserves the meaning and operability of the page.

Using the Tab key to navigate through the focusable elements on a web page, you should be able to access all links, buttons, form elements, and other interactive components.

For languages that read left to right, like English, the focus order for a page usually is top to bottom and left to right.

Languages with a different reading order will have a different focus order. For example, Korean and Japanese are read right to left.
Alternate tab orders are sometimes used to “jump” users to a critical interaction. This action usually occurs on pages with limited content, such as a Login page that moves the initial focus to a Login field.
Any alternate tab order must be used carefully, as missed content may confuse some individuals about where they are on the page or site.

Focus order checks should include hidden content, such as drop-down menus. Although this content is not seen when the page first loads, it is part of the focus order. You should be able to navigate through this content in a logical manner.

When someone opens a modal window, navigation drawer, date picker, or other custom component that is not part of the regular focus order of the web page:

The focus should move to the component when it opens.
Focus should remain within the component until it is closed.

For a website, developers use two common coding techniques that can result in a non-logical focus order. You should avoid both of these techniques if possible.

Avoid positioning content with Cascading Style Sheets (CSS).
- CSS controls the presentation of elements on a web page.
Avoid assigning tabindex values to elements.

You must implement these techniques carefully to preserve a logical focus order for people relying on keyboard navigation.

Avoid Positioning Content with CSS

Content that is commonly positioned with CSS includes cookie notifications and pop-up notifications. This content is often positioned at the top of a page by CSS because it is information that a user needs to interact with immediately. However, the code for these components is often placed at the bottom of the page in the DOM (document object model). (The DOM is the code structure that represents the objects on a web page.) This results in users having to tab through all focusable elements on the page before they reach the CSS-positioned content.

Avoid Changing Focus Order with `tabindex`

The HTML tabindex attribute can be used to manage the keyboard focus order. The default keyboard focus order is based on the order of elements in the code and only includes natively focusable HTML elements: links, buttons, and form elements. Tabindex can change the default focus order, add elements that do not normally receive focus to the focus order, and remove elements that normally would receive focus from the focus order.

You must only use positive tabindex values with extreme caution, as they affect the natural order in which elements receive focus. For example, a “Submit” button on a form has a tabindex value of “1”. This button will now receive focus before any other focusable elements on the page. For screen reader users who are blind, this can be especially confusing, as they will need to navigate through the page to try to understand what content the submit button relates to.

It is also important not to add tabindex values (either positive values or a value of “0”) to static elements that should not generally receive focus, such as headings, paragraphs, and images. When static elements receive keyboard focus, they unnecessarily add tab stops for users. This functionality makes it difficult and tiresome for users with mobility disabilities or limited dexterity, as it will take them much longer to move through content and reach the elements they can interact with. It can also be confusing, as this behavior is unexpected.

The following list explains how different tabindex values affect keyboard navigation.

tabindex not used: Navigation for all HTML links, buttons, and form elements follows the default focus order based on the order of elements in the code.
tabindex=0: Adds any element to the default focus order based on the order of elements in the code. Use tabindex=0 when creating interactive custom widgets to ensure the widget is focusable. Avoid using this for non-focusable elements such as headings.
tabindex=-1: Allows any element to receive focus via scripting techniques, but removes it from the default focus order. Use tabindex=-1 for elements such as on-page anchors. For example, skip links use this technique to let users jump to an anchor at the beginning of the main content without including the anchor in the focus order.
tabindex=<positive integer>: Places any element in the focus order based on the tabindex value. Elements with a tabindex value of 0 and elements that are focusable by default will be in the sequence after elements with a tabindex value of 1 or greater. Avoid this technique. Altering the default focus order can make content difficult to use and understand. Additionally, this technique is difficult to maintain when software is updated.

How to Test

Checkpoints

To test the focus order, you must ensure:

Every element that should receive focus does receive focus.
Elements that shouldn’t receive focus don’t receive focus.
Focus moves logically from one focusable element to the next. For English-based websites, this generally means that the focus will move from top to bottom or left to right.

If focus jumps around the page, if elements receive focus that shouldn’t, or if users can’t reach controls via the tab key, users may not be able to interact with the site successfully.

One other situation that may be confusing when testing is when the focus order includes hidden elements. This functionality is not necessarily wrong. Disabling the styles will reveal hidden elements and make it easy to determine whether they are correctly in the focus order.

Manual Testing

The easiest way to test the tab order is by manually tabbing through the page with your keyboard. Start with the cursor in the browser’s address bar, then press the tab key until you reach the first focusable content on the page. On many sites, this will be the Skip to Content link that is activated when the focus first moves to the page via the keyboard. From there, continue using the Tab key to move through the page’s focusable content, ensuring all testing checkpoints are met.

Automated Testing

Automated accessibility test tools, such as Accessibility Insights, WAVE, ANDI, and ARC Toolkit, can visually identify the tab order on a web page to quickly reveal errors. Focus order bookmarklets from A11y Tools, and Paul Adams also provides this functionality.

In the example below, the WAVE accessibility test tool shows the focus, or navigation, order for the W3C home page.¹ The results are listed in the WAVE sidebar, and markup that identifies the location of each element is added to the web page.

The WAVE Order panel lists, in numerical order, all focusable elements on the web page that are in the focus order, with their accessible name, and numerically identifies each focusable element based on its focus order. See text for full description. — Figure 1: Focus Order as Identified by WAVE

A close look at the test results reveals hidden elements like the “skip to content” link and other elements that do not appear in the WAVE’s focus order list, like the links in the site navigation dropdown menus. Disabling the styles will usually display these elements on the web page.

While these automated tools are helpful in quickly identifying where issues may lie, it is always best to include manual keyboard testing. Testing with a keyboard is easy to learn and can help you identify many accessibility issues.

For more information on keyboard testing, see:

Using the Keyboard
Testing with the Keyboard (Ta11y)

For more information on automated test tools, see:

Accessibility Insights (Ta11y)
WAVE
ANDI (Ta11y)
ARC Toolkit (Ta11y)
Single-purpose Bookmarklets