专注

互动元素（包括表单控件、链接和按钮） 默认可聚焦和可分页。可分页元素是文档连续焦点导航顺序的一部分。其他元素 是休眠的，这意味着它们不具备交互能力。通过 HTML 属性，可以使互动元素变为非活动状态，并 使 inert 元素具有互动性。

默认情况下，导航焦点顺序与视觉顺序相同，也就是源代码顺序。其中包含 HTML 属性和可以改变内容视觉顺序的 CSS 属性。更改标签页

请勿使用 CSS 和 HTML 改变用户感知到的和实际的 Tab 键顺序。如以下两个示例所示，标签页顺序 与视觉预期顺序不同的广告会让用户感到困惑，并且会损害用户体验。

在此示例中，tabindex 属性的值 使标签页顺序变得混乱：

在此示例中，CSS 创建了不同的 Tab 键顺序和内容的视觉顺序：

flex-flow: row-reverse; 声明反转了视觉顺序。 此外，CSS order 属性应用于第六个字词“This”，这从视觉上移动了 一个字词。Tab 键序列是代码的顺序，不再与直观顺序一致，因此会造成断开连接 适合键盘用户使用。

使 inert 元素可交互

contenteditable 和 tabindex 属性属于全局属性，可添加到任何元素中，使其可聚焦 。您还可以使用鼠标或指针对可聚焦元素进行聚焦，具体方法为：设置 autofocus 属性集或脚本使用，例如使用 element.focus()。

tabindex 属性

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

tabindex 属性的值是一个整数。负值可使元素可聚焦，但不能通过 Tab 键找到。答 0 的 tabindex 值使元素可聚焦且可按 Tab 键，同时将此元素应用到序列中的元素 源代码顺序中的焦点导航顺序。不小于 1 的值会使元素可聚焦且可点按； 而是将其添加到优先 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()，但它不属于 顺序的焦点导航顺序。不分页且可聚焦的元素惯例是使用 tabindex="-1"。请注意， 如果您向互动元素添加 tabindex="-1"，该元素将不再可按 Tab 键。

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

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

tabindex 不低于 1 的元素会包含在单独的制表符序列中。正如您在 Codepen 中所看到的， 制表符会按一个单独的顺序开始（按从低到高的顺序），然后再按常规顺序浏览这些标签 （未设置 tabindex 或 tabindex="0"），按源代码顺序排列：

若为正值，tabindex 会将相应元素置于优先对焦序列中，这可能会导致焦点顺序混乱。 避免使用 tabindex 修改 DOM 顺序。改变 Tab 键顺序不仅会造成不良用户 但对开发者来说很难管理和维护。

contenteditable 属性

我们之前讨论过 contenteditable 属性。在任何元素上设置 contenteditable="true" 均可使其可修改， 以及部分 Tab 键顺序。焦点行为与设置 tabindex="0" 类似，但并不相同。嵌套 contenteditable 元素可聚焦，但无法使用 Tab 键。如需使嵌套的 contenteditable 元素支持 Tab 键，请添加 tabindex="0"， 这会将其添加到有序的焦点导航顺序中。

将焦点置于互动元素上

autofocus 属性

布尔值 autofocus 是一个全局属性 可对任何元素进行设置，但它不会使 inert 元素可交互。网页加载时，第一个可聚焦元素 具有 autofocus 属性集的属性将获得焦点，前提是该元素已显示且未嵌套在 <dialog> 中。

自动将焦点设置在内容上可能会造成混淆。在表单控件上设置 autofocus 意味着表单控件 在网页加载时便会滚动到用户视野范围内所有用户（包括屏幕阅读器用户和使用较小视口的用户） “看”表单的说明，甚至可能滚动到表单控件通常可见的标签以外。autofocus 属性不改变文档的焦点导航顺序。序列中位于 只是跳过自动聚焦元素。因此，不建议添加 autofocus 属性。

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

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

为关闭 <button> 设置的 autofocus 属性可确保对话框打开时获得焦点。作为第一个元素 那么它在任何情况下都会获得焦点。默认情况下，当某个对话框打开时，该对话框内的第一个可聚焦元素 除非对话框中的其他元素设置了 autofocus 属性，否则对话框将获得焦点。

使互动元素变为休眠状态

还有一些 HTML 属性可以从制表符序列中移除互动元素。包含否定tabindex 为可聚焦元素添加 disabled 属性，以及添加全局 inert 属性 都会使元素无法标签页化。这三个属性不可互换。

tabindex的负值

如前所述，值为负的 tabindex 属性会使元素可聚焦，但无法通过 Tab 键来实现。添加时 tabindex="0" 设置为默认可聚焦的元素，包括链接、按钮、表单控件以及设置为 contenteditable 的元素 不需要；包含具有负值的 tabindex 会从顺序焦点中移除通常可以按 Tab 键的元素 导航顺序。

tabindex 为负值可阻止键盘用户关注交互式元素，但不会停用该元素。Pointer 用户仍然可以专注于该元素如需停用某个元素，请使用 disabled 属性。

已停用

布尔值 disabled 属性可让表单控件开启 及其后代（如果有）不可聚焦。已停用的表单控件无法聚焦、无法获取点击事件， 并且不会在表单提交时提交。请注意，disabled 不是全局属性。它适用于 <button>、<input>、 <optgroup>、<option>、<select>、<textarea>、与表单关联的自定义元素，以及 <fieldset>。 在 <optgroup> 或 <fieldset> 上设置后，除了 <fieldset> 的第一个 <legend> 的内容外，所有子表单控件都将停用。

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

由于该属性是布尔值，因此只要存在该属性，即可停用原本已启用的元素；不能将其设置为 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 而不用表明其间歇性样式的样式会导致糟糕的用户体验。作为惯性内容 不适用于屏幕阅读器用户，如果视力正常的屏幕阅读器用户看到屏幕上的内容，可能会感到困惑 它们是无障碍工具所不具备的通过 CSS 明确确定惯性。

确保焦点绝不会移动到不可见的内容。系统不会自动在屏幕外呈现的任何内容 画面中的画面，应该让焦点变得惯常。如果内容被隐藏 但在获得焦点时（例如此页面上的“跳至内容”链接）出现的次数 也不需要变为休眠状态

检查您的理解情况

检查您的理解情况

测试您对专注力的掌握情况。