Agent Skills › payloadcms/payload › payload-accessibility

payload-accessibility

GitHub

用于评估和修复 Payload UI 的无障碍访问性,涵盖 WCAG/VPAT 证据生成、对比度检查及键盘行为。支持按需审查代码变更,报告问题并指导修复与回归测试。

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

触发场景

构建或评估 Payload UI 无障碍性 修改样式、内容、交互或焦点行为 生成 WCAG/VPAT 合规证据 进行无障碍测试

安装

npx skills add payloadcms/payload --skill payload-accessibility -g -y
更多选项

非标准路径

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

不安装直接使用

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 building or assessing Payload UI, changing styles, content, interactions, focus, keyboard behavior or semantics, or working on accessibility tests or WCAG\/VPAT evidence."
}

Payload Accessibility

Assess accessibility from design through verification. Limit conclusions to the behavior and states evaluated.

On-demand check

Invoke in chat, with optional check:

$payload-accessibility my current UI changes
$payload-accessibility check content branching on origin/feat/content-branching

Scope may be a feature, paths, PR or branch comparison; omitted scope means current local changes. Report the actual revision and comparison. Never silently substitute another branch or older implementation.

A standalone invocation, with or without check, is assessment-only: inspect code, run relevant existing checks and exercise the UI with local test data as needed. Do not edit implementation or tests. Report findings, evidence, proposed fixes and verification gaps, then wait for approval.

After approval, make the approved fixes and regression tests locally; continue editing and verifying within that scope without further approval. Report each original finding as passing, failing or unverified, with evidence. Wait for approval before any commit or push. Fix approval does not authorise committing or publishing. Follow the user's explicit scope and instructions.

During feature development, apply the workflow within the task's authorised scope.

Change assessment

Follow change-assessment.md, proportionally to the change:

  1. Trace the feature/files/diff through relevant shared components, styles, providers and tests to the affected journey. Before code exists, use intended behavior and revisit during implementation.
  2. Identify affected states, inputs, viewports and assistive-technology behavior. Define observable expectations before implementation.
  3. Read wcag-2.2-aa.md. Assess every plausibly affected A/AA criterion, beyond those named in an issue; resolve uncertainty using linked W3C guidance.
  4. Prefer native HTML. Composite ARIA patterns require complete semantics and keyboard behavior.
  5. Follow testing.md. Reuse sufficient evidence; fill gaps with focused checks against production components in context.
  6. Within authorised implementation, reproduce and fix confirmed barriers, then verify. In assessment-only work, report without editing implementation or tests until fixes are approved. Distinguish failures, risks and coverage gaps.

Payload contrast mode and remediation scope

Check feature contrast with enhanced contrast mode enabled: verify html[data-enhanced-contrast] and test the relevant light/dark theme and interaction state. Enabling the mode does not replace the other accessibility checks. Use the existing mode-switching tests rather than rechecking the shared setting for each feature; see contrast setup. Continue checking ordinary-mode integration and behavior, but do not use an ordinary-mode contrast measurement alone to replace the shared palette in a feature.

If a measurement still fails, first verify the intended component variant, semantic tokens, inherited theme and loaded shared styles. Fix incorrect feature usage or custom styling at its source. A reproducible defect inherited from a shared component belongs to that component's owner; resolve it within authorized scope or report it with the exact mode/state and evidence. Do not add a feature-local color override merely to make a contrast check pass. Record the tested mode explicitly; enhanced-mode evidence does not establish contrast conformance for ordinary mode.

Test placement

  • General browser regressions: test/a11y/e2e.spec.ts, grouped by workflow with keyboard/focus assertions and axe checkpoints.
  • Audit validation: test/a11y/WCAG.audit.spec.ts, explicit audit command only.
  • Speech/virtual-cursor evidence: test/a11y/screen-reader.spec.ts, grouped by criterion.
  • Shared setup: test/a11y/helpers.ts; scenario-specific setup stays in its spec.
  • Keep component unit tests beside their component to verify low-level contracts; they cannot replace end-to-end evidence of a barrier in the rendered application.
  • Reuse existing test configurations and real UI; see testing.md for feature-fixture fallback. Do not create fixtures or criterion files by default.

Evidence boundaries

  • Clean axe scans do not prove criterion or product conformance.
  • DOM/accessibility-tree assertions do not prove exact speech. Use Guidepup for speech/cursor outcomes, regardless of how an issue was discovered.
  • Require human visual/AT confirmation when judgement, timing or platform behavior cannot be reliably automated.
  • AA conformance requires all applicable A and AA criteria. Qualified human review is required for VPAT/ACR conformance statements.

Handoff

Keep it short; use a table when helpful. Include:

  • Assessed UI, states, input methods, browser/version, viewport, theme and relevant settings.
  • Applicable A/AA criteria, why they apply, and verified/unverified outcomes.
  • Findings/fixes: file/line, reproduction state and user impact; distinguish confirmed failures, suspected risks and coverage gaps.
  • Commands and actual results, including failed, skipped and not-run checks.
  • Remaining visual/AT verification, failures and limitations.

For verified UI fixes, follow record-pr-demo, including its local preview, approval and publishing requirements. Never commit demo media. Recordings supplement tests, not screen-reader verification.

Never claim conformance beyond the evidence.

版本历史

  • be95e1a 当前 2026-11-03 09:11

    新增按需检查功能,明确增强对比度模式的验证范围,分离审计测试至非 CI 文件以优化流程。

  • d5b01b4 2026-10-19 16:05

同 Skill 集合

.agents/skills/audit-dependencies/SKILL.md
.agents/skills/e2e-write-visual-test/SKILL.md
.agents/skills/generate-translations/SKILL.md
.agents/skills/record-pr-demo/SKILL.md
.agents/skills/triage-ci-flake/SKILL.md
.agents/skills/ui4-convert-tests/SKILL.md
.agents/skills/ui4-review/SKILL.md
.agents/skills/ui4/SKILL.md
.claude/skills/audit-dependencies/SKILL.md
.claude/skills/e2e-write-visual-test/SKILL.md
.claude/skills/generate-translations/SKILL.md
.claude/skills/triage-ci-flake/SKILL.md
.claude/skills/ui4-convert-tests/SKILL.md
.claude/skills/ui4-review/SKILL.md
packages/payload/skills/payload/SKILL.md

元信息

文件数
0
版本
be95e1a
Hash
209b9c9f
收录时间
2026-10-19 16:05

首页 - Wiki
Copyright © 2011-2026 iteam. Current version is 2.156.0. UTC+08:00, 2026-11-06 14:36
浙ICP备14020137号-1