SuperAPI AI 工具集

aria-hidden-focus

前端与建站

查看项目

更新于 10-16 05:25

技能介绍

用途

aria-hidden-focus 是前端检查清单(front-end-checklist)中的一条无障碍(accessibility)规则,主题为“从 aria-hidden 容器中移除可聚焦元素”。它用于在代码审查或无障碍检查中,发现并修复一类常见的焦点管理问题:当 aria-hidden="true" 的容器内部仍包含可聚焦元素时,键盘用户可能将焦点移入这些元素,而屏幕阅读器保持静默,导致用户不知道焦点在哪里、能操作什么。

主要能力

该规则围绕三个动作组织:

  • 检查(Check):扫描 aria-hidden="true" 容器,查找其中的可聚焦元素,例如链接、按钮或输入框。
  • 修复(Fix):为 aria-hidden 容器内的可聚焦子元素添加 tabindex="-1",或使用 inert 属性来正确隐藏交互元素。
  • 解释(Explain):说明为什么 aria-hidden 容器内的可聚焦元素会给键盘用户和屏幕阅读器用户带来困惑。

规则还包含代码审查(Code Review)环节:审查影响该规则的渲染标记与交互状态,标出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何通过浏览器无障碍工具或辅助技术验证修复。

使用方式

该规则以检查清单条目的形式提供,可在审查渲染后的 HTML、交互组件或设计系统模式时使用。规则页面为 https://frontendchecklist.io/rules/accessibility/aria-hidden-focus,完整实现细节、代码示例与框架相关指导见 references/rule.md。

适用场景

  • 审查渲染后的 HTML 标记,检查 aria-hidden 容器的子元素是否可聚焦。
  • 审查交互组件(如弹窗、菜单、折叠面板)在隐藏状态下的焦点行为。
  • 审查设计系统模式,确保隐藏容器不会产生“幽灵焦点”。
  • 在代码审查中标记无障碍问题,并给出验证方法。

限制

资料未提供该规则的具体实现代码、框架适配细节、自动化检测工具集成方式或收费信息,相关内容需参见 references/rule.md 与规则页面。