1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
|
<header><h1>tabindex</h1></header><div class="section-content"><p>The <code>tabindex</code> <a href="../global_attributes">global attribute</a> allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the <kbd>Tab</kbd> key, hence the name) and determine their relative ordering for sequential focus navigation.</p></div>
<h2 id="try_it">Try it</h2>
<div class="section-content">
<iframe class="interactive is-tabbed-standard-height" height="200" src="https://interactive-examples.mdn.mozilla.net/pages/tabbed/attribute-tabindex.html" title="MDN Web Docs Interactive Example" loading="lazy"></iframe> <p>It accepts an integer as a value, with different results depending on the integer's value:</p> <div class="notecard note" id="sect1"> <p><strong>Note:</strong> If an HTML element renders and has <code>tabindex</code> attribute with any valid integer value, the element can be focused with JavaScript (by calling the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus"><code>focus()</code></a> method) or visually by clicking with the mouse. The particular <code>tabindex</code> value controls whether the element is <code>tabbable</code> (i.e. reachable via sequential keyboard navigation, usually with the <kbd>Tab</kbd> key).</p> </div> <ul> <li>A <em>negative value</em> (the exact negative value doesn't actually matter, usually <code>tabindex="-1"</code>) means that the element is not reachable via sequential keyboard navigation. <div class="notecard note" id="sect2"> <p><strong>Note:</strong> <code>tabindex="-1"</code> may be useful for elements that should not be navigated to directly using the <kbd>Tab</kbd> key, but need to have keyboard focus set to them. Examples include an off-screen modal window that should be focused when it comes into view, or a form submission error message that should be immediately focused when an errant form is submitted.</p> </div> </li> <li>
<code>tabindex="0"</code> means that the element should be focusable in sequential keyboard navigation, after any positive <code>tabindex</code> values. The focus navigation order of these elements is defined by their order in the document source.</li> <li>A <em>positive value</em> means the element should be focusable in sequential keyboard navigation, with its order defined by the value of the number. That is, <code>tabindex="4"</code> is focused before <code>tabindex="5"</code> and <code>tabindex="0"</code>, but after <code>tabindex="3"</code>. If multiple elements share the same positive <code>tabindex</code> value, their order relative to each other follows their position in the document source. The maximum value for <code>tabindex</code> is 32767.</li> <li>If the <code>tabindex</code> attribute is included with no value set, whether the element is focusable is determined by the user agent. <div class="notecard warning" id="sect3"> <p><strong>Warning:</strong> You are recommended to only use <code>0</code> and <code>-1</code> as <code>tabindex</code> values. Avoid using <code>tabindex</code> values greater than <code>0</code> and CSS properties that can change the order of focusable HTML elements (<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Ordering_flex_items">Ordering flex items</a>). Doing so makes it difficult for people who rely on using keyboard for navigation or assistive technology to navigate and operate page content. Instead, write the document with the elements in a logical sequence.</p> </div> </li> </ul> <p>Some focusable HTML elements have a default <code>tabindex</code> value of <code>0</code> set under the hood by the <a href="https://developer.mozilla.org/en-US/docs/Glossary/User_agent">user agent</a>. These elements are an <a href="../element/a"><code><a></code></a> or <a href="../element/area"><code><area></code></a> with <code>href</code> attribute, <a href="../element/button"><code><button></code></a>, <a href="../element/frame"><code><frame></code></a> <abbr class="icon icon-deprecated" title="Deprecated. Not for use in new websites."> <span class="visually-hidden">Deprecated</span> </abbr>, <a href="../element/iframe"><code><iframe></code></a>, <a href="../element/input"><code><input></code></a>, <a href="../element/object"><code><object></code></a>, <a href="../element/select"><code><select></code></a>, <a href="../element/textarea"><code><textarea></code></a>, and SVG <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/a"><code><a></code></a> element, or a <a href="../element/summary"><code><summary></code></a> element that provides summary for a <a href="../element/details"><code><details></code></a> element. Developers shouldn't add the <code>tabindex</code> attribute to these elements unless it changes the default behavior (for example, including a negative value will remove the element from the focus navigation order).</p> <div class="notecard warning" id="sect4"> <p><strong>Warning:</strong> The tabindex attribute must not be used on the <a href="../element/dialog"><code><dialog></code></a> element.</p> </div>
</div>
<h2 id="accessibility_concerns">Accessibility concerns</h2>
<div class="section-content">
<p>Avoid using the <code>tabindex</code> attribute in conjunction with non-<a href="../content_categories#interactive_content">interactive content</a> to make something intended to be interactive focusable by keyboard input. An example of this would be using a <a href="../element/div"><code><div></code></a> element to describe a button, instead of the <a href="../element/button"><code><button></code></a> element.</p> <p>Interactive components authored using non-interactive elements are not listed in the <a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility#accessibility_apis">accessibility tree</a>. This prevents assistive technology from being able to navigate to and manipulate those components. The content should be semantically described using interactive elements (<a href="../element/a"><code><a></code></a>, <a href="../element/button"><code><button></code></a>, <a href="../element/details"><code><details></code></a>, <a href="../element/input"><code><input></code></a>, <a href="../element/select"><code><select></code></a>, <a href="../element/textarea"><code><textarea></code></a>, etc.) instead. These elements have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA</a>.</p> <ul> <li><a href="https://www.tpgi.com/using-the-tabindex-attribute/" target="_blank">Using the tabindex attribute | The Paciello Group</a></li> </ul>
</div>
<h2 id="specifications">Specifications</h2>
<div class="_table"><table class="standard-table">
<thead><tr><th scope="col">Specification</th></tr></thead>
<tbody><tr><td><a href="https://html.spec.whatwg.org/multipage/interaction.html#attr-tabindex">HTML Standard <br><small># attr-tabindex</small></a></td></tr></tbody>
</table></div>
<h2 id="browser_compatibility">Browser compatibility</h2>
<div class="_table"><table>
<thead>
<tr id="bct-browser-type">
<th></th>
<th colspan="6">Desktop</th>
<th colspan="6">Mobile</th>
</tr>
<tr id="bct-browsers">
<th></th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari</th>
<th>WebView Android</th>
<th>Chrome Android</th>
<th>Firefox for Android</th>
<th>Opera Android</th>
<th>Safari on IOS</th>
<th>Samsung Internet</th>
</tr>
</thead>
<tbody><tr>
<th><code>tabindex</code></th>
<td class="bc-supports-yes">1</td>
<td class="bc-supports-yes">12</td>
<td class="bc-supports-yes">1.5</td>
<td class="bc-supports-yes">Yes</td>
<td class="bc-supports-yes">15</td>
<td class="bc-supports-yes">≤4</td>
<td class="bc-supports-yes">4.4</td>
<td class="bc-supports-yes">18</td>
<td class="bc-supports-yes">4</td>
<td class="bc-supports-yes">14</td>
<td class="bc-supports-yes">≤3.2</td>
<td class="bc-supports-yes">1.0</td>
</tr></tbody>
</table></div>
<h2 id="see_also">See also</h2>
<div class="section-content"><ul> <li>All <a href="../global_attributes">global attributes</a>
</li> <li>
<a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/tabIndex"><code>HTMLElement.tabIndex</code></a> that reflects this attribute</li> <li>Accessibility problems with <code>tabindex</code>: see <a href="https://adrianroselli.com/2014/11/dont-use-tabindex-greater-than-0.html" target="_blank">Don't Use Tabindex Greater than 0</a> by Adrian Roselli</li> </ul></div><div class="_attribution">
<p class="_attribution-p">
© 2005–2023 MDN contributors.<br>Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.<br>
<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex" class="_attribution-link">https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex</a>
</p>
</div>
|
