Syntax
<h2 tabindex="-1">Results</h2>
element.focus();Examples
Managing Focus with tabindex: working example
Save as an HTML file and open it in a browser. Expected result: The button moves focus to Search results; the heading is not an extra stop during ordinary Tab navigation.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Working example</title>
<style>
:focus { outline: 3px solid #2563eb; outline-offset: 4px; }
</style>
</head>
<body>
<button id="jump">Go to results</button>
<h2 id="results" tabindex="-1">Search results</h2>
<p>Three documents found.</p>
<a href="#details">Read details</a>
<p id="details">Document details.</p>
<script>
document.querySelector("#jump").addEventListener("click", () => {
document.querySelector("#results").focus();
});
</script>
</body>
</html>- Expected result: The button moves focus to Search results; the heading is not an extra stop during ordinary Tab navigation.
- A negative tabindex supports focus management after navigation or updates.
- The explicit outline makes the new focus position visible.
Best practices
- Avoid positive tabindex values, which create a separate and fragile navigation order.
- Use native buttons and links for actions and navigation.
Browser compatibility
Support applies to the named feature, not every attribute or behaviour in this article. Versions refer to browsers, not operating systems.
tabindex
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1.5 - Safari
- Supported
From 3.1 - Edge
- Supported
From 12 - Opera
- Supported
From 15
Mobile
- Safari on iOS
- Supported
From 2 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1.5
Safari
- From 3.1
Edge
- From 12
Opera
- From 15
Safari on iOS
- From 2
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
HTMLElement.focus
Desktop
- Chrome
- Supported
From 1 - Firefox
- Supported
From 1.5 - Safari
- Supported
From 3 - Edge
- Supported
From 12 - Opera
- Supported
From 8
Mobile
- Safari on iOS
- Supported
From 1 - Chrome for Android
- Supported
From 18 - Firefox for Android
- Supported
From 4 - Samsung Internet
- Supported
From 1.0
MDN BCD record for this feature · MDN reference
Support history and limitations
Chrome
- From 1
Firefox
- From 1.5
Safari
- From 3
Edge
- From 12
Opera
- From 8
Safari on iOS
- From 1 · If there's no hardware keyboard connected and the user has not yet interacted with the page, then calling focus() on an <input> element has no effect (for example, the element does not match the :focus selector).
Chrome for Android
- From 18
Firefox for Android
- From 4
Samsung Internet
- From 1.0
MDN BCD 8.1.5 · Dataset built 2026-10-08 · Mapping reviewed 2026-10-21. These dates are not individual browser-test or claim-verification dates. Unknown means the data does not establish support.