SuperAPI AI 工具集

aria-toggle-field-name

前端与建站

查看项目

更新于 10-16 05:29

技能介绍

用途

该技能用于在审查渲染后的 HTML、交互组件或设计系统模式时,检查切换类字段(toggle fields)是否提供了可访问名称(accessible name)。切换字段包括复选框(checkbox)、单选按钮(radio button)和开关(switch)。如果这些控件没有标签,屏幕阅读器用户将无法知道自己在开启或关闭什么,因此该规则的核心目标是确保每个切换控件都能被辅助技术正确识别和描述。

主要能力

  • 检查所有切换字段(复选框、单选按钮、开关)是否具有有效的可访问名称。
  • 识别使用 aria-label、aria-labelledby 或 <label> 元素为复选框和单选按钮提供名称的情况。
  • 确认标签是否清晰描述了切换控件的状态或动作。
  • 标记开关控件中空标签或非描述性标签的问题。
  • 在代码审查中,针对渲染标记和影响可访问名称的交互状态进行审查,指出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何通过浏览器可访问性工具或辅助技术验证修复效果。

使用方式

该技能以规则检查的形式使用,适用于以下场景:

  1. 检查(Check):检查所有切换字段(复选框、单选按钮、开关)是否具有有效的可访问名称。
  2. 修复(Fix):使用 label 元素、aria-label 或 aria-labelledby 为切换字段添加可访问名称。
  3. 解释(Explain):说明为什么所有交互式切换控件都必须具有描述性名称,以便用户理解其用途。
  4. 代码审查(Code Review):审查渲染标记和交互状态,标记违反规则的具体元素、角色、标签、焦点行为或键盘交互,并说明如何用浏览器可访问性工具或辅助技术验证修复。

快速参考要点:

  • 对复选框和单选按钮使用 aria-label、aria-labelledby 或 <label>。
  • 确保标签清晰描述切换控件的状态或动作。
  • 避免为开关使用空标签或非描述性标签。

适用场景

  • 前端可访问性审查与代码评审。
  • 设计系统组件(如复选框、开关、单选按钮)的规范检查。
  • 交互组件的渲染 HTML 检查。
  • 需要确保屏幕阅读器用户能够理解切换控件用途的任何 Web 界面。

限制

资料中未提供该技能的具体实现细节、代码示例和框架特定指导,仅说明完整实现细节、代码示例和框架特定指导见 references/rule.md。规则页面为 https://frontendchecklist.io/rules/accessibility/aria-toggle-field-name。