Agent skill · design visual · davila7
accessibility
Audit and improve web accessibility following WCAG 2.1 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigation", or "make accessible".
Why this skill is useful
Provides specific guidelines and code examples for WCAG 2.1 compliance that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2026-08-06. 30,138 stars on the source repository.
What this skill does
Accessibility (a11y) Comprehensive accessibility guidelines based on WCAG 2.1 and Lighthouse accessibility audits. Goal: make content usable by everyone, including people with disabilities. WCAG Principles: POUR Principle Description ----------- ------------- Perceivable Content can be perceived through different senses Operable Interface can be operated by all users Understandable Content and interface are understandable Robust Content works with assistive technologies Conformance levels Level Requirement Target ------- ------------- -------- A Minimum accessibility Must pass AA Standard compliance Should pass (legal requirement in many jurisdictions) AAA Enhanced accessibility Nice to have --- Perceivable Text alternatives (1.1) Images require alt text: Icon buttons need accessible names: Visually hidden class: Color contrast (1.4.3, 1.4.6) Text Size AA minimum AAA enhanced ----------- ------------ -------------- Normal text (< 18px / < 14px bold) 4.5:1 7:1 Large text (≥ 18px / ≥ 14px bold) 3:1 4.5:1 UI components & graphics 3:1 3:1 Don't rely on color alone: Media alternatives (1.2) --- Operable Keyboard accessible (2.1) All functionality must be keyboard accessible: No keyboard traps: Focus visible (2.4.7) Skip links (2.4.1) Timing (2.2) Motion (2.3) --- Understandable Page language (3.1.1) Consistent navigation (3.2.3) Form labels (3.3.2) Error handling (3.3.1, 3.3.3) --- Robust Valid HTML (4.1.1) ARIA usage (4.1.2) Prefer native elements: When ARIA is needed: Live regions (4.1.3) --- Testing checklist Automated testing Manual testing [ ] Keyboard navigation: Tab through entire page, use Enter/Space to activate [ ] Screen reader: Test with VoiceOver (Mac), NVDA (Windows), or TalkBack (Android) [ ] Zoom: Content usable at 200% zoom [ ] High contrast: Test with Windows High Contrast Mode [ ] Reduced motion: Test with prefers-reduced-motion: reduce [ ] Focus order: Logical and follows visual order Screen reader commands Action VoiceOver (Mac) NVDA (Windows) ------ …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills davila7/accessibility