本文へ移動
cccskills
無料GitHub で公開

accessibility-audit

Generate a WCAG 2.2 accessibility audit checklist and remediation suggestions for any UI or design. Use when asked to audit for accessibility, check WCAG compliance, review a design for a11y issues, or create an accessibility remediation plan. Produces a prioritised checklist with pass/fail assessments and specific fixes.

インストール方法を見る

含まれるファイル(1)

  • SKILL.md7.9 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Accessibility Audit Skill

This skill produces a structured accessibility audit based on WCAG 2.2 guidelines. It covers visual, motor, cognitive, and screen reader accessibility — with prioritised remediation for each issue found.

Required Inputs

Work from what is given. If any of these is missing, still produce the complete output: fill each gap with a reasonable assumption marked (assumed, confirm) and list those assumptions at the end. Ask a question first only when the core subject itself is missing (there is nothing to write about).

  • What is being audited (screen, component, full product, design spec)
  • Description or image of the UI
  • Target WCAG level (A / AA / AAA — default to AA, which is the legal standard in most jurisdictions)
  • Known assistive technology users? (Yes/No — if yes, which: screen reader / switch access / voice control / magnification)
  • Platform (Web / iOS / Android / Desktop app)

Programmatic Helper

Contrast ratios cannot be eyeballed. The AA line sits at 4.5:1, and #777777 on white is 4.478 (fails) while #767676 is 4.54 (passes) — no amount of looking at a screenshot separates those. Compute them:

npx --yes notugly fix "#8ab4f8" "#ffffff"     # ratio, APCA, and the nearest passing colour
npx --yes notugly onepager <url> --out review.html   # every pairing, printable
npx --yes notugly vision                      # which colours merge for colour-blind viewers

notugly fix returns the ratio, the APCA lightness contrast, and the closest colour to the one already chosen that passes — same hue, same chroma. Paste those numbers into the tables below rather than estimating them.

Deterministic, zero dependencies, and no model call — so it costs nothing to run and gives the same answer every time.

For 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast, every row in the remediation table should carry a measured ratio, not an assessment. If the user supplied a screenshot rather than hex values, say so explicitly in the audit — an inferred ratio is not an audit finding.

Output Structure


Accessibility Audit: [Component or Screen Name]

Target standard: WCAG 2.2 Level [AA] Platform: [Platform] Date: [Date]


Audit Summary

CategoryIssues FoundCriticalModerateMinor
Perceivable
Operable
Understandable
Robust
Total

Overall compliance status: ✅ Compliant / 🟡 Minor issues / 🔴 Fails AA standard


Perceivable

1.1 Text Alternatives

  • All images have descriptive alt text (not filename or "image")
  • Decorative images have alt="" to be skipped by screen readers
  • Icons without visible labels have accessible names
  • Complex images (charts, diagrams) have extended descriptions

Issues found: [List specific issues or "None"]

1.3 Adaptable

  • Content structure uses semantic HTML (headings, lists, landmarks) — not just visual formatting
  • Reading order in DOM matches visual order
  • Form inputs have associated labels (not placeholder text as label)
  • Data tables have proper headers and scope

Issues found:

1.4 Distinguishable

  • Text contrast ratio ≥ 4.5:1 (normal text) or ≥ 3:1 (large text 18px+)
  • UI component contrast ratio ≥ 3:1 against background
  • Information is not conveyed by colour alone
  • Text can be resized to 200% without loss of content
  • No content that auto-plays audio

Issues found:


Operable

2.1 Keyboard Accessible

  • All interactive elements are reachable by keyboard (Tab key)
  • No keyboard traps
  • Custom components have keyboard interactions (arrow keys for menus, Escape to close modals)
  • Skip navigation link available for pages with repeated navigation

Issues found:

2.4 Navigable

  • Focus is visible at all times (not removed with outline: none without replacement)
  • Focus order is logical and predictable
  • Page/screen has a descriptive title
  • Link text is descriptive (not "click here" or "read more")
  • Headings are hierarchical (H1 → H2 → H3, no skips)

Issues found:

2.5 Input Modalities

  • Touch targets are at least 44x44px
  • No functionality requires complex gestures (pinch, multi-touch) without a simple alternative
  • Motion or dragging interactions have button alternatives

Issues found:


Understandable

3.1 Readable

  • Language of the page is set (lang attribute)
  • Unusual words, abbreviations, or jargon are explained

3.2 Predictable

  • Navigation is consistent across screens
  • Components behave consistently (same button does the same thing)
  • No unexpected context changes on focus or input

3.3 Input Assistance

  • Error messages identify the field and describe the error in plain language (not just "Invalid input")
  • Required fields are labelled (not just with colour or asterisk alone)
  • Forms provide suggestions for correcting errors where possible

Issues found:


Robust

4.1 Compatible

  • HTML is valid and well-structured
  • ARIA roles and attributes are used correctly (not to fix broken semantics)
  • Status messages (success, error, loading) are announced to screen readers without focus change

Issues found:


Prioritised Remediation List

PriorityIssueWCAG CriterionFixEffort
🔴 Critical[Issue][e.g. 1.4.3 Contrast][Specific fix][Low/Med/High]
🟡 Moderate[Issue]
🟢 Minor[Issue]

