Using Tabindex

Tabindex = "-1"

tabindex = "-1"

• Not in the natural tab order
• Can be programmatically focused with focus() method

This can be especially useful for off screen content which appears on screen in response to a user event. When the new content is displayed, you may wish to call its focus method which will then direct future keyboard events to it.

document.querySelector('#modal').focus()

Tabindex = "0"

tabindex = "0"

• in the natural tab order
• Can be programmatically focused

<div id="dropdown">Settings</div> // without tabindex, this element will not receive focus

<div id="dropdown" tabindex="0">Settings</div> 
                                // with tabindex, this element gets focused, 
                                // and futrue keyboard events get directed to it.

Tabindex = "5"

tabindex = "5"     // tabindex > 0

• in the natural tab order
• Jumped to the front of the tab order
• Anti-pattern! (Using a tabindex greater than zero is discouraged and considered a bit of an anti-pattern.) <- Can be confusing for screen reader users.

tabindexon MDN

https://www.w3.org/TR/html5/editing.html#sequential-focus-navigation-and-the-tabindex-attribute

You can find this example in thelesson2-focus/03-managing-focusdirectory within thiscourse's GitHub Repository.

To run this example you'll need to use a local server. The easiest way to do so is to use theWeb Server for Chrome extension.

Under the heading that says "Web Server URL(s)" click the first link to preview the app on your local server.

Take a look at thescripts/main.jsfile to figure out how the route is updated and to determine when you would need to step in and manage focus.