SuperAPI AI 工具集

aria-dialog-name

前端与建站

查看项目

更新于 10-16 05:25

技能介绍

用途

aria-dialog-name 是前端检查清单(front-end-checklist)中的一条无障碍(accessibility)规则,目标是确保对话框(dialog)具有可访问名称。当对话框打开时,屏幕阅读器应能立即播报其用途,让用户知道焦点为何转移以及需要提供什么信息。

主要能力

该规则围绕对话框的可访问名称展开,包含以下要点:

  • 所有 dialog 和 alertdialog 元素都必须具有描述性标签。
  • 可使用 aria-labelledby 指向标题,或使用 aria-label 直接提供字符串。
  • 帮助用户理解模态框的上下文和目的。

使用方式

该规则以检查(Check)、修复(Fix)、解释(Explain)和代码审查(Code Review)的形式提供指导:

  • 检查:验证每个带有 role="dialog" 或 role="alertdialog" 的元素是否具有可访问名称。
  • 修复:使用 aria-labelledby(指向标题)或 aria-label 为对话框提供可访问名称。
  • 解释:说明为什么为对话框命名对于在模态框出现时引导屏幕阅读器用户至关重要。
  • 代码审查:审查渲染后的标记和影响该规则的交互状态,标记违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何通过浏览器无障碍工具或辅助技术验证修复。

完整的实现细节、代码示例和框架特定指南,请参见 references/rule.md。

规则页面:https://frontendchecklist.io/rules/accessibility/aria-dialog-name

适用场景

适用于审查渲染后的 HTML、交互组件或与“确保对话框具有可访问名称”相关的设计系统模式。

限制

关于该规则的具体框架支持范围、浏览器兼容性细节以及完整的代码示例,资料中未提供,需查阅 references/rule.md 或规则页面获取。