专注

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

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

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

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

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

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

使 inert 元素可交互

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

tabindex 属性

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

tabindex 属性的值是一个整数。负值可使元素可聚焦,但不能通过 Tab 键找到。答 0tabindex 值使元素可聚焦且可按 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 中所看到的, 制表符会按一个单独的顺序开始(按从低到高的顺序),然后再按常规顺序浏览这些标签 (未设置 tabindextabindex="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, 元素接口,例如 HTMLSelectElementHTMLTextareaElement 具有相同的只读属性。

disabled 属性不适用于通过 tabindexcontenteditable 设为可聚焦的正常 inert 元素。 它也不适用于 <form> 元素本身。如需停用这些属性,可以使用全局 inert 属性。

inert 属性

inert 全局布尔值属性添加到某个元素后,该元素和所有嵌套内容都会停用, 可点击,也无法按 Tab 键 - 并从无障碍功能树中移除。虽然 inert 可应用于任何元素,但通常 用于部分内容,例如屏幕外或以其他方式隐藏的内容。

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

对可见内容使用 inert 而不用表明其间歇性样式的样式会导致糟糕的用户体验。作为惯性内容 不适用于屏幕阅读器用户,如果视力正常的屏幕阅读器用户看到屏幕上的内容,可能会感到困惑 它们是无障碍工具所不具备的通过 CSS 明确确定惯性。

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

检查您的理解情况

检查您的理解情况

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

如果某个元素无法获得焦点,其描述是什么?

空白。
已隐藏。
休眠。

如果该元素具有 disabled 属性,则结果为 true?

系统不会显示。
如果是表单元素,则不会提交。
它将无法聚焦。