SuperAPI AI 工具集

select-name

前端与建站

查看项目

更新于 10-16 06:15

技能介绍

用途:这是一条前端无障碍(可访问性)检查规则,用于审查已渲染的 HTML、交互组件或设计系统模式,确保每个 <select> 元素都拥有可访问名称。

主要能力:

  • 检查表单中每个 <select> 元素是否具备有效的可访问名称或关联标签。
  • 审查影响该规则的元素、角色、标签、焦点行为或键盘交互,并标记违规项。
  • 说明如何使用浏览器无障碍工具或辅助技术验证修复效果。

推荐做法:

  • 为每个 <select> 使用 <label> 元素,并让 for 属性与 <select> 的 id 匹配。
  • 若无法提供可见标签,可使用 aria-label 或 aria-labelledby。
  • 避免用第一个 option 替代正式标签。

使用方式:检查表单中每个 <select> 是否有有效可访问名称或关联标签;修复方式是添加 for 属性匹配 <select> id 的 <label>。完整的实现细节、代码示例与框架相关指导见 references/rule.md,规则页面为 https://frontendchecklist.io/rules/accessibility/select-name。

适用场景:表单、交互组件、设计系统模式的无障碍代码审查。

限制:本条目侧重规则说明,未提供具体代码示例与框架专用实现,需查阅引用文档。