mcpField
W
wp-accessibility-review

wp-accessibility-review

github.com/jorgerosal测试与质量11181 次安装20 周前更新
代码仓库

关于 wp-accessibility-review

用于审查 WordPress 主题、区块、插件和管理界面可访问性的代码审查技能。它围绕语义、键盘交互、焦点、表单和界面状态组织检查，并按严重程度给出实用修复建议。

主要功能

  1. 01检查语义标记与标题层级
  2. 02审查键盘操作与焦点行为
  3. 03检查表单标签和错误提示
  4. 04检查对话框、标签页、菜单和折叠面板
  5. 05按严重程度列出发现与修复建议

适用场景

  1. 01审查 WordPress 模板和区块输出
  2. 02审计管理表单或插件界面
  3. 03检查交互组件的键盘可用性
  4. 04发布前验证可访问性实现

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/jorgerosal/wordpress-skills --skill wp-accessibility-review

安装后在 Claude Code 中输入/wp-accessibility-review确认已加载。

附带文件references/interactive-a11y-patterns.mdreferences/semantic-and-form-patterns.md

详细介绍

WordPress 无障碍审查技能

概述

系统地审查 WordPress 主题、区块、插件和管理界面的无障碍性。核心原则： 无障碍性应融入结构、交互和状态变化中，而不是通过零散的 ARIA 补丁来实现。审查内容涵盖语义化标记、键盘行为、焦点管理、标签、错误消息、管理界面交互、区块输出，以及由 JS 驱动的 UI 变化。

何时使用

适用场景：

  • 审查主题模板或区块标记
  • 审计管理表单或自定义插件 UI
  • 检查模态框、标签页、手风琴或菜单交互
  • 审查表单标签、错误和焦点行为
  • 在发布前验证无障碍实现

不适用于：

  • 没有实现背景的纯视觉设计评审
  • 仅审查性能或安全性
  • 仅根据截图测量颜色对比度

代码审查工作流

  1. 确定审查对象

    • 前端模板
    • 区块输出
    • 管理界面
    • 交互式 JS 组件

  2. 检查结构语义

    • 标题顺序
    • 按钮与链接的使用
    • 表单标签关联
    • 表格和列表语义

  3. 检查交互行为

    • 键盘可访问性
    • 焦点可见性及焦点返回
    • 必要时使用实时区域或状态消息
    • 适用时检查对话框／手风琴／标签页语义

  4. 判定严重程度

    • CRITICAL： 核心操作无法通过键盘访问、必填表单控件没有标签、模态框或菜单以不正确的方式陷住焦点
    • WARNING： 语义薄弱、错误关联不佳、误用 ARIA、使用可点击的非按钮元素
    • INFO： 可改进标题结构、帮助文本或地标的使用

针对文件类型的检查

模板和标记
  • CRITICAL：使用 div/span 实现交互元素，却未提供键盘支持
  • WARNING：缺少标题结构或地标
  • WARNING：表单输入没有标签
  • INFO：可使用原生元素，而不是大量依赖 ARIA 的替代方案
JavaScript 交互
  • CRITICAL：未将焦点移入模态框，或关闭时未将焦点移回
  • WARNING：键盘事件处理不完整
  • WARNING：状态变化仅以视觉方式呈现
  • INFO：可使用实时区域播报异步更新
区块和管理界面 UI 输出
  • WARNING：检查器控件或区块 UI 标签不清晰
  • WARNING：管理通知未以适当方式播报
  • INFO：可改进空状态的清晰度和辅助文本

用于快速检测的搜索模式（A11Y-21）

使用以下 rg 命令快速扫描代码中的无障碍问题。

CRITICAL 模式
# Click handlers on non-semantic elements
rg -n "<(div|span)[^>]+on(click|key)" . -g '*.{php,html,js,jsx}'

# Form controls without obvious label references
rg -n "<input|<select|<textarea" . -g '*.{php,html}'

# Dialog or modal implementations
rg -n "dialog|modal|aria-modal|role=['\"]dialog" . -g '*.{php,html,js,jsx}'
WARNING 模式
# ARIA usage candidates to inspect manually
rg -n "aria-|role=" . -g '*.{php,html,js,jsx}'

# Button-like links or link-like buttons
rg -n "<a[^>]+href=['\"]#|<button[^>]+onclick" . -g '*.{php,html}'

# Focus management code
rg -n "focus\(|tabindex|keydown|keyup" . -g '*.{js,jsx,php}'
INFO 模式
# Headings and landmark structure
rg -n "<h[1-6]|<main|<nav|<aside|<header|<footer" . -g '*.{php,html}'

参考文件

  • references/semantic-and-form-patterns.md - 原生语义、标签、错误消息和表单结构
  • references/interactive-a11y-patterns.md - 模态框、菜单、手风琴、标签页、焦点管理和键盘行为

输出格式（A11Y-23）

每项发现都应包含严重程度、文件引用、受影响的用户交互、实现为何存在无障碍问题，以及切实可行的修复方案。优先提供实现方面的指导，而非宽泛的合规表述。

评论

支持 Markdown