聚焦管理和惰性-css教學-PHP中文網

首頁

web前端

css教學

聚焦管理和惰性

Joseph Gordon-Levitt

Apr 02, 2025 am 04:00 AM

Focus management and inert

許多輔助技術都使用鍵盤導航來理解和操作屏幕內容。一種導航方式是通過Tab鍵。如果您使用它在表單上快速跳轉到各個輸入項而無需使用鼠標或觸控板，那麼您可能已經熟悉這種導航方式了。

Tab鍵會按照它們在DOM中出現的順序跳轉到交互式元素。這就是為什麼源代碼的順序必須與設計的視覺層次結構相匹配如此重要的原因之一。

可進行Tab鍵操作的交互式元素列表：

錨點（當存在href屬性時），
<button></button> ，
<input>和<textarea></textarea>（带有相应的标签），
<select></select>，
<details></details>和，
<audio></audio>和<video></video>（当存在控件时），
<object></object>（取决于其使用方法），
Firefox中任何具有滚动溢出的元素，
任何应用了contenteditable属性的元素，以及
任何应用了tabindex属性的元素（稍后将详细介绍此属性）。

交互式元素获得焦点的情况：

通过Tab键导航到它，
点击它，
或者通过JavaScript中的element.focus()以编程方式设置焦点。

焦点类似于将鼠标光标悬停在元素上，因为它标识了您想要激活的内容。这也是为什么视觉上明显的焦点样式如此重要的原因。

焦点管理

焦点管理是协调哪些元素可以接收和不能接收焦点事件的做法。这是前端开发中比较棘手的事情之一，但对于使网站和Web应用程序更易访问至关重要。

良好的焦点管理实践

99%的情况下，您都想保留焦点顺序。 我再怎么强调这一点也不为过。

如果您使用<button></button>元素作为按钮，使用<a></a>元素作为链接，使用<input>元素作为用户输入等等，那么焦点将无需任何额外努力就能正常工作。

在极少数情况下，您可能希望将焦点应用于焦点顺序之外的内容，或者使通常无法接收焦点事件的内容可聚焦。以下是一些关于如何在易于访问且直观的导航方式中进行操作的指导原则：

✅ 操作：了解tabindex属性

tabindex允许元素获得焦点。它接受一个整数作为值。它的行为取决于使用的整数。

❌ 不要：将tabindex="0"应用于不需要它的内容

可以接收键盘焦点的交互式元素（例如<button></button>元素）不需要应用tabindex属性。

此外，您不需要在非交互式元素上声明tabindex来确保辅助技术可以读取它们（事实上，如果不存在角色和可访问名称，则这是一个WCAG失败）。这样做实际上会为使用辅助技术的人创建一个意外且难以导航的体验——他们有其他预期的方式来阅读此内容。

✅ 操作：使用tabindex="-1"进行JavaScript聚焦

tabindex="-1"用于使用JavaScript创建可访问的交互式窗口小部件。

声明tabindex="-1"将使元素可以通过JavaScript或点击/点击获得焦点。但是，它不会允许通过Tab键导航到它。

❌ 不要：使用正整数作为tabindex值

这是一个严重的反模式。使用正整数将覆盖预期的Tab键顺序，并为尝试导航内容的人创建一个混乱和令人迷失方向的体验。

一个这样的实例已经够糟糕了。多个声明简直就是一场噩梦。说真的：不要这样做。

❌ 不要：创建手动焦点顺序

交互式元素仅仅因为被使用就可以被Tab键操作。您不需要在每个交互式元素上设置一系列具有递增值的tabindex属性，以按照您认为用户应该使用的顺序进行设置。您将让DOM中元素的顺序为您完成此操作。

焦点捕获

有时您可能需要阻止某些内容获得焦点。一个很好的例子是焦点捕获，它是有条件地将焦点事件限制到元素及其子元素的行为。

焦点捕获不要与键盘陷阱（有时称为焦点陷阱）混淆。键盘陷阱是指通过键盘导航的人由于编写不良的逻辑而无法从窗口小部件或组件中逃脱的情况。

您将使用焦点捕获的实际示例是模态框：

为什么这很重要？

