Frontend Accessibility

This covers the fundamentals of WCAG compliance with practical implementations for semantic HTML, ARIA attributes, keyboard navigation, and screen reader support. You'd reach for this when you need to meet accessibility standards or build interfaces that work for everyone, not just mouse users with perfect vision. The reference guides break down specific areas like color contrast, live announcements, and testing workflows. The best part is it pushes you toward proper semantic structure from the start rather than bolting on aria-labels to divs later. Light on the "why accessibility matters" evangelism, heavy on the actual code patterns you need to ship compliant interfaces.

skills.sh installs: 604
GitHub stars: 379
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add aj-geddes/useful-ai-prompts --skill frontend-accessibility --agent claude-code

Installs into .claude/skills of the current project.

Files

Overview

Build accessible web applications following WCAG guidelines with semantic HTML, ARIA attributes, keyboard navigation, and screen reader support for inclusive user experiences.

When to Use

Compliance with accessibility standards
Inclusive design requirements
Screen reader support
Keyboard navigation
Color contrast issues

Quick Start

Minimal working example:

<!-- Good semantic structure -->
<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main>
  <article>
    <header>
      <h1>Article Title</h1>
      <time datetime="2024-01-15">January 15, 2024</time>
    </header>
    <p>Article content...</p>
  </article>

SKILL.md on GitHub