Priority definitions:

  • 🔴 Critical: Blocks access for users with disabilities. Legal risk. Fix before launch.
  • 🟡 Moderate: Significant friction. Fix in next sprint.
  • 🟢 Minor: Best practice. Address in roadmap.

Quick Wins (Fix in < 1 hour)

[List any issues that are trivially fixable — e.g. adding alt text, fixing contrast with a colour swap, adding a lang attribute. These are easy to ship immediately.]


Testing Recommendations

  • Manual keyboard test: Tab through the entire flow. Can you complete every task without a mouse?
  • Screen reader test: VoiceOver (Mac/iOS), NVDA or JAWS (Windows). Is every piece of content and every action accessible?
  • Colour contrast check: Use Stark (Figma plugin) or WebAIM Contrast Checker
  • Automated scan: Axe DevTools or Lighthouse accessibility audit (catches ~30% of issues automatically)

Quality Checks

  • Issues are mapped to specific WCAG criteria
  • Every critical issue has a specific fix recommendation
  • Quick wins are separated from larger fixes
  • Effort estimates are included for prioritisation
  • Testing recommendations are included

Anti-Patterns

  • Do not rely solely on automated scanning tools — automated checks catch ~30% of issues; manual keyboard and screen reader testing is required
  • Do not label an issue "minor" simply because it only affects a small percentage of users — for those users it may block all access
  • Do not add ARIA roles to fix broken semantics — use correct semantic HTML first; ARIA is a last resort
  • Do not confuse colour contrast of text with colour contrast of UI components — they have different minimum ratios (4.5:1 vs 3:1)
  • Do not audit only the happy path — error states, empty states, and loading states must also meet accessibility requirements

Example Trigger Phrases

  • "Audit this design for accessibility"
  • "Check WCAG compliance for [screen/component]"
  • "Give me an a11y audit of [UI description]"
  • "What accessibility issues does this design have?"

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Design a 360-degree feedback survey or write a structured 360 feedback report. Use when asked to build a 360 feedback process, write 360 feedback for a colleague, design a feedback survey, or produce a feedback report. Produces either a complete survey instrument with rating scales and open-ended questions, or a structured narrative feedback report with themes, strengths, and development areas.

日本語の概要は準備中です。原文の説明を表示しています。

mohitagw15856/pm-claude-skills1,4412026年10月13日 更新

Decode a 401k or workplace retirement plan — the real cost of its funds, the match's fine print, vesting math, and the plan features worth using or avoiding. Use when someone asks 'is my 401k any good', 'decode my 401k plan', 'which funds should I look at', or 'what fees am I paying'. Produces a fee decode in dollars-over-time, match and vesting math, a fund-lineup triage by cost, and the questions for HR or the plan administrator.

日本語の概要は準備中です。原文の説明を表示しています。

mohitagw15856/pm-claude-skills1,4412026年10月13日 更新

Design statistically rigorous A/B tests for product features, UI changes, onboarding flows, and pricing experiments. Use when asked to set up an experiment, design an A/B test, calculate sample size, or interpret test results. Produces a complete test plan with hypothesis, variant definitions, sample size, duration estimate, guardrail metrics, and a results interpretation guide.

日本語の概要は準備中です。原文の説明を表示しています。

mohitagw15856/pm-claude-skills1,4412026年10月13日 更新

Analyse a finished A/B test and write the readout — the result, whether it's statistically and practically significant, what it means, and the ship/no-ship call. Use when asked to analyse experiment results, write an A/B test readout, interpret test data, or decide whether to ship a variant. Produces a clear verdict with the lift and confidence, segment cuts, the risks (peeking, novelty, sample), and a recommendation. Distinct from planning a test — this reads results.

日本語の概要は準備中です。原文の説明を表示しています。

mohitagw15856/pm-claude-skills1,4412026年10月13日 更新

Build or tailor an academic CV for faculty, postdoc, research or fellowship applications: publications, grants, teaching, supervision and service in the order the field expects, with consistent citations. Use when asked to write my academic CV, update my CV for a lectureship, tenure-track or postdoc application, format my publications list, or adapt my academic CV for an industry research role. Produces the full academic CV, a field-appropriate section order, a clean publications list in one citation style, and a two-page summary version when asked.

日本語の概要は準備中です。原文の説明を表示しています。

mohitagw15856/pm-claude-skills1,4412026年10月13日 更新

Plan a trip that actually works with a disability or access need — confirm real accessibility (not just 'accessible' labels), book the assistance in advance, plan for equipment and medication, and build in the contingencies for when access breaks down. Use when someone says 'plan an accessible trip', 'travelling with a wheelchair/disability', 'book assistance for my flight', or 'will this hotel actually work for me'. Produces an access-verified itinerary, an assistance-booking checklist, an equipment/medication plan, and contingency scripts. Verify specifics with providers.

日本語の概要は準備中です。原文の説明を表示しています。

mohitagw15856/pm-claude-skills1,4412026年10月13日 更新

mohitagw15856 のスキルをすべて見る

このスキルの問題を報告する