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
Decision gist · record as of 2026-07-27
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.
Use it when
- frontend-a11y covers ARIA attributes best practices by teaching you when and how to apply roles, properties.
- frontend-a11y provides patterns for implementing keyboard navigation and focus management by teaching you to handle keyboard events.
Verify before relying
Read SKILL.md below before installing (1 file). Open directory: indexed for reading, not audited.
Install
affaan-m/ECC/frontend-a11y · repository language: JavaScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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?
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.
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>withonClick - 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)
File tree — 1 file
skills/frontend-a11y/SKILL.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Build accessible React/Next.js forms with proper labels, error messaging, and validation”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill equips you to systematically evaluate web applications for accessibility compliance, pinpointing WCAG 2.1 violations and usability barriers that affect users with disabilities. It provides structured auditing capabilities to assess color contrast, keyboard navigation, semantic markup, and assistive technology compatibility, helping teams build more inclusive digital experiences.
This skill equips developers with the knowledge and techniques needed to design and build web applications that meet WCAG 2.1 AA accessibility standards. Learn how to identify barriers, implement inclusive patterns, and verify compliance across your projects. Gain hands-on experience making digital experiences usable for everyone.
This skill equips you to evaluate and improve digital experiences for users with disabilities, ensuring your interfaces meet modern accessibility standards. Leverage WCAG 2.2 guidelines and assistive technology best practices to create inclusive web applications that work for everyone.
This skill helps you evaluate your website's accessibility posture by detecting common compliance violations and usability barriers. It surfaces issues that impact visitors with disabilities, then provides clear recommendations to improve inclusivity and meet standards like WCAG.
Master accessible form design by implementing WCAG 2.2 AA standards, semantic HTML, and ARIA attributes that work across assistive technologies. Learn keyboard navigation patterns, error handling, and validation techniques that ensure your forms remain usable for everyone, regardless of ability or device.
This skill equips developers with practical guidance on WCAG standards and techniques for creating accessible web interfaces. Explore proven patterns and implementation strategies that ensure your components work for all users, regardless of ability or assistive technology.