Frontend Accessibility
Accessibility patterns for React and Next.js: semantic HTML, ARIA done right, form labeling, keyboard navigation, and focus management, with BAD/GOOD examples from real code reviews.
- What
- Accessibility patterns for React and Next.js: semantic HTML, ARIA done right, form labeling, keyboard navigation, and focus management, with BAD/GOOD examples from real code reviews.
- Cost
- Free
- Needs
- Use "Frontend Accessibility" with your Muse.
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Curated by Skill Harbor: practical accessibility patterns for React and Next.js that fix the issues most commonly flagged in code review: missing form labels, incorrect ARIA usage, non-semantic interactive elements, and broken keyboard navigation. Every pattern is shown as a BAD/GOOD pair: labels disconnected from inputs versus htmlFor/id pairing, visual-only asterisks versus required plus aria-required, orphaned error text versus aria-describedby linking, divs with onClick versus real buttons, and the same treatment for modals, dropdowns, tooltips, and tabs with proper focus management. It also covers when to reach for ARIA and when native HTML already does the job, so you stop sprinkling aria-* attributes that fight the platform. Use it when building or reviewing components, fixing a11y lint findings, or wiring keyboard support. By @affaan-m, listed here with credit to its creator. From the affaan-m/ECC repository (MIT). Honest caveats: patterns, not a substitute for testing with a real screen reader; accessibility needs vary by audience, validate with actual users when it matters. Skill Harbor never reviews the code, review it yourself before use.
Version:
Install
Copy the install package below, then paste it into MuseThe install prompt below already includes the vetting steps: your agent follows the community checklist before installing anything with executable code. Want more?
Use "Frontend Accessibility" with your Muse. Prerequisites: none to install. Pure guidance for React/Next.js work; have the component you want to check ready. 1. Open the skill: https://github.com/affaan-m/ECC/blob/main/skills/frontend-a11y/SKILL.md and copy the full SKILL.md text. 2. Paste it into a chat with Muse and add: "Review this component for accessibility issues: [paste component]." 3. Fix each BAD pattern it flags (labels, ARIA, keyboard, focus) before shipping. Tip: run it on forms, modals, dropdowns, and anything with onClick on a div. Safety: a skill is plain-text instructions; it runs nothing by itself. Test with a real screen reader for anything critical.
Saved to your recent installs. Find it anytime on /connect.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.