Web Accessibility

Here's a solid reference for implementing WCAG 2.1 accessibility patterns. You get working examples for common ARIA patterns like modals and navigation menus, a focus trap implementation that handles Tab and Escape keys properly, and form validation with aria-invalid and role="alert". The color contrast section includes actual functions to calculate luminance ratios, which is helpful when you need to programmatically check if colors meet AA standards. It also shows you how to set up axe-core for automated testing. The examples are React/TypeScript heavy, so if you're working in vanilla JS or another framework you'll need to adapt the patterns, but the ARIA attributes and keyboard handling logic translate directly.

skills.sh installs: 459
GitHub stars: 296
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hoodini/ai-agents-skills --skill web-accessibility --agent claude-code

Installs into .claude/skills of the current project.

Files

Web Accessibility (WCAG 2.1)

Build accessible web applications that work for everyone.

ARIA Patterns

Button

<button
  type="button"
  aria-pressed={isPressed}
  aria-disabled={isDisabled}
  onClick={handleClick}
>
  Toggle Feature
</button>

Modal Dialog

<div
  role="dialog"
  aria-modal="true"
  aria-labelledby="modal-title"
  aria-describedby="modal-description"
>
  <h2 id="modal-title">Confirm Action</h2>
  <p id="modal-description">Are you sure you want to proceed?</p>
  <button onClick={onConfirm}>Confirm</button>
  <button onClick={onCancel}>Cancel</button>
</div>

<nav aria-label="Main navigation">
  <ul role="menubar">
    <li role="none">
      <a role="menuitem" href="/home">Home</a>
    </li>
    <li role="none">
      <button
        role="menuitem"
        aria-haspopup="true"
        aria-expanded={isOpen}
      >
        Products
      </button>
      {isOpen && (
        <ul role="menu" aria-label="Products submenu">
          <li role="none">
            <a role="menuitem" href="/products/new">New</a>
          </li>
        </ul>
      )}
    </li>
  </ul>
</nav>