互动元素（包括表单控件、链接和按钮） 默认可聚焦和可分页。可分页元素是文档连续焦点导航顺序的一部分。其他元素 是休眠的，这意味着它们不具备交互能力。通过 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 明确确定惯性。
确保焦点绝不会移动到不可见的内容。系统不会自动在屏幕外呈现的任何内容 画面中的画面，应该让焦点变得惯常。如果内容被隐藏 但在获得焦点时（例如此页面上的“跳至内容”链接）出现的次数 也不需要变为休眠状态
检查您的理解情况
检查您的理解情况
测试您对专注力的掌握情况。
如果某个元素无法获得焦点，其描述是什么？
如果该元素具有 disabled 属性，则结果为 true？