突出焦点

互动元素（包括表单控件、 链接和按钮）默认情况下是可聚焦和可使用 Tab 键切换的。 可使用 Tab 键切换的元素是文档的顺序焦点导航顺序的一部分。 其他元素是 inert 的，这意味着它们不是互动式的。借助 HTML 属性，可以将互动元素设为 inert，也可以将 inert 元素设为互动式。

默认情况下，导航焦点顺序与视觉顺序（即源代码顺序）相同。有一些 HTML 属性可以更改此顺序，还有一些 CSS 属性可以更改内容的视觉顺序。使用 HTML 更改 Tab 键切换顺序或使用 CSS 更改视觉呈现顺序可能会损害用户体验。

请勿使用 CSS 和 HTML 更改感知到的和实际的 Tab 键切换顺序。如以下两个示例所示，与视觉预期顺序不同的 Tab 键切换顺序会让用户感到困惑，并会降低用户体验。

在以下示例中， tabindex 属性的值导致 Tab 键切换顺序混乱：

在此示例中，CSS 在内容的 Tab 键切换顺序和视觉顺序之间创建了差异：

flex-flow: row-reverse; 声明反转了视觉顺序。此外，CSS order 属性应用于第六个字“This”，这在视觉上移动了该字。Tab 键切换顺序是代码的顺序，不再与视觉顺序匹配。 这会给键盘用户带来不便。

某些 CSS 功能（包括 flexbox、 网格、 定位、 转换 和 多列） 可以更改内容的视觉顺序。您可以使用键盘测试内容 ：使用 shift + tab 在内容中向后移动 。使用 CSS 指示哪个元素具有焦点。请勿使用 CSS 重新排序可聚焦元素。

请务必在所有视口尺寸上保持逻辑 Tab 键切换顺序。

将 inert 元素设为互动式

contenteditable 和 tabindex 属性是全局属性，可以添加到任何元素，使其在过程中可聚焦。可聚焦元素 也可以通过鼠标或指针聚焦，方法是设置 autofocus 属性，或通过脚本（例如使用 element.focus()）聚焦。

tabindex 属性

属性中引入的全局 tabindex 属性可让原本无法接收焦点的元素获得焦点，通常使用 Tab 键，因此得名。

tabindex 属性将整数作为其值。负值会使元素可聚焦但不可使用 Tab 键切换。tabindex 值为 0 会使元素可聚焦且可使用 Tab 键切换，并按源代码顺序将应用该值的元素添加到顺序焦点导航顺序中。值为 1 或更大值会使元素可聚焦且可使用 Tab 键切换，但会将其添加到优先 Tab 键切换顺序中，应避免使用。

在此页面上，分享按钮 <share-action> 是一个 自定义元素。tabindex="0" 会将此 元素添加到键盘默认 Tab 键切换顺序中：

<share-action authors="@front-end.social/@estellevw" data-action="click"
  data-category="web.dev" data-icon="share" data-label="share, mastodon"
  role="button" tabindex="0">
  <svg aria-label="share" role="img" xmlns="http://www.w3.org/2000/svg">
    <use href="#shareIcon" />
  </svg>
  <span>Share</span>
</share-action>

此外，本地导航 有一个具有负 tabindex 值的自定义元素：

<web-navigation-drawer type="standard" tabindex="-1">

具有负值的 tabindex 属性会使元素可聚焦，但不可使用 Tab 键切换。该元素可以接收焦点，例如使用 HTMLElement.focus(), 但它不是顺序焦点导航顺序的一部分。对于 不可使用 Tab 键切换的可聚焦元素，惯例是使用 tabindex="-1"。如果您向互动元素添加 tabindex="-1"，它将不再可使用 Tab 键切换。

The element.focus() 方法可用于将焦点设置到可聚焦元素。浏览器会将聚焦元素滚动到视图中。因此，请避免使用 element.focus({preventScroll:true})，因为聚焦于不可见元素会带来糟糕的用户体验。

如果您想查询文档以了解哪个元素具有焦点，请使用 只读 Document.activeElement 属性。

具有 tabindex 为 1 或更大的元素包含在单独的 Tab 键切换顺序中。如以下 Codepen 所示，Tab 键切换从单独的顺序开始，按从最低值到最高值的顺序进行，然后再按源代码顺序遍历常规顺序中的元素（未设置 tabindex 或 tabindex="0"）中的元素：

具有正值的 tabindex 会将元素置于优先焦点顺序中，这可能会导致焦点顺序混乱。请避免使用 修改 DOM 顺序 tabindex。更改后的 Tab 键切换顺序可能会带来糟糕的用户体验，并且难以维护。

contenteditable 属性

contenteditable 属性前面讨论过 。在任何元素上设置 contenteditable="true" 都会使其 可编辑、可聚焦，并成为 Tab 键切换顺序的一部分。焦点行为类似于 设置 tabindex="0"，但并不相同。嵌套的 contenteditable 元素可聚焦但不可使用 Tab 键切换。如需使嵌套的 contenteditable 元素可使用 Tab 键切换， 请添加 tabindex="0"，这会将其添加到顺序焦点导航顺序中。

