{"id":"accessibility-audit","name":"accessibility-audit","summary":"あらゆるUIやデザインに対してWCAG 2.2のアクセシビリティ監査チェックリストと修正提案を作成してください。","body":"# Accessibility Audit Skill\n\nThis 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.\n\n## Required Inputs\n\nAsk the user for these if not provided:\n- **What is being audited** (screen, component, full product, design spec)\n- **Description or image** of the UI\n- **Target WCAG level** (A / AA / AAA — default to AA, which is the legal standard in most jurisdictions)\n- **Known assistive technology users?** (Yes/No — if yes, which: screen reader / switch access / voice control / magnification)\n- **Platform** (Web / iOS / Android / Desktop app)\n\n\n## Programmatic Helper\n\nContrast ratios cannot be eyeballed. The AA line sits at 4.5:1, and `#777777`\non white is 4.478 (fails) while `#767676` is 4.54 (passes) — no amount of\nlooking at a screenshot separates those. Compute them:\n\n```bash\nnpx --yes notugly fix \"#8ab4f8\" \"#ffffff\"     # ratio, APCA, and the nearest passing colour\nnpx --yes notugly onepager <url> --out review.html   # every pairing, printable\nnpx --yes notugly vision                      # which colours merge for colour-blind viewers\n```\n\n`notugly fix` returns the ratio, the APCA lightness contrast, and the closest\ncolour to the one already chosen that passes — same hue, same chroma. Paste\nthose numbers into the tables below rather than estimating them.\n\nDeterministic, zero dependencies, and **no model call** — so it costs nothing to\nrun and gives the same answer every time.\n\n**For 1.4.3 Contrast (Minimum) and 1.4.11 Non-text Contrast**, every row in the\nremediation table should carry a measured ratio, not an assessment. If the user\nsupplied a screenshot rather than hex values, say so explicitly in the audit —\nan inferred ratio is not an audit finding.\n\n## Output Structure\n\n---\n\n# Accessibility Audit: [Component or Screen Name]\n**Target standard:** WCAG 2.2 Level [AA]\n**Platform:** [Platform]\n**Date:** [Date]\n\n---\n\n## Audit Summary\n\n| Category | Issues Found | Critical | Moderate | Minor |\n|---|---|---|---|---|\n| Perceivable | | | | |\n| Operable | | | | |\n| Understandable | | | | |\n| Robust | | | | |\n| **Total** | | | | |\n\n**Overall compliance status:** ✅ Compliant / 🟡 Minor issues / 🔴 Fails AA standard\n\n---\n\n## Perceivable\n\n### 1.1 Text Alternatives\n- [ ] All images have descriptive alt text (not filename or \"image\")\n- [ ] Decorative images have `alt=\"\"` to be skipped by screen readers\n- [ ] Icons without visible labels have accessible names\n- [ ] Complex images (charts, diagrams) have extended descriptions\n\n**Issues found:** [List specific issues or \"None\"]\n\n### 1.3 Adaptable\n- [ ] Content structure uses semantic HTML (headings, lists, landmarks) — not just visual formatting\n- [ ] Reading order in DOM matches visual order\n- [ ] Form inputs have associated labels (not placeholder text as label)\n- [ ] Data tables have proper headers and scope\n\n**Issues found:**\n\n### 1.4 Distinguishable\n- [ ] Text contrast ratio ≥ 4.5:1 (normal text) or ≥ 3:1 (large text 18px+)\n- [ ] UI component contrast ratio ≥ 3:1 against background\n- [ ] Information is not conveyed by colour alone\n- [ ] Text can be resized to 200% without loss of content\n- [ ] No content that auto-plays audio\n\n**Issues found:**\n\n---\n\n## Operable\n\n### 2.1 Keyboard Accessible\n- [ ] All interactive elements are reachable by keyboard (Tab key)\n- [ ] No keyboard traps\n- [ ] Custom components have keyboard interactions (arrow keys for menus, Escape to close modals)\n- [ ] Skip navigation link available for pages with repeated navigation\n\n**Issues found:**\n\n### 2.4 Navigable\n- [ ] Focus is visible at all times (not removed with `outline: none` without replacement)\n- [ ] Focus order is logical and predictable\n- [ ] Page/screen has a descriptive title\n- [ ] Link text is descriptive (not \"click here\" or \"read more\")\n- [ ] Headings are hierarchical (H1 → H2 → H3, no skips)\n\n**Issues found:**\n\n### 2.5 Input Modalities\n- [ ] Touch targets are at least 44x44px\n- [ ] No functionality requires complex gestures (pinch, multi-touch) without a simple alternative\n- [ ] Motion or dragging interactions have button alternatives\n\n**Issues found:**\n\n---\n\n## Understandable\n\n### 3.1 Readable\n- [ ] Language of the page is set (`lang` attribute)\n- [ ] Unusual words, abbreviations, or jargon are explained\n\n### 3.2 Predictable\n- [ ] Navigation is consistent across screens\n- [ ] Components behave consistently (same button does the same thing)\n- [ ] No unexpected context changes on focus or input\n\n### 3.3 Input Assistance\n- [ ] Error messages identify the field and describe the error in plain language (not just \"Invalid input\")\n- [ ] Required fields are labelled (not just with colour or asterisk alone)\n- [ ] Forms provide suggestions for correcting errors where possible\n\n**Issues found:**\n\n---\n\n## Robust\n\n### 4.1 Compatible\n- [ ] HTML is valid and well-structured\n- [ ] ARIA roles and attributes are used correctly (not to fix broken semantics)\n- [ ] Status messages (success, error, loading) are announced to screen readers without focus change\n\n**Issues found:**\n\n---\n\n## Prioritised Remediation List\n\n| Priority | Issue | WCAG Criterion | Fix | Effort |\n|---|---|---|---|---|\n| 🔴 Critical | [Issue] | [e.g. 1.4.3 Contrast] | [Specific fix] | [Low/Med/High] |\n| 🟡 Moderate | [Issue] | | | |\n| 🟢 Minor | [Issue] | | | |\n\n**Priority definitions:**\n- 🔴 Critical: Blocks access for users with disabilities. Legal risk. Fix before launch.\n- 🟡 Moderate: Significant friction. Fix in next sprint.\n- 🟢 Minor: Best practice. Address in roadmap.\n\n---\n\n## Quick Wins (Fix in < 1 hour)\n\n[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.]\n\n---\n\n## Testing Recommendations\n\n- **Manual keyboard test:** Tab through the entire flow. Can you complete every task without a mouse?\n- **Screen reader test:** VoiceOver (Mac/iOS), NVDA or JAWS (Windows). Is every piece of content and every action accessible?\n- **Colour contrast check:** Use Stark (Figma plugin) or WebAIM Contrast Checker\n- **Automated scan:** Axe DevTools or Lighthouse accessibility audit (catches ~30% of issues automatically)\n\n---\n\n## Quality Checks\n\n- [ ] Issues are mapped to specific WCAG criteria\n- [ ] Every critical issue has a specific fix recommendation\n- [ ] Quick wins are separated from larger fixes\n- [ ] Effort estimates are included for prioritisation\n- [ ] Testing recommendations are included\n\n## Anti-Patterns\n\n- [ ] Do not rely solely on automated scanning tools — automated checks catch ~30% of issues; manual keyboard and screen reader testing is required\n- [ ] Do not label an issue \"minor\" simply because it only affects a small percentage of users — for those users it may block all access\n- [ ] Do not add ARIA roles to fix broken semantics — use correct semantic HTML first; ARIA is a last resort\n- [ ] Do not confuse colour contrast of text with colour contrast of UI components — they have different minimum ratios (4.5:1 vs 3:1)\n- [ ] Do not audit only the happy path — error states, empty states, and loading states must also meet accessibility requirements\n\n## Example Trigger Phrases\n\n- \"Audit this design for accessibility\"\n- \"Check WCAG compliance for [screen/component]\"\n- \"Give me an a11y audit of [UI description]\"\n- \"What accessibility issues does this design have?\"","author":"@mohitagw15856","ownerProfile":null,"authorContacts":null,"sourceUrl":"https://github.com/mohitagw15856/pm-claude-skills/tree/main/exports/openclaw/accessibility-audit","license":"MIT","category":"review","lang":"en","tokens":1837,"stars":0,"calls30d":2,"claimed":false,"visibility":"public","origin":"crawler","version":"0.1.0","createdAt":"2026-08-22","updatedAt":"2026-08-22","files":[],"requires":{"mcp":[],"tools":[]},"safety":{"flags":[],"scannedAt":"2026-08-22","hasScripts":false,"networkEndpoints":[]}}