如何正确管理浮层提示（Tooltip）显示时的页面焦点顺序

wang3zc2026-05-09 9:45

本文介绍在 dom 根节点动态渲染 tooltip 时，如何保持语义化、可访问的焦点流：通过监听触发器失焦、主动查找并跳转至下一个逻辑焦点元素，确保键盘用户导航不跳过中间内容。本文介绍在 dom 根节点动态渲染 tooltip 时，如何保持语义化、可访问的焦点流：通过监听触发器失焦、主动查找并跳转至下一个逻辑焦点元素，确保键盘用户导航不跳过中间内容。在构建自定义 Tooltip/Popover 组件时，一个常见但易被忽视的可访问性挑战是：当 Tooltip 被挂载到 <body> 或 React Root 节点（而非触发器的 DOM 邻近位置）时，其内部可聚焦元素（如 Close 按钮、操作按钮）会脱离原始视觉与逻辑层级，导致 Tab 键导航出现"跳跃"------例如从触发按钮直接跳到页面末尾的某个链接，中间所有内容被绕过。这不仅违反 WCAG 2.4.3（Focus Order）原则，也破坏了屏幕阅读器用户的线性浏览体验。单纯在 Tooltip 显示时 .focus() 到首个按钮（如 closeBtn.focus()）仅解决了"进入 Tooltip"的问题，却未解决"退出 Tooltip 后该聚焦何处"的关键环节。? 正确解法：动态恢复焦点链核心思路是将 Tooltip 视为触发器的逻辑延伸，而非孤立模态层。因此，当用户离开 Tooltip（例如按 Tab 离开最后一个按钮，或点击关闭），焦点不应"坠入文档末尾"，而应回归到视觉上紧邻触发器之后的下一个可聚焦元素------即原本 Tab 顺序中触发器之后的那个节点。实现分三步：灵办AI 免费一键快速抠图，支持下载高清图片