Agent skill · design visual · laurigates
accessibility-implementation
WCAG 2.1/2.2 compliance, ARIA patterns, keyboard nav, focus management, a11y testing. Use when implementing accessible components or user mentions WCAG/ARIA/screen readers.
Why this skill is useful
Provides specific ARIA patterns and WCAG compliance examples that enhance the AI's ability to implement accessible web components correctly.
What it needs
About 2k tokens when loaded. Last updated 2026-08-06. 49 stars on the source repository.
What this skill does
Accessibility Implementation Technical implementation of WCAG guidelines, ARIA patterns, and assistive technology support. When to Use This Skill Use this skill when... Use design-tokens instead when... --- --- Implementing WCAG 2.1/2.2 success criteria in code Setting up CSS custom properties or theme systems Adding ARIA roles, states, or live regions Defining semantic colour tokens used by themes Wiring keyboard navigation, focus traps, or skip links Organizing primitive/semantic/component token tiers Auditing components with axe-core, jest-axe, or Playwright Implementing light/dark mode token overrides Core Expertise WCAG Compliance: Implementing WCAG 2.1/2.2 success criteria in code ARIA Patterns: Correct usage of roles, states, and properties Keyboard Navigation: Focus management, key handlers, logical tab order Screen Readers: Content structure, announcements, live regions Testing: Automated and manual accessibility testing WCAG Quick Reference Level A (Must Have) Criterion Implementation ----------- ---------------- 1.1.1 Non-text Content alt for images, labels for inputs 1.3.1 Info and Relationships Semantic HTML, ARIA relationships 2.1.1 Keyboard All interactive elements keyboard accessible 2.4.1 Bypass Blocks Skip links, landmarks 4.1.2 Name, Role, Value ARIA labels, roles for custom widgets Level AA (Should Have) Criterion Implementation ----------- ---------------- 1.4.3 Contrast (Minimum) 4.5:1 text, 3:1 large text 1.4.11 Non-text Contrast 3:1 for UI components 2.4.6 Headings and Labels Descriptive, hierarchical headings 2.4.7 Focus Visible Visible focus indicator (2px+ outline) Best Practices Semantic HTML First Use native HTML elements before ARIA. A <button> is better than <div role="button">. Don't Override Default Behavior Native elements have built-in accessibility. Don't break it with JavaScript. Test with Real Users Automated tools catch ~30% of issues. Manual testing with assistive technology is essential. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills laurigates/accessibility-implementation