tabindex: Control Element Focus and Tab Order
The tabindex attribute lets you control an element's keyboard focus. Use tabindex="0" to make custom components tabbable in document order, or tabindex="-1" to make an element focusable only by script, like for a modal.
Why it exists
By default, browsers allow keyboard focus only on interactive elements like links, buttons, and form inputs, following their order in the HTML. Modern web apps require non-native components like custom dropdowns or modals to be accessible, which means they need a way to join or be excluded from this default focus flow.
The mental model
Think of tabindex as instructions for the browser's focus manager. It lets you tell the browser how to handle an element during sequential keyboard navigation. You can either add an element to the natural tab flow, pull it out while keeping it focusable by script, or (the anti-pattern) create a completely separate, prioritized flow.
How it works
tabindex accepts an integer with three distinct behaviors. First, a negative value (tabindex="-1") makes an element focusable via JavaScript (element.focus()) or a mouse click, but removes it from the sequential tab order. Second, tabindex="0" makes an element focusable and includes it in the natural tab order according to its position in the document source. Third, a positive value (tabindex="1", tabindex="5", etc.) creates a prioritized tab order. All elements with a positive tabindex are visited first, from lowest value to highest, before the browser moves on to elements with tabindex="0".
When to use it
Use tabindex="0" on non-interactive elements like divs that you've made interactive with JavaScript, such as a custom-built dropdown menu. This ensures keyboard users can access your component. Use tabindex="-1" for elements that need programmatic focus but shouldn't be in the normal tab sequence, like a modal window that should trap focus when it opens, or an error message that appears after a failed form submission.
When not to use it
Avoid using positive tabindex values greater than 0. Doing so creates a navigation order that is disconnected from the visual layout of the page. This can cause the focus to jump around unpredictably, creating a confusing and inaccessible experience for keyboard and screen reader users. It also creates a maintenance nightmare, as visual redesigns require re-evaluating and re-numbering every tabindex.
One canonical example
A modal dialog is a perfect use case. The main div of the modal should have tabindex="-1". When a user action triggers the modal, your script should call .focus() on the modal element. This allows you to manage focus programmatically—for instance, trapping the Tab key within the modal—without adding the modal container itself to the page's default tab sequence.
Interview question
Which scenario correctly describes the primary use case for setting an element's tabindex to '-1'?
- a.To make a non-interactive element focusable and part of the document's natural tab order.
- b.To allow an element to receive focus programmatically but exclude it from sequential keyboard navigation.Correct
- c.To completely disable an element from ever receiving focus, even through JavaScript.
- d.To establish a prioritized tab order, ensuring the element is focused before others with tabindex='0'.
Why? this is the answer
Setting tabindex='-1' allows an element to be focused by script (e.g., for a modal) or a mouse click, but removes it from the regular keyboard tab sequence. Option A describes the use case for tabindex='0', which includes an element in the natural tab order.
Just read this? Test yourself on what you have been reading.
Read the original → developer.mozilla.org
You just looked this up. Could you explain it out loud?
That is the part interviews actually test. Tezvyn takes questions like this one and gives you what the interviewer is really checking, the answer that lands, and the mistake that ends the conversation, in the four minutes before your next meeting.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on html — each one lists the topics its interview covers.
See open roles