skills.rest
gagandeepgill
gagandeepgillCOMMUNITY
Explore all skills by this author →
GitHub

frontend-a11y

Implements accessibility patterns for React and Next.js components including ARIA, forms, and keyboard navigation.

1|Updated Aug 31, 2026
Search Tags:#accessibility#a11y#screen reader#keyboard navigation#react#forms#aria
One-click install
npx skills add https://github.com/gagandeepgill/puzzle-game --skill frontend-a11y-gagandeepgill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-a11y
Source: https://github.com/gagandeepgill/puzzle-game/tree/main/.claude/skills/frontend-a11y
Command: npx skills add https://github.com/gagandeepgill/puzzle-game --skill frontend-a11y-gagandeepgill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Interactive React components frequently ship with accessibility defects: unlabeled form inputs, non-semantic clickable divs, broken keyboard navigation, and incorrect ARIA usage. This Skill provides reviewed, copy-ready patterns that fix the issues most commonly flagged in code review. ## Core Features & Use Cases - Form Accessibility: Correct htmlFor/id label pairing, aria-describedby error linking, aria-invalid state signaling, and required-field semantics. - ARIA and Semantics: Guidance on aria-label vs aria-labelledby, aria-live regions, aria-expanded/aria-controls, and when native HTML beats ARIA. - Keyboard and Focus: Complete keyboard-operable dropdown and combobox implementations, modal focus restoration, and reduced-motion support via prefers-reduced-motion. - Use Case: When building a login form or modal dialog in React, activate this Skill to get a complete accessible implementation with labels, error announcements, focus management, and Escape-key handling, plus a pre-submit checklist. ## Quick Start Review my React form component for accessibility issues and rewrite it with proper labels, ARIA attributes, and keyboard support.

Frequently Asked Questions about frontend-a11y

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

FAQPage Schema
How do I make a React form accessible to screen readers?▼

Connect every input to a label using htmlFor and matching id, mark required fields with required and aria-required, and link error messages with aria-describedby plus role="alert". Set aria-invalid when validation fails so screen readers announce the error state.

How to add keyboard navigation to a custom dropdown in React?▼

Use role="combobox" with aria-expanded, aria-haspopup="listbox", and tabIndex={0}, then handle ArrowUp, ArrowDown, Enter, Space, and Escape in onKeyDown. Render options in a ul with role="listbox" and li elements with role="option" and aria-selected.

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, avoiding duplicated content.

Why is onClick on a div an accessibility problem?▼

A div with onClick has no role, no keyboard focusability, and no accessible name, so keyboard and screen reader users cannot operate it. Use a native button element instead, which provides focus, Enter/Space activation, and correct semantics for free.

How do I manage focus when opening and closing a modal in React?▼

Store document.activeElement before opening, move focus into the modal container with tabIndex={-1}, and restore focus to the saved element on close. For full Tab/Shift+Tab trapping, use a library like focus-trap-react.

Does wrong ARIA hurt accessibility more than no ARIA?▼

Yes. Incorrect ARIA overrides native semantics and misleads assistive technologies, such as aria-hidden on focusable elements or aria-label on elements without a role. Prefer native HTML elements first and add ARIA only when native semantics are insufficient.

Related Skills

Explore More Software Engineering Skills→
starrank-softstarrank-soft

frontend-a11y

Implements WCAG-compliant React and Next.js UI patterns with ARIA, keyboard navigation, and focus management.

Official
Intermediate
samjhechtsamjhecht
4

frontend-accessibility-verification

Verify frontend UI accessibility compliance with axe-core, keyboard, screen reader, and Lighthouse audits.

Community
Advanced
180VRisLife180VRisLife

dsg-normalize

Normalize UI features to match design system tokens and patterns.

Community
Advanced
tranhieutttranhieutt
70

radix-ui-design-system

Build accessible Radix UI design systems with headless primitives.

Community
Advanced