HTML · The document layer
How does tabindex affect focus order?
Short answer
tabindex=0 adds an element to the natural tab order, tabindex=-1 makes it focusable only programmatically, and positive values override the natural order and should be avoided.
Focus order should follow the visual and logical reading order. Native interactive elements are focusable automatically, so most of the time you should not need tabindex at all.
The values
- tabindex=0 puts a normally non-focusable element into the natural tab order
- tabindex=-1 makes an element focusable by script or click but not by Tab
- Positive values force an order across the page and almost always create confusion
- Native buttons, links and form controls are already focusable
- A focusable element still needs a visible focus indicator
<div tabindex="-1" id="dialog" role="dialog" aria-modal="true">
Dialog content
</div>
<button type="button">Natural focus order</button>Do not add tabindex=0 to a div to make it clickable. That makes it focusable but does not give it a role, keyboard activation or button semantics. Use a native button instead.
Follow-ups you should expect
Interviewers use these to check whether the first answer was understanding or memorisation.
- 1When is tabindex=-1 useful?
- 2Why are positive tabindex values discouraged?
- 3Does tabindex=0 make a div accessible?
- 4How should focus styles be handled?
Say it in the interview
tabindex controls whether and where an element participates in keyboard focus. Zero adds it to the natural order, minus one makes it programmatically focusable but skips it in Tab order, and positive values override the order, which I avoid. Native controls are already focusable, so I rarely need tabindex. I never add tabindex=0 to a div as a substitute for a real button, and I always keep a visible focus indicator.
Use this as a model, not a script. Saying it in your own words is what makes it survive follow-up pressure.
Related questions
Reading is step one
Now say it out loud.
Understanding an answer and delivering it under pressure are different skills. Rehearse this topic in a live HTML mock interview and get scored feedback on depth, clarity and confidence.