{"enrichment":{"faq":[{"a":"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.","q":"How do I make forms accessible in React and Next.js applications?"},{"a":"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.","q":"What are the best practices for using ARIA attributes correctly?"},{"a":"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.","q":"How can I implement keyboard navigation and focus management in React components?"},{"a":"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.","q":"What should I check during a code review to ensure accessibility compliance?"},{"a":"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.","q":"How do I ensure screen reader support in Next.js applications?"},{"a":"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.","q":"What's the correct way to pair input elements with labels for accessibility?"}],"shadow_tags":["wcag-compliance","screen-reader-support","keyboard-accessible","form-validation","focus-management","aria-patterns","semantic-markup","inclusive-design"],"summary_rewrite":"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."},"files":[{"bytes":12724,"path":"skills/frontend-a11y/SKILL.md","sha256":"62afdfd4e616ed21bf9037d47f771f3504d21838c898b9e9de8ac0da9b0bf3f7","url":"https://skillfed.io/files/affaan-m/ECC/frontend-a11y/5badcc8a/SKILL.md"}],"id":"affaan-m/ECC/frontend-a11y","links":{"html":"https://skillfed.io/affaan-m/ECC/frontend-a11y","md":"https://skillfed.io/affaan-m/ECC/frontend-a11y.md","repo":"https://github.com/affaan-m/ECC"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":35692,"language":"JavaScript","last_updated":"2026-07-27","license":"MIT","name":"frontend-a11y","publisher":"affaan-m","stars":234207},"relations":{"similar":[{"id":"patricio0312rev/skills/accessibility-auditor"},{"id":"travisjneuman/.claude/accessibility-a11y"},{"id":"rohitg00/awesome-claude-code-toolkit/accessibility-wcag"},{"id":"daffy0208/ai-dev-standards/accessibility-engineer"},{"id":"hoodini/ai-agents-skills/web-accessibility"},{"id":"Bbeierle12/Skill-MCP-Claude/form-accessibility"},{"id":"s-hiraoku/synapse-a2a/web-accessibility"},{"id":"jamesrochabrun/skills/frontend-designer"},{"id":"DanielPodolsky/ownyourcode/accessibility"},{"id":"AsyrafHussin/agent-skills/web-design-guidelines"}]},"slug":{"owner":"affaan-m","repo":"ECC","skill":"frontend-a11y"},"version":"5badcc8a"}