UD5工具箱
焦点陷阱（Focus Trap）
焦点陷阱是一种键盘导航管理技术，用于将用户的键盘焦点限制在页面上某个特定的区域内。当焦点陷阱被激活时，用户使用 Tab 键或 Shift+Tab 键无法将焦点移动到陷阱区域之外，焦点会在区域内的可聚焦元素之间循环。这种技术常用于模态框、对话框和弹出菜单等交互组件，目的是防止用户在组件打开时意外地将焦点导航到被遮罩层覆盖的背景内容上。焦点陷阱的正确实现对于屏幕阅读器用户和纯键盘导航用户尤为重要，因为焦点的意外移动会导致他们失去对当前交互上下文的理解。
键盘焦点（Keyboard Focus）
键盘焦点是指当前接收键盘输入的页面元素。在 Web 页面中，只有获得焦点的元素才能响应用户的键盘操作。焦点通常通过 Tab 键在可聚焦元素之间移动，也可以通过方向键在特定组件内移动。焦点的视觉指示通常表现为元素周围的轮廓线或边框高亮。键盘焦点的状态对于屏幕阅读器用户至关重要，因为屏幕阅读器会朗读当前获得焦点的元素内容和属性。焦点管理的合理性直接影响用户能否高效地使用键盘完成页面上的各种操作。
可聚焦元素（Focusable Element）
可聚焦元素是指能够通过键盘 Tab 键导航获得焦点的 HTML 元素。默认情况下，链接（a 标签）、按钮（button 标签）、输入框（input 标签）、选择框（select 标签）和文本区域（textarea 标签）等交互元素都是可聚焦的。开发者也可以通过设置 tabindex 属性使其他 HTML 元素变为可聚焦的。可聚焦元素的顺序由它们在 DOM 树中的顺序和 tabindex 值共同决定。在焦点陷阱的实现中，正确识别和管理所有可聚焦元素是确保焦点循环行为正确的基础。
Tab 键导航（Tab Navigation）
Tab 键导航是指用户通过按下键盘上的 Tab 键在页面的可聚焦元素之间移动焦点的交互方式。这是最基本的键盘导航模式，几乎所有使用键盘操作浏览器的用户都会依赖 Tab 键来浏览页面内容。Tab 键导航的顺序通常遵循 DOM 元素的排列顺序，但可以通过 tabindex 属性进行自定义。在模态框场景下，焦点陷阱会拦截 Tab 键事件，将焦点限制在模态框内部的可聚焦元素之间循环，防止焦点移动到模态框外部。
WCAG（Web Content Accessibility Guidelines）
WCAG 是由万维网联盟（W3C）制定的 Web 内容无障碍指南，是国际上最权威的 Web 无障碍标准。WCAG 2.1 定义了三个合规级别：A、AA 和 AAA，其中 AA 级别是大多数法律法规和行业标准要求的最低级别。WCAG 对键盘可访问性有明确的要求，包括所有功能必须可通过键盘访问（准则 2.1.1）、不能存在键盘陷阱（准则 2.1.2）以及焦点的可见性（准则 2.4.7）等。焦点陷阱的正确实现需要确保在限制焦点的同时，用户始终能够通过键盘操作关闭模态框或取消当前交互，这与 WCAG 2.1.2 准则直接相关。
焦点逃逸（Focus Escape）
焦点逃逸是指焦点从预期的焦点陷阱区域内移动到区域外部的行为。在焦点陷阱正常工作的情况下，焦点逃逸不应该发生。焦点逃逸可能由多种原因导致，包括陷阱区域的边界定义不准确、某些元素未被正确纳入陷阱范围、键盘事件处理逻辑存在缺陷，或者在特定的浏览器环境下行为不一致。焦点逃逸是无障碍测试中需要重点检测的问题之一，因为焦点的意外移动会导致用户感到困惑，尤其是对于依赖屏幕阅读器的用户。
焦点循环（Focus Cycling）
焦点循环是指在焦点陷阱内部，焦点在可聚焦元素之间按照固定顺序循环移动的行为。当焦点到达陷阱区域内的最后一个可聚焦元素时，按下 Tab 键会将焦点移回第一个可聚焦元素；反之，当焦点在第一个元素时按下 Shift+Tab，焦点会移到最后一个元素。焦点循环的正确实现是焦点陷阱功能的核心，需要确保循环过程中不遗漏任何可聚焦元素，同时保持焦点移动的顺序与视觉布局一致。
屏幕阅读器（Screen Reader）
屏幕阅读器是一种辅助技术软件，它将屏幕上的视觉内容转换为语音输出或盲文显示，帮助视障用户访问计算机和互联网内容。常见的屏幕阅读器包括 JAWS、NVDA、VoiceOver 和 TalkBack。屏幕阅读器严重依赖键盘焦点来确定当前应该朗读的页面内容。当焦点被意外移动到不应访问的区域时，屏幕阅读器会朗读无关或令人困惑的内容，严重影响用户的理解和操作效率。因此，焦点陷阱的正确实现对于屏幕阅读器用户体验至关重要。
遮罩层（Overlay / Backdrop）
遮罩层是模态框打开时覆盖在背景内容上方的半透明层，用于从视觉上突出模态框内容并阻止用户与背景内容交互。遮罩层通常通过 CSS 的 position: fixed 或 position: absolute 定位，覆盖整个视口区域。在无障碍设计中，遮罩层的样式和语义需要与焦点陷阱配合工作。如果遮罩层的 z-index 设置不当或 DOM 顺序不正确，可能会导致焦点陷阱的边界判断出现偏差，从而引发焦点逃逸问题。
tabindex 属性
tabindex 是一个 HTML 属性，用于控制元素的可聚焦性和 Tab 键导航顺序。tabindex 的值为正整数时，元素会按照 tabindex 值的升序获得焦点（而非 DOM 顺序）；值为 0 时，元素按照 DOM 顺序参与 Tab 导航；值为 -1 时，元素可以通过 JavaScript 的 focus() 方法获得焦点，但不参与 Tab 导航。在焦点陷阱的实现中，合理使用 tabindex 属性对于管理可聚焦元素的范围和顺序非常重要。过度使用正整数的 tabindex 值会导致导航顺序混乱，不利于无障碍体验。
焦点恢复（Focus Restoration）
焦点恢复是指模态框或弹出组件关闭后，将焦点重新移动到触发该组件的元素上的过程。正确的焦点恢复确保用户在关闭模态框后能够继续之前的操作，而无需重新寻找焦点位置。焦点恢复是焦点管理的重要组成部分，通常与焦点陷阱配合实现。如果焦点恢复失败，用户可能会发现焦点消失在页面的某个不可见位置，导致后续的键盘操作无法正常进行。在无障碍测试中，焦点恢复的验证是与焦点陷阱测试同等重要的检查项目。
键盘陷阱（Keyboard Trap）
键盘陷阱是指用户在使用键盘导航时，焦点被非预期地锁定在某个元素或区域内，无法通过标准键盘操作（如 Tab、Escape、方向键等）将焦点移出。键盘陷阱与焦点陷阱的区别在于，焦点陷阱是有意设计的交互模式，用户可以通过 Escape 键或关闭按钮退出；而键盘陷阱是实现缺陷，用户无法正常退出。WCAG 2.1.2 准则明确要求不能存在键盘陷阱。焦点陷阱测试工具帮助开发者区分这两种情况，确保焦点限制是有意且可退出的。