Agent Skills › payloadcms/payload › payload-accessibility

payload-accessibility

GitHub

评估 Payload UI 变更的可访问性，涵盖 WCAG 2.2 AA 合规审查、原生语义实现及端到端测试。指导在指定路径添加自动化与屏幕阅读器证据，确保生产环境交互符合无障碍标准并生成详细报告。

.agents/skills/payload-accessibility/SKILL.md payloadcms/payload

Trigger Scenarios

审查或修改 Payload UI 渲染、交互或焦点行为执行可访问性测试或收集 WCAG/VPAT 合规证据

Install

npx skills add payloadcms/payload --skill payload-accessibility -g -y

More Options

Non-standard path

npx skills add https://github.com/payloadcms/payload/tree/main/.agents/skills/payload-accessibility -g -y

Use without installing

npx skills use payloadcms/payload@payload-accessibility

指定 Agent (Claude Code)

npx skills add payloadcms/payload --skill payload-accessibility -a claude-code -g -y

安装 repo 全部 skill

npx skills add payloadcms/payload --all -g -y

预览 repo 内 skill

npx skills add payloadcms/payload --list

SKILL.md

Frontmatter

{
    "name": "payload-accessibility",
    "description": "Use when changing or reviewing rendered Payload UI, interaction or focus behavior, semantic markup, accessibility tests, or WCAG\/VPAT evidence."
}

Payload Accessibility

Assess accessibility as part of the change, not as a scan added afterward. Scope conclusions to the behavior and states actually evaluated.

Change assessment

For every affected component or flow:

Identify the rendered states, input methods, viewport conditions, and assistive-technology behavior the change can affect.
Read wcag-2.2-aa.md. Assess every plausibly affected WCAG 2.2 Level A and AA criterion; do not limit review to criteria named in an issue.
Prefer native HTML semantics. When a composite ARIA pattern is necessary, implement its complete semantics and keyboard behavior rather than adding roles or states in isolation.
Read testing.md and select evidence based on the observable outcome.
Exercise the changed behavior in every relevant state. Accessibility checks must cover the production component and integration context, not a simplified substitute.

Test placement

Put browser-observable, criterion-level accessibility evidence in test/a11y/WCAG.e2e.spec.ts, inside the numerically ordered test.describe group for its primary criterion.
Put evidence that depends on synthesized speech or a screen-reader virtual/browse cursor in test/a11y/screen-reader.spec.ts, under the same criterion organization.
Put setup shared by both accessibility specs in test/a11y/helpers.ts. Keep scenario-specific setup in its spec.
Keep low-level unit tests beside their component when they verify an implementation contract. They supplement, but do not replace, an end-to-end WCAG regression when the reported barrier occurs only in the rendered application.
Reuse the existing test/a11y Payload configuration and real UI components. Do not create a new accessibility fixture or criterion file by default.

Evidence boundaries

Axe finds a subset of machine-detectable failures. A clean scan is not proof of criterion or product conformance.
DOM and accessibility-tree assertions do not prove exact spoken output.
Guidepup is for outcomes that specifically depend on screen-reader output or cursor behavior, not every issue originally discovered with a screen reader.
Require human visual or assistive-technology confirmation only when the outcome depends on judgement, timing, platform behavior, or an interaction that reliable automation does not reproduce.
WCAG 2.2 Level AA conformance requires all applicable Level A and Level AA criteria. A qualified human reviewer approves VPAT/ACR conformance statements.

Required handoff

Report:

The affected UI, states, and interaction methods assessed.
The WCAG 2.2 A/AA criteria assessed and why they were applicable or potentially affected.
Automated tests and commands run, with their results.
Required visual, screen-reader, or other manual verification.
Known failures, limitations, and any criterion that cannot yet be supported.

Never report a component, criterion, or product as conforming beyond the evidence collected.