Key points
- Form elements and links are tabbable by default. It means we can use tab to navigate through them.
- If you want any other element tabbable or to get focus on tab, you need to explicitly mention
tabIndex=0 - Once an element gets focus, it must respond to enter / space keypress
- You can change tabOrder by using the tabIndex values
- display:none means the tabbable element in that section wont get focus
tabIndex takes three value
- tabIndex = 0 means the element receives focus as per the normal order. Not mentioning the tabIndex=0 on links and form elements has no impact
- tabIndex = +1 or greater means the element gets focus before the other tabbable elements.. If an element has tabIndex=1 & tabIndex=3, the tab order is in ascending order. i.e. 1, 3
- tabIndex = -1 means skip focus through tab. But the same element can receive focus through program or keyboard.
<ol>
<a href="#">Link 1</a>
<a href="#" tabIndex="2">Link 2</a>
<a href="#" tabIndex="1">Link 3</a>
<a href="#" tabIndex="4">Link 4</a>
<a href="#" tabIndex="3">Link 5</a>
<a href="#" tabIndex="0">Link 6</a>
<a href="#" tabIndex="-1">Link 7</a>
</ol>The tab order is Link 3, Link 2, Link 5, Link 4, Link 1, Link 6.
Link 7 wont be focussable.