The tabindex attribute allows you to control whether an element is focusable and to define the relative order of the element for the purposes of sequential focus navigation.
All elements are using this attribute.
html, body, svg {
height: 100%;
}
<?xml version="1.0"?>
<svg viewBox="0 0 260 260" xmlns="http://www.w3.org/2000/svg">
<circle cx="60" cy="60" r="15" tabindex="1" />
<circle cx="60" cy="160" r="30" tabindex="3" />
<circle cx="160" cy="60" r="30" tabindex="2" />
<circle cx="160" cy="160" r="60" tabindex="4" />
</svg>
Usage notes
| Value | valid integer |
|---|---|
| Default value | None |
| Animatable | No |
- valid integer
- Relative order of the element for the purposes of sequential focus navigation.
Specifications
| Specification | Status | Comment |
|---|---|---|
| Scalable Vector Graphics (SVG) 2 The definition of 'tabindex' in that specification. |
Candidate Recommendation | Initial definition |
Browser compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
| Desktop | Mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
tabindex | Chrome Full support Yes | Edge Full support 12 | Firefox Full support 51 | IE Full support Yes | Opera Full support Yes | Safari Full support Yes | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support 51 | Opera Android Full support Yes | Safari iOS Full support Yes | Samsung Internet Android Full support Yes |
Legend
- Full support
- Full support