About Focusable but not Tab-navigatable HTML Elements

When you set tabindex="-1", you make the element focusable via JavaScript or by anchor links, but not navigatable using the Tab key.

For example, when you have

<main id="main" tabindex="-1"></main>

You can link to the <main> elements with:

<a href="#main">Go to main content</a>

Or you can set focus to it by JavaScript:

document.getElementById('main').focus();

Tips and Tricks Development Accessibility JavaScript HTML5