frontend-a11y

This skill equips you to construct inclusive web forms using React and Next.js, emphasizing semantic HTML structure and proper ARIA attributes. Learn to implement accessible error messaging, validation feedback, and label associations that meet WCAG standards and improve user experience across assistive technologies.

frontend-a11y teaches you to build accessible React/Next.js forms by pairing input elements with properly associated labels using htmlFor and id attributes, implementing clear error messaging with aria-describedby, and ensuring validation feedback is announced to screen readers. The skill emphasizes semantic HTML structure and ARIA attributes that meet WCAG standards, helping you create inclusive forms that work reliably across assistive technologies.

AI-generated summary based on this skill's SKILL.md

★ 234,207 ⁮ 35,692 MIT updated 2026-07-27 by affaan-m

Install

affaan-m/ECC/frontend-a11y · repository language: JavaScript

Manual (git clone) CLI (skillfed)coming soon

git clone https://github.com/affaan-m/ECC
cp -r ECC/skills/frontend-a11y ~/.claude/skills/frontend-a11y

Frequently asked questions

AI-generated answers based on this skill's SKILL.md and metadata

How do I make forms accessible in React and Next.js applications?

What are the best practices for using ARIA attributes correctly?

frontend-a11y covers ARIA attributes best practices by teaching you when and how to apply roles, properties, and states that enhance screen reader support without replacing semantic HTML. You'll learn to use aria-describedby for error messages, aria-live for dynamic content updates, and aria-label for icon buttons, ensuring your React components communicate their purpose and state accurately to users relying on assistive technologies.

How can I implement keyboard navigation and focus management in React components?

frontend-a11y provides patterns for implementing keyboard navigation and focus management by teaching you to handle keyboard events, manage focus programmatically in modals and dropdowns, and prevent keyboard traps. The skill covers focus management techniques specific to interactive components, ensuring users can navigate your React and Next.js applications efficiently using only the keyboard.

What should I check during a code review to ensure accessibility compliance?

frontend-a11y equips you with an a11y code review checklist covering semantic HTML validation, proper heading hierarchy, label associations, ARIA attribute usage, keyboard navigation support, and screen reader compatibility. You'll learn to identify and fix common accessibility anti-patterns and issues flagged in reviews, helping your team maintain WCAG compliance across React and Next.js projects.

How do I ensure screen reader support in Next.js applications?

frontend-a11y teaches screen reader support for Next.js by emphasizing semantic HTML elements, proper ARIA attributes, and accessible form patterns. The skill covers techniques for announcing dynamic content updates, managing focus in modals, labeling interactive elements, and structuring your application so screen readers can navigate and understand your content effectively.

What's the correct way to pair input elements with labels for accessibility?

frontend-a11y demonstrates that proper label pairing requires using the htmlFor attribute on label elements matched to the id of input fields, creating an explicit association that assistive technologies recognize. This semantic connection ensures screen readers announce labels correctly and expands the clickable area for users, improving both accessibility and usability of your React and Next.js forms.

SKILL.md

rendered from the published skill — quoted content, verbatim

Frontend Accessibility Patterns

Practical accessibility patterns for React and Next.js. Covers the issues most commonly flagged in code review: missing form labels, incorrect ARIA usage, non-semantic interactive elements, and broken keyboard navigation.

When to Activate

Building or reviewing form components (<input>, <select>, <textarea>)
Creating interactive elements (modals, dropdowns, tooltips, tabs)
Using <div> or <span> with onClick
Adding aria-* attributes to any element
Implementing keyboard navigation or focus management
Receiving accessibility feedback from code review tools (CodeRabbit, ESLint a11y)
Building components that must support screen readers

Form Accessibility

Missing htmlFor / id pairing and disconnected error messages are the most common issues flagged in code review.

Label Connection

```tsx // BAD: label has no

(truncated - see the full file via the links below)

Read as markdown · JSON record · Browse the source repository

File tree — 1 file

skills/frontend-a11y/SKILL.md

All skills by affaan-m → Best browser automation skills for AI agents - SkillFed →