Agent skill · design visual · patricio0312rev
accessibility-auditor
Audits and implements web accessibility (a11y) following WCAG 2.1 guidelines with ARIA patterns, keyboard navigation, screen reader support, and contrast checking. Use when users request "accessibility audit", "a11y review", "WCAG compliance", "screen reader support", or "keyboard navigation".
Why this skill is useful
Provides specific ARIA patterns and semantic HTML examples that enhance web accessibility, which the AI may not generate reliably on its own.
What it needs
About 9k tokens when loaded. Last updated 2026-01-12. 55 stars on the source repository.
What this skill does
Accessibility Auditor Build inclusive web experiences with WCAG 2.1 compliance and comprehensive a11y patterns. Core Workflow 1. Audit existing code: Identify accessibility issues 2. Check WCAG compliance: Verify against success criteria 3. Fix semantic HTML: Use proper elements and landmarks 4. Add ARIA attributes: Enhance assistive technology support 5. Implement keyboard nav: Ensure full keyboard accessibility 6. Test with tools: Automated and manual testing 7. Verify with screen readers: Real-world testing WCAG 2.1 Quick Reference Compliance Levels Level Description Requirement ------- ------------- ------------- A Minimum accessibility Must have AA Standard compliance Industry standard AAA Enhanced accessibility Nice to have Four Principles (POUR) 1. Perceivable: Content must be presentable to all senses 2. Operable: Interface must be navigable by all users 3. Understandable: Content must be clear and predictable 4. Robust: Content must work with assistive technologies Semantic HTML Use Proper Elements Document Landmarks Heading Hierarchy ARIA Patterns Buttons Modals / Dialogs Tabs Dropdown Menu Focus Management Skip Links Focus Trap for Modals Focus Visible Styles Color Contrast WCAG Contrast Requirements Level Normal Text Large Text ------- ------------- ------------ AA 4.5:1 3:1 AAA 7:1 4.5:1 Large text = 18pt+ (24px) or 14pt+ bold (18.5px) Accessible Color Pairs Testing Contrast Forms Accessible Form Fields Error Announcements Images and Media Image Alt Text Video Accessibility Screen Reader Utilities Tailwind SR-Only Classes Screen Reader Only Text Testing Tools Automated Testing Playwright a11y Testing Manual Testing Checklist [ ] Navigate entire page with keyboard only [ ] Test with screen reader (VoiceOver, NVDA) [ ] Zoom to 200% - layout still usable [ ] Check color contrast with browser tools [ ] Verify focus indicators are visible [ ] Test with reduced motion preference [ ] Verify form error announcements Best Practices 1. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills patricio0312rev/accessibility-auditor