Frontend Accessibility Best Practices

A solid reference for keeping React components accessible without having to look up WCAG guidelines every time. Covers the practical stuff: semantic HTML landmarks, screen reader text with sr-only classes, ARIA live regions for dynamic content, keyboard navigation patterns, focus management in modals, and respecting reduced motion preferences. The examples are concrete and show both the wrong and right way to do things, which helps. Seven rules organized by priority, with references to react-aria-components doing the heavy lifting on modals and buttons. Most useful when you're building forms or interactive UI and want to catch accessibility issues during development rather than in an audit later.

skills.sh installs: 896
GitHub stars: 92
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add sergiodxa/agent-skills --skill frontend-accessibility-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Accessibility Best Practices

Accessibility patterns for building inclusive React applications following WCAG standards. Contains 7 rules across 4 categories focused on semantic HTML, screen reader support, keyboard navigation, and user preferences.

When to Apply

Reference these guidelines when:

Creating new UI components
Building forms and interactive elements
Adding dynamic content or notifications
Implementing navigation patterns
Reviewing code for accessibility

Rules Summary

Semantic HTML & Structure (HIGH)

semantic-html-landmarks - @rules/semantic-html-landmarks.md

Use semantic HTML elements for page structure.

// Bad: divs with class names
<div className="header">...</div>
<div className="nav">...</div>
<div className="content">...</div>

// Good: semantic elements
<header>...</header>
<nav aria-label={t("Primary")}>...</nav>
<main>...</main>
<footer>...</footer>