无需登录 数据私有 本地保存

无障碍模态对话框生成器 - 焦点陷阱与关闭

8
0
0
0

♿ 无障碍模态对话框生成器

符合 WCAG 2.1 标准 · 焦点陷阱 · 键盘导航 · ARIA 属性 · 一键生成代码

配置面板
显示关闭按钮 (×)
允许 ESC 键关闭
允许点击遮罩关闭
入场动画

打开后使用 Tab 和 Shift+Tab 测试焦点陷阱

📄 模拟页面背景

首页链接 搜索框... 设置 普通文本 帮助中心

点击上方 "打开演示模态框" 按钮查看效果

焦点: 未激活

📚 常见问题与知识点

焦点陷阱是一种无障碍技术，确保键盘焦点在模态对话框打开时被限制在对话框内部循环。当用户按Tab键时，焦点在对话框内的可聚焦元素之间移动，不会跑到背景页面。这对使用键盘导航的用户（包括视障用户、运动障碍用户）至关重要。WCAG 2.1 成功标准 2.4.3（焦点顺序）和 2.1.2（无键盘陷阱）都与此相关。
role="dialog" 告诉屏幕阅读器这是一个对话框，需要用户的响应。aria-modal="true" 则明确告知辅助技术：此对话框是模态的，背景内容不可交互。屏幕阅读器（如NVDA、VoiceOver）会据此限制虚拟光标的浏览范围，防止用户意外导航到背景内容。这两个属性配合使用，为屏幕阅读器用户提供了与视觉用户同等的体验。
ESC键关闭是强烈推荐的最佳实践，几乎所有桌面用户都期望此行为。它符合WCAG的"可预测性"原则。点击遮罩（背景半透明层）关闭则提供了直观的鼠标/触控退出方式。但对于包含重要表单的模态框（如支付确认），建议保留ESC关闭但禁用点击遮罩关闭，以防止用户误操作丢失已填写的数据。本工具让您自由配置这些选项。
当模态框关闭时，键盘焦点应返回到打开模态框之前所在的元素（通常是触发按钮）。这样用户可以从之前的位置继续浏览，而不会迷失。这是WCAG 2.1成功标准2.4.3的一部分。本工具的焦点陷阱实现会在打开时自动保存触发元素引用，关闭时精确恢复。
您可以直接使用本工具生成的JavaScript代码（纯原生，无框架依赖）。对于React项目，也可以使用 react-focus-lock 或 @radix-ui/react-dialog；Vue项目可使用 vue-focus-lock。但理解底层原理非常重要——核心就是获取容器内所有可聚焦元素，在Tab/Shift+Tab时循环首尾。生成的代码区域提供了完整的原生实现，您可以查看学习。
是的！许多移动端用户会连接蓝牙键盘（iPad用户尤其常见），而且屏幕阅读器用户在移动端也依赖焦点导航（如VoiceOver的滑动浏览）。此外，Android的TalkBack和iOS的VoiceOver都会尊重焦点陷阱。良好的无障碍设计覆盖所有设备和输入方式。
可聚焦元素包括：<a href>、<button>（未禁用）、<input>、<textarea>、<select>、带有 tabindex 属性（非-1）的元素、以及 contenteditable 元素。焦点陷阱会动态扫描这些元素，并在Tab键按下时判断是否需要循环。注意：tabindex="-1" 的元素可通过脚本聚焦但不参与Tab顺序。
可以。生成的代码遵循WCAG 2.1 AA标准，包含完整的ARIA属性、焦点陷阱逻辑、ESC/遮罩关闭、焦点恢复等功能。代码是纯原生HTML/CSS/JS，无任何外部依赖。建议在使用前根据实际内容调整：修改标题、描述文字、按钮标签，并根据需要调整颜色和间距以匹配您的设计系统。
🔧 相关工具