为互动元素提供 autofocus

虽然布尔值 autofocus 是一个全局属性，可以设置在任何元素上，但它不会使 inert 元素成为互动式。当页面加载时，第一个具有 autofocus属性的可聚焦元素会接收焦点，前提是该元素已显示且 未嵌套在<dialog>中。

自动将焦点设置到内容可能会让用户感到困惑。当您在表单控件上设置 autofocus 时，该表单控件会在页面加载时滚动到视图中。 您的用户（包括屏幕阅读器用户和使用小视口的用户）可能会错过表单的说明，甚至错过表单控件的标签。此外，autofocus 属性不会更改文档的顺序焦点导航顺序。系统会跳过顺序中自动聚焦元素之前的元素。出于这些原因，您应避免使用 autofocus 属性。

“请勿使用 autofocus”建议的例外情况是在 autofocus 属性中添加 <dialog> 元素。当对话框打开时， 浏览器会自动聚焦于第一个可聚焦互动元素 中的 <dialog>，这意味着无需向autofocus元素添加 。如果您想确保对话框打开时对话框中的特定互动元素接收焦点，请向该元素添加 autofocus 属性。

<dialog open>
  <form method="dialog">
    <button type="submit" autofocus>close</button>
  </form>
</dialog>

在关闭 <button> 上设置的 autofocus 属性允许其在对话框打开时接收焦点 。作为对话框中的第一个元素，它无论如何都会接收焦点。默认情况下，当对话框打开时，对话框中的第一个可聚焦元素会接收焦点，除非对话框中的其他元素设置了 autofocus 属性。

将互动元素设为 inert

还有一些 HTML 属性可以从 Tab 键切换顺序中移除互动元素。向可聚焦元素添加负 tabindex、向支持的表单控件添加 disabled 属性，以及向容器添加全局 inert 属性，都会使元素不可使用 Tab 键切换。这三个属性完全独立，不可互换。

负 tabindex 值

具有负值的 tabindex 属性会使元素可聚焦，但不可使用 Tab 键切换。虽然无需向默认情况下可聚焦的元素（ 包括链接、按钮、表单控件和 contenteditable 元素）添加 tabindex="0"；但添加具有负值的 tabindex 会从顺序焦点导航顺序中移除通常 可使用 Tab 键切换的元素。

负 tabindex 值会阻止键盘用户聚焦于互动元素，但不会停用该元素。指针用户仍然可以聚焦于该元素。如需停用元素，请使用 disabled 属性。

已停用

布尔值 disabled 属性会使应用该属性的表单控件及其后代 （如果有）不可聚焦。已停用的表单控件无法聚焦，不会接收点击事件，也不会在提交表单时提交。

disabled 不是全局属性。它适用于 <button>、<input>、 <optgroup>、<option>、<select>、<textarea>、与表单关联的自定义 元素和 <fieldset>。 在 <optgroup> 或 <fieldset> 上设置时，所有子表单控件都会被 停用，但 <fieldset> 的第一个 <legend> 的内容除外。

支持 disabled 的相同元素也可以使用 :disabled 和 :enabled 伪类进行定位。使用 disabled 属性停用的元素通常使用用户代理样式表设置为浅灰色，即使设置了 accent-color 也是如此。

由于它是布尔值属性，因此该属性的存在会停用原本已启用的元素；您无法将其设置为 false。如需重新启用已停用的元素， 必须移除该属性，通常使用 Element.removeAttribute('disabled')。

HTMLInputElement.disabled 属性可让您检查输入是否已停用。由于 disabled 不是全局 属性，因此它不会从 HTMLElement 继承，但每个支持的 元素接口（如 HTMLSelectElement、 HTMLTextareaElement）都具有相同的只读属性。

disabled 属性不适用于通常使用 tabindex 或 contenteditable 设置为可聚焦的 inert 元素，也不适用于 <form> 元素。如需停用这些元素，可以使用全局 inert 属性。

inert 属性

当 inert 全局布尔值属性添加到元素时，该元素和所有嵌套内容都会被停用，这意味着它们无法被点击或使用 Tab 键切换。它们也会从无障碍树中移除。虽然 inert 可以应用于任何元素，但它通常用于内容部分，例如屏幕外或以其他方式隐藏的内容。

将 disabled 应用于表单控件时，浏览器会提供默认样式 并且可以使用 :disabled 伪类设置样式。inert 属性不提供视觉指示器，也没有 匹配的伪类（不过 [inert] 属性选择器 匹配）。

在可见内容上使用 inert 而不使用指示 inertness 的样式可能会导致糟糕的用户体验。由于屏幕阅读器用户无法使用 inert 内容，因此当视力正常的屏幕阅读器用户在屏幕上看到无障碍工具无法使用的内容时，可能会感到困惑。请使用 CSS 使 inertness 非常明显。

确保焦点永远不会移至不可见内容。任何在屏幕外呈现的内容，如果聚焦时不会自动进入视图，都应设为 inert。如果内容是隐藏的 ，但在聚焦时会进入视图（例如 “跳至内容”链接）， 则无需将其设为 inert。

检查掌握情况

测试您对焦点的了解程度。