Intermediate LevelHTML & Semantic Web
How does the tabindex attribute control keyboard focus navigation?
❓ Interview Prompt: Compare tabindex="0" (adds element to sequential focus order) vs tabindex="-1" (programmatic focus only) vs positive tabindex antipattern.
The 'tabindex' attribute controls whether an element can receive keyboard focus:
1
'tabindex="0"': Adds non-interactive elements (like custom divs) into the natural keyboard tabbing order.
2
'tabindex="-1"': Removes element from sequential tabbing order, but allows focusing it programmatically via JavaScript ('element.focus()'). Ideal for modal containers!
3
Positive 'tabindex="1+"' (ANTIPATTERN): Overrides natural DOM tabbing order, causing severe keyboard navigation disorientations!
Code Implementation Example
html
<!-- Programmatically focusable modal container (not in tab flow) -->
<div id="modal" tabindex="-1" aria-modal="true">
<h2>Modal Window</h2>
</div>
<!-- Custom element added to natural tabbing order -->
<div tabindex="0" role="button" onclick="action()">Custom Button</div>💡Focus management using tabindex=0 and tabindex=-1.
🎯 Interview Key Takeaway
Use tabindex="0" to include custom controls in tab order, tabindex="-1" for programmatic focus, and avoid positive tabindex values.
#tabindex#Focus Management#Accessibility#Intermediate
Back to all HTML & Semantic Web Questions→