用途:对 WordPress 主题模板、区块输出、插件后台界面和 JS 交互组件做系统性无障碍审查。核心原则是无障碍应内建于结构、交互与状态变化中,而不是靠零散 ARIA 补丁。
适用场景:审查主题模板或区块标记;审计后台表单或自定义插件 UI;检查模态框、标签页、手风琴、菜单交互;检查表单标签、错误提示与焦点行为;发布前验证无障碍实现。不适用于纯视觉设计批评、仅性能或安全审查、仅凭截图测量颜色对比度。
审查流程:先识别界面类型(前端模板、区块输出、后台界面、交互 JS 组件);再检查结构语义(标题层级、按钮与链接区分、表单标签关联、表格与列表语义);然后检查交互行为(键盘可达性、焦点可见性与焦点返回、必要的实时区域或状态提示、对话框/手风琴/标签页语义);最后按严重程度分级:CRITICAL 为核心操作无法键盘访问、必填控件无标签、模态或菜单焦点陷阱错误;WARNING 为语义薄弱、错误关联差、ARIA 误用、可点击的非按钮元素;INFO 为标题结构、帮助文本或地标用法可改进。
文件类型检查要点:模板与标记中,交互元素用 div/span 且无键盘支持为 CRITICAL,缺少标题结构或地标、表单输入无标签为 WARNING,可用原生元素替代重度 ARIA 为 INFO。JS 交互中,焦点未移入模态或关闭后未返回为 CRITICAL,键盘处理不完整、状态变化仅视觉可见为 WARNING,异步更新可用实时区域为 INFO。区块与后台 UI 中,检查器控件或区块 UI 标签不清、后台通知未适当播报为 WARNING,空状态清晰度与辅助文本可改进为 INFO。
快速检测可用 rg 命令,例如查找非语义元素上的点击处理:rg -n "<(div|span)[^>]+on(click|key)" . -g '.{php,html,js,jsx}';查找表单控件:rg -n "<input|<select|<textarea" . -g '.{php,html}';查找对话框:rg -n "dialog|modal|aria-modal|role=['"]dialog" . -g '.{php,html,js,jsx}';查找 ARIA 与角色:rg -n "aria-|role=" . -g '.{php,html,js,jsx}';查找焦点管理:rg -n "focus(|tabindex|keydown|keyup" . -g '.{js,jsx,php}';查找标题与地标:rg -n "<h[1-6]|<main|<nav|<aside|<header|<footer" . -g '.{php,html}'。
输出格式:每条发现包含严重程度、文件引用、受影响的用户交互、为何不可访问以及实际修复建议,优先给出实现指导而非宽泛合规表述。参考文件包括 references/semantic-and-form-patterns.md 与 references/interactive-a11y-patterns.md。