본문으로 건너뛰기
cccskills
무료GitHub에 공개

accessibility-audit

WCAG 2.2 AA audit — perceivable, operable, understandable, robust criteria. Deep-dive for /launch-check accessibility.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

me2resh/apexyard스타 538(GitHub 538 + cccskills 0)

실행 점수 미검증

설치 방법 보기

포함된 파일(1)

  • SKILL.md5.5 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

Writing: read docs/skills/shared/writing-rule.md before you write a durable artifact.

/accessibility-audit — WCAG 2.2 AA Compliance

Deep-dive accessibility analysis against the Web Content Accessibility Guidelines 2.2 Level AA. Produces a prioritized findings list with fix instructions. Invoke when /launch-check's accessibility row shows WARN or FAIL, or proactively for any user-facing app.

WCAG Principles (POUR)

PrincipleWhat it meansKey checks
PerceivableContent must be presentable in ways users can perceiveAlt text, captions, color contrast, text resizing
OperableInterface must be navigable and usableKeyboard access, focus management, skip links, timing
UnderstandableContent and UI must be understandableLanguage declaration, consistent navigation, error identification
RobustContent must work across assistive technologiesValid HTML, ARIA usage, semantic elements

Process

Step 1: Scan for structural issues

Grep the codebase for common accessibility failures:

  • <img without alt attribute
  • <input without associated <label> or aria-label
  • onClick without onKeyDown / onKeyPress (keyboard inaccessible)
  • <div> or <span> used as buttons without role="button" and tabIndex
  • Missing <html lang="..."> attribute
  • Heading hierarchy gaps (h1 → h3 with no h2)
  • Missing <main>, <nav>, <header>, <footer> landmarks
  • Color values with insufficient contrast ratios (check theme files / CSS variables)
  • Missing skip-to-content link
  • Auto-playing media without controls
  • Forms without error identification (aria-invalid, aria-describedby)

Step 2: Check ARIA usage

  • aria-label on interactive elements without visible text
  • aria-hidden="true" not applied to decorative elements
  • role attributes used correctly (not role="button" on a <div> that should be a <button>)
  • Live regions (aria-live) for dynamic content updates
  • aria-expanded / aria-controls on expandable sections

Step 3: Output findings

ACCESSIBILITY AUDIT — <project> @ <sha>

| # | WCAG | Criterion | Severity | Finding | Fix |
|----|------|-----------|----------|---------|-----|
| A1 | 1.1.1 | Non-text content | HIGH | 12 images missing alt text | Add descriptive alt attributes |
| A2 | 2.1.1 | Keyboard | HIGH | 3 onClick handlers without keyboard equivalent | Add onKeyDown with Enter/Space handling |
| A3 | 1.4.3 | Contrast | MEDIUM | Button text #999 on #fff = 2.8:1 (needs 4.5:1) | Darken to #767676 or darker |
| A4 | 2.4.1 | Skip nav | LOW | No skip-to-content link | Add <a href="#main" class="skip-link"> |

Summary: <N> findings (<N> high, <N> medium, <N> low)
WCAG 2.2 AA estimate: <PASS / PARTIAL / FAIL>

Persist the run + render trend

After printing the findings table, persist via the shared audit-history lib so the accessibility trend across runs becomes legible. See docs/agdr/AgDR-0019-audit-artefact-persistence.md.

Resolve project name + score + verdict

<project-name> from apexyard.projects.yaml (or basename + /handover reminder if unregistered).

Score: score = max(0, 100 - 25*critical - 10*high - 3*medium - 1*low). Verdict by worst-severity: critical/high → fail, medium → conditional, low/none → pass. Legacy "WCAG 2.2 AA estimate" three-state: FAIL → fail, PARTIAL → conditional, PASS → pass.

Persist + render

source "$(git rev-parse --show-toplevel)/.claude/hooks/_lib-audit-history.sh"

# Lowercase severity in the payload — the lib expects critical/high/medium/low/info.
payload=$(mktemp); cat > "$payload" <<'EOF'
{
  "schema_version": 1,
  "findings": [
    {"id": "A1", "severity": "high",   "status": "open", "summary": "Images missing alt text (WCAG 1.1.1)"},
    {"id": "A2", "severity": "high",   "status": "open", "summary": "onClick handlers without keyboard equivalent (WCAG 2.1.1)"},
    {"id": "A3", "severity": "medium", "status": "open", "summary": "Button text contrast 2.8:1, needs 4.5:1 (WCAG 1.4.3)"}
  ]
}
EOF

# Body: per templates/audits/accessibility-audit.md (POUR-grouped table)
body=$(mktemp); cat > "$body" <<'EOF'
... (filled-in body — POUR groupings + Recommended priority) ...
EOF

ts=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
audit_run_persist "<project-name>" "accessibility-audit" "$ts" "fail" 60 "$body" < "$payload"
rm -f "$payload" "$body"

audit_render_trend "<project-name>" "accessibility-audit" 5

Opt-in commit

touch projects/<name>/audits/accessibility-audit/.audit-history-tracked

Rules

  1. Cite WCAG criteria numbers (e.g. 1.1.1, 2.1.1) so findings are traceable to the spec.
  2. Prioritize by user impact, not by WCAG level. A missing alt on a hero image is worse than a missing skip link.
  3. Auto-PASS for non-UI projects. CLIs, APIs, and libraries don't need this audit.
  4. Give copy-pasteable fixes where possible (the exact HTML/JSX to add, not just "fix the contrast").
  5. Always persist via the lib. The persist step runs regardless of opt-in commit state.
  6. Severity vocabulary in the JSON is lowercase. The lib expects critical/high/medium/low/info. The visible findings table can keep its conventional capitalisation.

Part of ApexYard — multi-project SDLC framework for Claude Code · MIT.

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

WCAG 2.1 AA audit — perceivable, operable, understandable, robust criteria. Deep-dive for /launch-check accessibility.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

me2resh/apexyard5382026년 10월 26일 업데이트

agdr

무료

Browse / search / show / stats AgDRs across the portfolio — recalls "have we decided this before?".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

me2resh/apexyard5382026년 10월 26일 업데이트

Analytics audit — SDK config, event naming, funnel completeness, dashboards. Deep-dive for /launch-check analytics.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

me2resh/apexyard5382026년 10월 26일 업데이트

Record per-PR architecture-review approval for design-artifact PRs (required by the architecture gate). ONLY on an explicit per-PR architect "approved".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

me2resh/apexyard5382026년 10월 26일 업데이트

Record per-PR design-review approval (UI merge gate). ONLY on an explicit per-PR designer "approved".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

me2resh/apexyard5382026년 10월 26일 업데이트

Record per-PR CEO approval and merge in one turn. ONLY on an explicit per-PR "approved" — never on umbrella "go".

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

me2resh/apexyard5382026년 10월 26일 업데이트

me2resh의 스킬 모두 보기

이 스킬의 문제 신고