kienbui1995/accessibility-compliance
skills/accessibility-compliance/SKILL.md
Use when implementing or reviewing accessibility - WCAG compliance, screen reader support, keyboard navigation, a11y testing
testing
Updated Apr 23, 2026
$ install --global
skillsauthnpx skillsauth add kienbui1995/magic-powers accessibility-complianceInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 24, 2026, 12:16 AM356.7s1 file scanned
SKILL.md
- name:
- accessibility-compliance
- description:
- Use when implementing or reviewing accessibility - WCAG compliance, screen reader support, keyboard navigation, a11y testing
Accessibility Compliance
Overview
Accessibility isn't optional — it's a legal requirement in many jurisdictions and affects ~15% of users. Build it in from the start, not as an afterthought.
When to Use
- Building new UI components
- Reviewing existing interfaces for a11y
- Fixing accessibility audit findings
- Setting up automated a11y testing
WCAG 2.1 Quick Reference (Level AA)
Perceivable
- Color contrast — 4.5:1 for normal text, 3:1 for large text
- Alt text — all images have descriptive alt (or
alt=""for decorative) - Captions — video has captions, audio has transcripts
- Don't rely on color alone — use icons, patterns, or text too
Operable
- Keyboard navigable — all interactive elements reachable via Tab
- Focus visible — clear focus indicator (never
outline: nonewithout replacement) - Skip links — "Skip to main content" link at top
- No keyboard traps — user can always Tab away from any element
Understandable
- Labels — every form input has a visible
<label> - Error messages — clear, specific, associated with the field
- Consistent navigation — same layout across pages
- Language —
<html lang="en">set correctly
Robust
- Semantic HTML — use
<button>,<nav>,<main>, not<div onclick> - ARIA when needed —
aria-label,aria-expanded,rolefor custom widgets - Valid HTML — passes W3C validator
Testing Checklist
# Automated
npx axe-core # or browser extension
npx pa11y http://localhost:3000
# Manual
- Tab through entire page — can you reach everything?
- Screen reader test (VoiceOver/NVDA) — does it make sense?
- Zoom to 200% — does layout break?
- Disable CSS — is content still readable?
Common Fixes
| Issue | Fix |
|-------|-----|
| Missing alt text | Add descriptive alt attribute |
| Low contrast | Increase to 4.5:1 ratio minimum |
| No focus styles | Add :focus-visible styles |
| Click-only interactions | Add keyboard handlers (onKeyDown) |
| <div> as button | Replace with <button> |
| Missing form labels | Add <label htmlFor="..."> |
Integration
- magic-powers:ci-cd-pipeline — add axe-core to CI pipeline
- magic-powers:requesting-code-review — include a11y in review checklist
Related Skills
kienbui1995/xr-interface-design
content-media
VerifiedTrustedCommunity
Use when designing for XR (AR/VR/MR), choosing interaction modes, or adapting 2D UI patterns for spatial computing
SKILL.mdUpdated Apr 24, 2026
kienbui1995/writing-skills
testing
VerifiedTrustedCommunity
Use when creating new skills, editing existing skills, or verifying skills work before deployment
SKILL.mdUpdated Apr 24, 2026
kienbui1995/writing-plans
development
VerifiedTrustedCommunity
Use when you have a spec or requirements for a multi-step task, before touching code
SKILL.mdUpdated Apr 24, 2026
kienbui1995/workflow-templates
development
VerifiedTrustedCommunity
Use when executing a structured workflow — select and run a feature, bugfix, refactor, research, or incident template with correct agent and model assignments per phase.
SKILL.mdUpdated Apr 24, 2026