Web Accessibility Academy · 课时

图层关闭时恢复焦点

将用户带回他们离开的位置。

第 3 / 4 课13 个步骤

图层关闭时恢复焦点 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 3 节课,共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分,你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。

层会借用焦点

当模态框、菜单或抽屉打开时,焦点会移入其中。关闭后,您需要负责将焦点还原到用户之前所在的位置。

焦点丢失问题

如果关闭的层让焦点停留在已移除的元素上,焦点就会退回页面主体。用户会在没有位置感的情况下失去方向。

记住触发控件

修复工作要从打开层之前开始:保存触发该层的元素的引用,通常是 document.activeElement。

const trigger = document.activeElement;

关闭时还原

层关闭时,对保存的触发控件调用 focus(),这样用户就能回到刚才开始操作的位置。

trigger.focus();

完整的往返过程

打开:保存触发控件并将焦点移入层。关闭:隐藏层并还原触发控件。这一循环就是任何可关闭层的焦点约定。🔁

原生 dialog 会提供帮助

浏览器的 dialog 元素会在调用 close() 时自动将焦点还原到打开它的元素,从而省去手动记录。

myDialog.close();

处理每一种退出路径

无论层以何种方式关闭,都要还原焦点:关闭按钮、Escape 键或点击背景都应让用户回到原来的位置。

触发控件已不存在时

如果层打开期间触发控件被移除了,请将焦点移到合理的附近元素,绝不要让它无处可去。

为什么这非常重要

视力正常且使用鼠标的用户几乎不会注意到,但对于键盘用户和屏幕阅读器用户来说,未能还原焦点可能会让功能无法使用。

仅使用键盘进行测试

使用 Enter 打开层,使用 Escape 关闭层,并确认焦点指示环重新出现在打开它的按钮上。

养成习惯

将焦点还原视为构建任何覆盖层的一部分,而不是事后才考虑的事项。添加打开和关闭逻辑时,就同时接入它。

快速检查

一个自定义模态框关闭后,焦点的正确目标是什么?

回顾

现在您可以完成整个闭环:打开时保存触发控件,在每条关闭路径中将焦点还原到它,并尽可能使用原生 dialog。🎯

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码,获得全天候 AI 导师的即时帮助,并在网页或应用中继续学习。

课程
30
课程
120

常见问题解答

「图层关闭时恢复焦点」课时是免费的吗?

是的 — 「图层关闭时恢复焦点」的完整文本可在网页上免费阅读。要进行交互式练习(内置代码编辑器和全天候 AI 导师)并解锁 Web Accessibility Academy 课程的其余内容,请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。

「图层关闭时恢复焦点」这节课中我会学到什么?

将用户带回他们离开的位置。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy,全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Web Accessibility Academy 需要有经验吗?

无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者,你可以从这里开始或从头开始,按照自己的节奏学习。 这是第 3 节课,共 4 节。

「图层关闭时恢复焦点」课时需要多长时间?

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动,所以你能稳步进步,并在网页和应用中从离开的地方继续。

我能在这节 Web Accessibility Academy 课中编写并运行代码吗?

能。每节 Web Accessibility Academy 课都包含内置代码编辑器,你可以在浏览器中直接编写并运行真实代码,并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

  1. tabindex 0、-1,以及永不使用正值
  2. 操作后移动焦点
  3. 图层关闭时恢复焦点
  4. 管理组件中的 roving tabindex
← 返回 Web Accessibility Academy