Agent skill · design visual · eyadsibai
Accessibility
This skill should be used when the user asks about "accessibility", "a11y", "WCAG", "screen readers", "keyboard navigation", "ARIA", "accessible design", "inclusive design", or mentions making apps accessible.
Why this skill is useful
Provides specific HTML and CSS patterns for accessible design that the AI wouldn't reliably generate on its own.
What it needs
About 2k tokens when loaded. Last updated 2026-01-15. 7 stars on the source repository.
What this skill does
Accessibility (a11y) Guidance for creating accessible web applications following WCAG guidelines. Core Principles (POUR) 1. Perceivable: Content can be perceived by all senses 2. Operable: Interface can be operated by everyone 3. Understandable: Content and UI are understandable 4. Robust: Works with assistive technologies Quick Wins Images Buttons & Links Forms Headings Color & Contrast Minimum Contrast Ratios Element WCAG AA WCAG AAA --------- --------- ---------- Normal text 4.5:1 7:1 Large text (18px+) 3:1 4.5:1 UI components 3:1 3:1 Don't Rely on Color Alone Keyboard Navigation Focus Management Tab Order Keyboard Shortcuts Tab: Move forward Shift+Tab: Move backward Enter/Space: Activate Escape: Close/cancel Arrow keys: Navigate within components ARIA Basics When to Use ARIA 1. First: Use semantic HTML 2. Then: Add ARIA only if needed Common ARIA Attributes Component Patterns Modal Dialog Tabs Testing Checklist Automated Testing [ ] Run axe or Lighthouse accessibility audit [ ] Check color contrast with WebAIM checker [ ] Validate HTML Manual Testing [ ] Navigate with keyboard only (no mouse) [ ] Test with screen reader (VoiceOver, NVDA) [ ] Zoom to 200% - is content usable? [ ] Disable CSS - is content logical? Screen Reader Testing Quick Reference Issue Solution ------- ---------- Image without alt Add descriptive alt text Low contrast Increase to 4.5:1 minimum Missing labels Add <label> or aria-label No focus visible Add visible focus styles Mouse-only Add keyboard support Auto-playing media Add pause controls
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills eyadsibai/accessibility