互动元素（包括表单控件、链接和按钮）默认情况下可聚焦且可使用 Tab 键切换。
可定位的元素是文档的顺序焦点导航顺序的一部分。其他元素是惰性元素，这意味着它们不具有互动性。借助 HTML 属性，您可以使互动元素变为非互动元素，也可以使非互动元素变为互动元素。
注意： 为了提高易用性和无障碍性，请务必确保用户知道哪个元素处于焦点状态。包含 CSS :focus、:focus-visible 和（可选）:focus-within 样式。学习 CSS 和学习无障碍功能中都有专门介绍焦点样式的模块。
默认情况下，导航焦点顺序与视觉顺序（即源代码顺序）相同。有一些 HTML 属性可以改变此顺序，还有一些 CSS 属性可以改变内容的视觉顺序。使用 HTML 更改 Tab 键顺序或使用 CSS 更改视觉呈现顺序可能会损害用户体验。
请勿使用 CSS 和 HTML 更改感知到的和实际的 Tab 键顺序。以下两个示例表明，与视觉预期顺序不同的标签页顺序会让用户感到困惑，并会影响用户体验。
在此示例中，tabindex 属性的值导致标签页顺序混乱：
在此示例中，CSS 导致了标签页顺序与内容的视觉顺序之间的差异：
flex-flow: row-reverse; 声明已反转视觉顺序。
此外，CSS order 属性已应用于第六个字词“This”，这会在视觉上移动该字词。标签页序列是代码的顺序，该顺序不再与视觉顺序一致，导致键盘用户无法正常使用。
注意 ：包括 flexbox、grid、定位、转换和多列在内的 CSS 功能可能会改变内容的视觉顺序。请务必确保您的内容在所有视口尺寸下都保持合理的 Tab 键顺序。使用键盘通过 Tab 键浏览内容来测试内容：使用 Shift + Tab 向后浏览内容。使用 CSS 指示哪个元素具有焦点。请勿使用 CSS 对可聚焦元素重新排序。
使非活动元素可交互
contenteditable 和 tabindex 属性是全局属性，可以添加到任何元素中，使这些元素在添加过程中可聚焦。可聚焦元素也可以通过鼠标或指针聚焦，方法是设置 autofocus 属性或通过脚本（例如使用 element.focus()）聚焦。
tabindex 属性
全局 tabindex 属性（在属性中引入）可让原本无法接收焦点的元素获得焦点，通常是通过 Tab 键实现，因此得名。
tabindex 属性的值为整数。负值表示元素可聚焦但不可通过 Tab 键访问。值为 0 的 tabindex 会使元素可聚焦和可使用 Tab 键切换，并将应用该值的元素添加到源代码顺序中的顺序聚焦导航顺序。值为 1 或更大时，元素可聚焦且可使用 Tab 键定位，但会将其添加到优先的 Tab 键定位序列中，应避免使用。
在此页面上，分享按钮
Share
注意： role="button" 会告知屏幕阅读器用户，此元素的行为应与
此网页上还有另一个自定义元素：本地导航具有一个 tabindex 值为负数的自定义元素：
如果 tabindex 属性的值为负数，则表示相应元素可聚焦但不可通过 Tab 键聚焦。该元素能够接收焦点（例如使用 HTMLElement.focus()），但它不属于顺序焦点导航顺序。对于不可通过 Tab 键选择的焦点元素，惯例是使用 tabindex="-1"。如果您向互动元素添加 tabindex="-1"，该元素将不再可使用 Tab 键进行定位。
element.focus() 方法可用于将焦点设置到可聚焦的元素。浏览器会将聚焦的元素滚动到视图中。因此，请避免使用 element.focus({preventScroll:true})，因为聚焦于不可见元素会导致用户体验不佳。
如果您想查询文档以了解哪个元素具有焦点，请使用只读的 Document.activeElement 属性。
tabindex 为 1 或更高级别的元素包含在单独的 Tab 序列中。如您在 Codepen 中所见，在按源顺序遍历常规序列（未设置 tabindex 或 tabindex="0"）中的元素之前，标签页会先按从最低值到最高值的顺序遍历单独的序列：
如果 tabindex 具有正值，则会将元素置于优先的焦点序列中，这可能会导致焦点顺序混乱。
避免使用 tabindex 修改 DOM 顺序。更改后的 Tab 键顺序不仅会造成糟糕的用户体验，还会让开发者难以管理和维护。
contenteditable 属性
我们之前讨论过 contenteditable 属性。为任何元素设置 contenteditable="true" 都会使其可编辑、可聚焦，并成为 Tab 顺序的一部分。焦点行为与设置 tabindex="0" 类似，但不完全相同。嵌套的 contenteditable 元素可聚焦但不可通过 Tab 键聚焦。如需使嵌套的 contenteditable 元素可使用 Tab 键选择，请添加 tabindex="0"，这会将其添加到顺序焦点导航顺序中。
为互动元素提供 autofocus
虽然布尔值 autofocus 是可以针对任何元素设置的全局属性，但它不会使惰性元素变为互动式元素。当网页加载时，具有 autofocus 属性的第一个可聚焦元素会获得焦点，前提是该元素已显示且未嵌套在
自动将焦点设置在内容上可能会造成混淆。在表单控件上设置 autofocus 意味着表单控件会在网页加载时滚动到视图中。您的所有用户（包括屏幕阅读器用户和使用小视口的用户）可能都“看不到”表单的说明，甚至可能会滚动到表单控件通常可见的标签之外。autofocus 属性不会改变文档的顺序焦点导航顺序。系统会跳过序列中位于自动聚焦元素之前的元素。出于上述原因，建议不要添加 autofocus 属性。
“请勿使用 autofocus”建议的例外情况是在
在关闭按钮
使互动元素处于非活动状态
此外，还有一些 HTML 属性可用于从 Tab 键顺序中移除互动元素。包括将负 tabindex 添加到可聚焦元素、将 disabled 属性添加到支持的表单控件，以及将全局 inert 属性添加到容器，这些操作都会使元素无法通过 Tab 键进行定位。这三个属性不可互换。
负 tabindex 值
具有负值的 tabindex 属性可使元素可聚焦，但不可通过 Tab 键聚焦。虽然向默认可聚焦的元素（包括链接、按钮、表单控件和 contenteditable 元素）添加 tabindex="0" 不是必需的，但添加具有负值的 tabindex 会从顺序焦点导航顺序中移除通常可使用 Tab 键聚焦的元素。
负 tabindex 值可防止键盘用户将焦点放在互动式元素上，但不会停用该元素。指针用户仍然可以聚焦于该元素。如需停用某个元素，请使用 disabled 属性。
已停用
布尔值 disabled 属性可使应用了该属性的表单控件及其后代（如有）无法聚焦。已停用的表单控件无法聚焦，不会接收点击事件，并且在提交表单时不会提交。
disabled 不是全局属性。它适用于