skills.rest
adriancodes
adriancodesCOMMUNITY
Explore all skills by this author →
GitHub

ecc-frontend-a11y

Implements accessible React and Next.js patterns for forms, ARIA, keyboard navigation, and focus management.

Updated Apr 18, 2025
Search Tags:#accessibility#keyboard navigation#react#next.js#forms#focus management#aria
One-click install
npx skills add https://github.com/adriancodes/dotfiles --skill ecc-frontend-a11y-adriancodes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ecc-frontend-a11y
Source: https://github.com/adriancodes/dotfiles/tree/main/dot_agents/skills/ecc-frontend-a11y
Command: npx skills add https://github.com/adriancodes/dotfiles --skill ecc-frontend-a11y-adriancodes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend components frequently fail accessibility review due to missing form labels, incorrect ARIA usage, non-semantic interactive elements, and broken keyboard navigation, leaving screen reader and keyboard users unable to use the interface. ## Core Features & Use Cases - Form Accessibility Patterns: Connect labels via htmlFor/id, link error messages with aria-describedby and role="alert", and signal required fields to assistive technology. - Semantic HTML and ARIA Guidance: Replace div onClick handlers with native buttons and anchors, and apply aria-label, aria-labelledby, aria-live, and aria-expanded correctly. - Keyboard, Focus, and Motion Support: Implement native select controls, modal dialogs with focus containment and restoration, and prefers-reduced-motion handling. - Use Case: When a code review flags a login form for missing label associations and unlinked error messages, apply the provided patterns to wire htmlFor/id pairs and aria-describedby error announcements. ## Quick Start Review my React form component for accessibility issues and fix the label, ARIA, and keyboard navigation problems.

Frequently Asked Questions about ecc-frontend-a11y

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I connect a label to an input in React?▼

Connect a label to an input by setting the label's htmlFor attribute to match the input's id attribute. This lets screen readers announce the label when the input receives focus, and clicking the label focuses the input.

How do I announce form validation errors to screen readers?▼

Link the error message to the input using aria-describedby pointing to the error element's id, set aria-invalid on the input, and give the error element role="alert" so screen readers announce it when it appears.

When should I use aria-label versus aria-labelledby?▼

Use aria-label with an inline string when no visible label text exists, such as icon-only buttons. Use aria-labelledby to reference another element's id when visible label text already exists on the page.

Can I use a div with onClick instead of a button?▼

A div with onClick lacks keyboard support, focusability, and an announced role, so it fails accessibility requirements. Use a native button element, which provides Enter/Space activation, focus, and correct screen reader announcements automatically.

How do I manage focus in a React modal dialog?▼

Use the native dialog element with showModal(), which provides focus containment and an inert background. Store the previously focused element on open and restore focus to it when the dialog closes, and handle Escape via onCancel.

How do I respect prefers-reduced-motion in React animations?▼

Create a hook that listens to the window.matchMedia query for prefers-reduced-motion and returns the user's setting. Conditionally disable transitions and animations when the user has requested reduced motion in their OS settings.

Related Skills

Explore More Software Engineering Skills→
curiositechcuriositech
181

recovery-coach-patterns

Enforce Next.js, API, React, and Drizzle ORM patterns for the Recovery Coach project.

Official
Intermediate
Camilo8902Camilo8902

accessibility-auditor

Audit web pages for WCAG 2.1 compliance with ARIA and keyboard navigation.

Community
Advanced
lovincyruslovincyrus

rams

Identify accessibility and visual design issues in UI components for WCAG compliance.

Community
Basic
MolcajeteAIMolcajeteAI
2

radix-ui-patterns

Generate accessible Radix UI component patterns with TypeScript examples.

Official
Intermediate