UD5工具箱
以下问题涵盖了无障碍模态对话框开发中最常见的疑问，优先基于页面FAQ内容扩展。
什么是焦点陷阱（Focus Trap），为什么模态框需要它？
焦点陷阱是一种无障碍技术，确保键盘焦点在模态对话框打开时被限制在对话框内部循环。当用户按Tab键时，焦点在对话框内的可聚焦元素之间移动，不会跑到背景页面。这对使用键盘导航的用户至关重要。WCAG 2.1成功标准2.4.3（焦点顺序）和2.1.2（无键盘陷阱）都与此相关。如果没有焦点陷阱，键盘用户可能会意外操作背景内容，导致数据丢失或导航混乱。
aria-modal属性和dialog角色的作用是什么？
dialog角色告诉屏幕阅读器这是一个对话框，需要用户的响应。屏幕阅读器会将此元素宣布为对话框，并提示用户可以与之交互。aria-modal属性则明确告知辅助技术此对话框是模态的，背景内容不可交互。这两个属性配合使用，确保视障用户能够正确理解页面结构和交互状态。
ESC键关闭和点击遮罩关闭是必需的吗？
ESC键关闭是强烈推荐的最佳实践，为键盘用户提供直观的退出方式。点击遮罩关闭提供了直观的鼠标/触控退出方式，也是常见交互模式。但对于包含重要表单的模态框，建议保留ESC关闭但禁用点击遮罩关闭，防止用户误操作丢失表单数据。两种功能都可以在本工具中独立配置。
焦点恢复（Focus Restoration）是什么意思？
当模态框关闭时，键盘焦点应返回到打开模态框之前所在的元素。这是WCAG 2.1成功标准2.4.3的一部分。如果没有焦点恢复，关闭弹窗后焦点可能丢失在页面某个不可见位置，导致键盘用户无法继续操作。本工具生成的代码自动实现焦点恢复功能。
如何在React或Vue项目中集成焦点陷阱？
对于React项目，可以使用react-focus-lock或Radix UI的dialog库，它们提供了声明式的焦点陷阱组件。Vue项目可使用vue-focus-lock或Vuetify的dialog组件。核心原理都是获取容器内所有可聚焦元素，在Tab和Shift+Tab时循环首尾。如果需要完全自定义实现，本工具生成的原生JavaScript代码也可以作为参考实现。
移动端和触屏设备上焦点陷阱还有意义吗？
是的！许多移动端用户会连接蓝牙键盘使用手机或平板，而且屏幕阅读器用户（如iOS的VoiceOver、Android的TalkBack）在移动端也完全依赖焦点导航。因此，移动端的无障碍实现同样重要，焦点陷阱在触屏设备上也能提升整体用户体验。
什么是可聚焦元素？
可聚焦元素包括：a标签（带href属性）、button（未禁用）、input（大部分类型）、textarea、select、以及带有tabindex属性（值非-1）的元素。这些元素可以通过Tab键导航到，并且可以接收键盘事件。本工具在实现焦点陷阱时，会自动收集对话框内所有可聚焦元素进行循环管理。
这个工具生成的代码可以直接用于生产环境吗？
可以。生成的代码遵循WCAG 2.1 AA标准，包含完整的ARIA属性、焦点陷阱逻辑、ESC/遮罩关闭、焦点恢复等功能。代码使用原生HTML/CSS/JavaScript，无任何外部依赖，结构清晰易于维护。唯一需要注意的是CSS样式可能与您项目中已有的样式框架产生冲突，建议根据实际情况调整。
如何测试模态框的无障碍性？
推荐使用以下方法测试：1）仅使用键盘操作（Tab、Shift+Tab、Enter、Escape）完成所有交互；2）使用NVDA（Windows免费）或VoiceOver（macOS内置）等屏幕阅读器测试；3）使用axe DevTools或WAVE等自动化工具检查；4）邀请有障碍的用户进行真实场景测试。本工具生成的代码已经过这些测试方法的验证。
模态框打开时背景内容应该如何处理？
当模态框打开时，背景内容应该：1）通过aria-hidden属性对屏幕阅读器隐藏；2）通过inert属性或焦点陷阱阻止键盘导航；3）通过遮罩层视觉上模糊或变暗；4）通过pointer-events属性阻止鼠标交互（可选）。本工具自动生成遮罩层和焦点陷阱，确保背景内容被正确屏蔽。