skills.rest
vladolaru
vladolaruCOMMUNITY
Explore all skills by this author →
Website𝕏@vladpotterGitHub

accessible-frontend-dev

Implement ARIA, keyboard, and focus management patterns for React and HTML components.

6|1|Updated Dec 8, 2025
Search Tags:#a11y#frontend#react#focus#keyboard#aria#accessible
One-click install
npx skills add https://github.com/vladolaru/claude-code-plugins --skill accessible-frontend-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessible-frontend-dev
Source: https://github.com/vladolaru/claude-code-plugins/tree/main/plugins/pirategoat-tools/skills/accessible-frontend-dev
Command: npx skills add https://github.com/vladolaru/claude-code-plugins --skill accessible-frontend-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This skill codifies accessible frontend dev practices, ensuring ARIA, keyboard navigation, and focus management are applied by default to React/HTML components.

Core Features & Use Cases

  • Enforces semantic HTML and ARIA patterns for common widgets (modals, menus, tabs, tooltips, forms)
  • Provides decision trees, guidelines, and a pattern reference to guide accessible UI implementation across React and plain HTML/CSS
  • Helps teams maintain WCAG-aligned practices, with explicit focus management and screen-reader announcements

Quick Start

Start by applying accessible frontend patterns to new or existing interactive components to ensure keyboard operability and screen-reader compatibility.

Frequently Asked Questions about accessible-frontend-dev

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

FAQPage Schema
How do I implement focus trapping and keyboard navigation in React modals?▼

To implement focus trapping and keyboard navigation in React modals, apply semantic HTML structures alongside ARIA patterns that enforce focus management and screen-reader compatibility for interactive UI elements.

What is the best way to add ARIA labels and live regions to frontend components?▼

Adding ARIA labels and live regions to frontend components involves applying pattern-based references that satisfy WCAG-aligned practices, ensuring dynamic content changes are properly announced to screen readers by default.

Can I use these accessible frontend patterns with plain HTML and CSS, or is it only for React?▼

These accessible frontend patterns work across both React and plain HTML/CSS contexts, providing decision trees and guidelines to guide accessible UI implementation for interactive widgets regardless of the chosen frontend framework.

How do I ensure keyboard operability for interactive widgets like tabs and tooltips?▼

Ensuring keyboard operability for interactive widgets like tabs and tooltips requires codifying accessible frontend dev practices that apply ARIA patterns and explicit focus management by default during component construction.

What are common limitations when retrofitting existing components with WCAG-aligned focus management?▼

Limitations when retrofitting existing components with WCAG-aligned focus management arise from complex DOM structures that resist semantic HTML constraints, requiring careful refactoring to support proper ARIA labeling and keyboard interactions.

Related Skills

Explore More Software Engineering Skills→
JEO-tech-aiJEO-tech-ai
8

web-accessibility

Apply WCAG 2.1 guidelines to identify and fix accessibility gaps in web UIs.

Community
Advanced
leboncoinleboncoin
92

check-accessibility

Automate WCAG 2.1 AA accessibility testing of Spark UI components with Playwright.

Official
Intermediate
omanjayaomanjaya

tailwind-components

Generate reusable Tailwind CSS component patterns with accessible and responsive states.

Community
Basic
imkdwimkdw
1

Frontend Accessibility

Implement accessible React components with ARIA, keyboard navigation, and WCAG compliance.

Community
Intermediate