将焦点保持在模态框内传达了它的边界，并有助于告知什么是模态内容，什么不是模态内容——这类似于视力正常的人如何看到模态框“浮动”在其他网站或Web应用程序内容之上。如果以下情况，则此信息非常重要：

您视力低下或没有视力，并依赖屏幕阅读器公告来帮助传达交互模式的转变。
您视力低下并且使用了放大显示器，在模态框边界之外聚焦可能会令人困惑和迷失方向。
您仅通过键盘导航，否则可能会从模态框中跳出，并在尝试返回模态框时迷失在底层页面或视图中。

如何操作？

可靠地管理焦点是一件复杂的事情。您需要使用JavaScript来：

确定当前页面或视图上所有可聚焦元素的容器元素。
识别被捕获内容的边界，包括第一个和最后一个可聚焦项目。
删除被识别为可聚焦但不在该被捕获内容集内的任何内容的交互性和可发现性。
将焦点移动到被捕获的内容中。
侦听表示关闭被捕获内容的事件（保存、取消、关闭/按下Esc键等）。
当相关事件触发时，关闭被捕获的内容区域。
恢复先前删除的交互性。
将焦点移回触发被捕获内容的交互式元素。

为什么我们要这样做？

我不会撒谎：所有这些都很棘手且耗时。但是，焦点管理和合理、可用的焦点顺序是Web内容无障碍指南。它非常重要，以至于它被认为是关于可用性的国际、具有法律约束力的标准的一部分。

可Tab键操作和可发现性

删除可发现性和交互性都有一些技巧。

屏幕阅读器有一种交互模式，允许它们通过虚拟光标浏览页面或视图。虚拟光标还允许使用屏幕阅读器的人发现页面的非交互式部分（标题、列表等）。与使用Tab键和焦点样式不同，虚拟光标仅适用于使用屏幕阅读器的人。

当您管理焦点时，您可能希望限制虚拟光标发现内容的能力。对于我们的模态框示例，这意味着防止用户在阅读模态框时意外“跳出”模态框的边界。

可发现性可以通过明智地应用aria-hidden="true"来抑制。但是，交互性则更为细致。

使用inert 属性

inert属性是一个全局HTML属性，它将使删除然后恢复交互式元素的可发现性和可聚焦能力变得容易得多。以下是如何使用它的示例：

 <div aria-labelledby="modal-title" role="dialog" tabindex="-1"> <div role="document"> <h2 id="Save-changes">Save changes?</h2> <p>The changes you have made will be lost if you do not save them.</p>
<p> Save Discard </p>
</div> </div> <main inert=""> </main>

由于其许多辅助技术支持问题，我故意避免在模态框中使用<dialog></dialog>元素。

在保存确认模态框后，在<main></main>元素上声明了inert。这意味着<main></main>内包含的所有内容都不能接收焦点或被点击。

焦点仅限于模态框内。当模态框被关闭时，可以从<main></main>元素中删除inert。这种处理焦点捕获的方式比现有技术要容易得多。

记住： 关闭事件可能是由我们模态框示例中的两个按钮引起的，也可能是通过按下键盘上的Esc键引起的。有些模态框还允许您点击模态框区域之外来关闭。

inert 的支持

最新版本的Edge、Chrome和Opera在启用实验性Web平台功能时都支持inert。Firefox的支持也很快就会到来！唯一例外的是台式机和移动版的Safari。

我很想看到Apple实现对inert的原生支持。虽然可以使用polyfill，但它对所有主要的屏幕阅读器都有非微不足道的支持问题。不太好！

此外，我想提请注意inert polyfill项目自述文件中的以下说明：

与原生的inert实现相比，polyfill在性能方面将非常昂贵，因为它需要大量的树遍历。

树遍历意味着polyfill中的JavaScript可能需要大量的计算能力才能工作，因此会减慢最终用户的体验。对于低功耗设备（例如预算型Android智能手机、旧款笔记本电脑）和执行计算密集型任务（例如运行多个Electron应用程序）的更强大的设备，这可能意味着会发生冻结或崩溃。原生浏览器支持意味着这种行为对设备的负担要小得多，因为它可以访问JavaScript无法访问的浏览器部分。