tabindex

它接受一个整数作为值，根据整数的值有不同的结果：

¥It accepts an integer as a value, with different results depending on the integer's value:

注意：如果 HTML 元素呈现并且具有带有任何有效整数值的 tabindex 属性，则可以使用 JavaScript（通过调用 focus() 方法）或通过鼠标单击以可视方式聚焦该元素。特定的 tabindex 值控制元素是否为 tabbable（即可通过顺序键盘导航访问，通常使用 Tab 键）。

¥Note: If an HTML element renders and has tabindex attribute with any valid integer value, the element can be focused with JavaScript (by calling the focus() method) or visually by clicking with the mouse. The particular tabindex value controls whether the element is tabbable (i.e. reachable via sequential keyboard navigation, usually with the Tab key).

• 负值（确切的负值实际上并不重要，通常是 tabindex="-1"）意味着无法通过顺序键盘导航访问该元素。

  注意：tabindex="-1" 对于不应直接使用 Tab 键导航到但需要将键盘焦点设置到的元素可能很有用。示例包括在进入视图时应聚焦的离屏模态窗口，或者在提交错误表单时应立即聚焦的表单提交错误消息。

  ¥Note: tabindex="-1" may be useful for elements that should not be navigated to directly using the Tab 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.

• tabindex="0" 表示在任何正 tabindex 值之后，该元素应该在顺序键盘导航中可聚焦。这些元素的焦点导航顺序由它们在文档源中的顺序定义。
• 正值意味着该元素应该在顺序键盘导航中可聚焦，其顺序由数字值定义。也就是说，tabindex="4" 在 tabindex="5" 和 tabindex="0" 之前、但在 tabindex="3" 之后被聚焦。如果多个元素共享相同的正 tabindex 值，则它们之间的相对顺序遵循它们在文档源中的位置。tabindex 的最大值为 32767。
• 如果包含 tabindex 属性但未设置值，则该元素是否可聚焦由用户代理确定。

  警告：建议你仅使用 0 和 -1 作为 tabindex 值。避免使用大于 0 的 tabindex 值和可能更改可聚焦 HTML 元素 (订购弹性项目) 顺序的 CSS 属性。这样做使得依赖使用键盘进行导航或辅助技术来导航和操作页面内容的人变得困难。相反，请按逻辑顺序编写包含元素的文档。

  ¥Warning: You are recommended to only use 0 and -1 as tabindex values. Avoid using tabindex values greater than 0 and CSS properties that can change the order of focusable HTML elements (Ordering flex items). 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.

一些可聚焦的 HTML 元素具有由 用户代理 在后台设置的默认 tabindex 值 0。这些元素是具有 href 属性的 <a> 或 <area>、<button>、<frame> Deprecated 、<iframe>、<input>、<object>、<select>、<textarea> 和 SVG <a> 元素，或者提供 <details> 元素摘要的 <summary> 元素。开发者不应将 tabindex 属性添加到这些元素，除非它更改了默认行为（例如，包含负值将从焦点导航顺序中删除该元素）。

¥Some focusable HTML elements have a default tabindex value of 0 set under the hood by the user agent. These elements are an <a> or <area> with href attribute, <button>, <frame> Deprecated , <iframe>, <input>, <object>, <select>, <textarea>, and SVG <a> element, or a <summary> element that provides summary for a <details> element. Developers shouldn't add the tabindex 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).

警告：tabindex 属性不得用于 <dialog> 元素。

¥Warning: The tabindex attribute must not be used on the <dialog> element.

¥Accessibility concerns

避免将 tabindex 属性与非 互动内容 属性结合使用，以使某些旨在通过键盘输入进行交互式聚焦的内容。例如，使用 <div> 元素而不是 <button> 元素来描述按钮。

¥Avoid using the tabindex attribute in conjunction with non-interactive content to make something intended to be interactive focusable by keyboard input. An example of this would be using a <div> element to describe a button, instead of the <button> element.

使用非交互元素编写的交互组件未在 可达性树 中列出。这会阻止辅助技术导航和操作这些组件。应使用交互元素（<a>、<button>、<details>、<input>、<select>、<textarea> 等）对内容进行语义描述。这些元素具有内置角色和状态，可将状态传达给可访问性，否则必须由 ARIA 管理。

¥Interactive components authored using non-interactive elements are not listed in the accessibility tree. This prevents assistive technology from being able to navigate to and manipulate those components. The content should be semantically described using interactive elements (<a>, <button>, <details>, <input>, <select>, <textarea>, etc.) instead. These elements have built-in roles and states that communicate status to the accessibility that would otherwise have to be managed by ARIA.

• 使用 tabindex 属性 | 帕切洛集团

¥See also

• 全部 全局属性
• 反映此属性的 HTMLElement.tabIndex
• tabindex 的辅助功能问题：参见 Adrian Roselli 的 不要使用大于 0 的 Tabindex