Agent skill · design visual · aiskillstore
accessibility-fundamentals
Auto-invoke when reviewing JSX with interactive elements, forms, buttons, or navigation. Enforces WCAG compliance and inclusive design.
Why this skill is useful
Provides specific guidelines and anti-patterns for ensuring WCAG compliance in JSX, which the AI may not generate reliably on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Accessibility Fundamentals Review "Accessibility is not a feature, it's a requirement. If 15% of users can't use your app, you've failed 15% of users." When to Apply Activate this skill when: Reviewing JSX with buttons, links, or forms Seeing custom interactive components Forms with inputs and labels Navigation menus Modal dialogs Any user interaction code --- The Accessibility Checklist Must Have (Every Interactive Element) [ ] Keyboard accessible — All actions work with Tab + Enter/Space [ ] Focus visible — Clear visual indicator of focused element [ ] Semantic elements — <button> not <div onClick> [ ] Form labels — Every input has an associated <label> [ ] Alt text — Images have descriptive alt attributes [ ] Sufficient contrast — Text readable against background (4.5:1 ratio) Should Have (Complex Interactions) [ ] ARIA labels — Icon-only buttons have aria-label [ ] Focus trapping — Modals trap focus until closed [ ] Skip links — "Skip to main content" for keyboard users [ ] Live regions — Dynamic content announced to screen readers [ ] Error messages — Linked to inputs with aria-describedby Never Do [ ] Rely on color alone — Color should not be the only indicator [ ] Remove focus outlines — Never outline: none without replacement [ ] Use divs for buttons — Use semantic <button> or <a> [ ] Trap users — Always provide escape from modals/menus --- Common Mistakes (Anti-Patterns) 1. Div as Button Why it matters: <div onClick> doesn't receive keyboard focus, doesn't respond to Enter/Space, and isn't announced as a button by screen readers. 2. Missing Form Labels 3. Icon-Only Buttons 4. Removed Focus Styles 5. Non-Descriptive Link Text 6. Missing Heading Hierarchy --- Socratic Questions Ask these instead of giving answers: 1. Keyboard: "Can you complete this action using only the keyboard?" 2. Focus: "If I tab through the page, can I see where I am?" 3. Semantics: "What does a screen reader announce for this element?" 4. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/accessibility-fundamentals