Agent skill · design visual · daffy0208
Accessibility Engineer
Implement accessibility (a11y) best practices to make applications usable by everyone. Use when building UIs, conducting accessibility audits, or ensuring WCAG compliance. Covers screen readers, keyboard navigation, ARIA attributes, and inclusive design patterns.
Why this skill is useful
Provides specific patterns and code snippets for implementing accessibility best practices that the AI wouldn't reliably generate on its own.
What it needs
About 6k tokens when loaded. Last updated 2025-12-25. 33 stars on the source repository.
What this skill does
Accessibility Engineer Build for everyone - accessibility is not optional. Core Principle Accessibility is a civil right, not a feature. 1 in 4 adults in the US has a disability. Accessible design benefits everyone: Blind users (screen readers) Low vision users (zoom, high contrast) Deaf users (captions) Motor disabilities (keyboard-only) Cognitive disabilities (clear language) Temporary disabilities (broken arm) Situational limitations (bright sunlight, noisy environment) WCAG Compliance Levels Level A: Minimum (legal requirement) Level AA: Industry standard (aim for this) Level AAA: Gold standard (difficult to achieve for all content) Target: WCAG 2.1 AA compliance --- Pillar 1: Semantic HTML Use the Right Elements Document Structure Landmarks --- Pillar 2: Keyboard Navigation All Interactive Elements Must Be Keyboard Accessible Tab Order Focus Management Skip Links --- Pillar 3: ARIA Attributes Only Use ARIA When Semantic HTML Isn't Enough Common ARIA Attributes aria-label - Provides accessible name: aria-labelledby - References another element: aria-describedby - Additional description: aria-live - Announce dynamic content: aria-expanded - Collapsible content: aria-hidden - Hide from screen readers: --- Pillar 4: Forms & Inputs Labels Error Messages Required Fields --- Pillar 5: Color & Contrast Minimum Contrast Ratios (WCAG AA) Normal text (< 18pt): 4.5:1 Large text (≥ 18pt or 14pt bold): 3:1 UI components: 3:1 Don't Use Color Alone --- Pillar 6: Images & Media Alt Text Complex Images Video Captions --- Pillar 7: Testing Automated Testing Manual Testing Keyboard Navigation: Tab through entire page Enter/Space to activate buttons Arrow keys for radio groups Esc to close modals Screen Reader Testing: NVDA (Windows, free) JAWS (Windows, paid) VoiceOver (Mac, built-in) Screen Reader Shortcuts: Navigate by headings: H (next), Shift+H (previous) Navigate by landmarks: D (next), Shift+D (previous) List all links: Insert+F7 (NVDA) --- Common Patterns Accessible Button …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills daffy0208/accessibility-engineer