SuperAPI AI 工具集

modal-accessibility

前端与建站

查看项目

更新于 10-16 05:42

技能介绍

用途:在审查已渲染的 HTML、交互组件或设计系统模式时,检查模态对话框(modal dialog)是否对键盘用户可访问。资料指出,若缺少焦点陷阱与键盘处理,模态框会变成键盘用户的“隐形陷阱”,无法导航、退出或完成任务。

主要能力与检查要点:

  • 模态容器使用 role='dialog' 与 aria-modal='true'。
  • 焦点应被限制在模态内部,Tab 键只在模态内循环。
  • 按 Escape 键关闭模态,并将焦点返回触发元素。
  • 使用 aria-labelledby 指向模态标题。

使用方式:按检查、修复、解释、代码审查等模式使用。审查时针对已渲染标记与交互状态,指出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何用浏览器无障碍工具或辅助技术验证修复。完整实现细节、代码示例与框架专属指引见 references/rule.md。规则页:https://frontendchecklist.io/rules/accessibility/modal-accessibility。

限制:资料未提供具体框架实现、收费或平台信息。