用途
该技能用于在代码审查或设计系统审查中,检查与“避免在表单字段上使用 autofocus”相关的已渲染 HTML、交互组件或设计系统模式。它关注的是无障碍(accessibility)问题,核心目标是防止页面加载时自动将焦点移动到表单字段,从而破坏屏幕阅读器用户的浏览上下文。
主要能力
- 检查表单元素上是否存在 autofocus 属性。
- 验证页面加载时焦点是否意外地从页面顶部移走,尤其是在表单之前存在内容的页面上。
- 识别违反该规则的具体元素、角色、标签、焦点行为或键盘交互。
- 说明如何通过浏览器无障碍工具或辅助技术验证修复效果。
- 提供修复建议:移除表单元素上的 autofocus 属性;若需要焦点管理,改用 JavaScript 在用户交互后设置焦点,而不是在页面加载时自动聚焦。
使用方式
该技能以规则形式提供,包含快速参考、检查步骤、修复方法和解释说明。在代码审查时,审查已渲染的标记和交互状态,标记出违反规则的具体元素、角色、标签、焦点行为或键盘交互,并记录如何用浏览器无障碍工具或辅助技术验证修复。完整实现细节、代码示例和框架特定指导见 references/rule.md。规则页面为 https://frontendchecklist.io/rules/accessibility/autofocus-avoidance。
适用场景
- 审查包含表单的页面,尤其是表单之前有内容的页面。
- 审查交互组件和设计系统模式中的焦点管理。
- 无障碍审计和代码审查流程。
限制与例外
- 登录页和仅含搜索的页面属于例外,在这些页面上 autofocus 可能是可接受的。
- 该技能本身不提供自动修复工具,需人工审查并修改代码。
- 关于具体框架的实现细节,资料中仅指向 references/rule.md,未提供更多内容。