skills.rest
DevanB
DevanBCOMMUNITY
Explore all skills by this author →
Website𝕏@devanbeitelGitHub

Frontend Accessibility

Identify and remediate accessibility issues in React UI components.

Updated Nov 15, 2025
Search Tags:#inclusive design#accessibility#a11y#frontend#react#ui/ux#semantic html
One-click install
npx skills add https://github.com/DevanB/lucidlog --skill frontend-accessibility-devanb
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: Frontend Accessibility
Source: https://github.com/DevanB/lucidlog/tree/main/.claude/skills/frontend-accessibility
Command: npx skills add https://github.com/DevanB/lucidlog --skill frontend-accessibility-devanb

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the challenge of creating user interfaces that are usable by everyone, including individuals with disabilities. It ensures your frontend applications meet accessibility standards, expanding your user base and complying with legal requirements, making your product truly inclusive.

Core Features & Use Cases

  • Semantic HTML: Guides the use of appropriate HTML elements for structure and meaning.
  • Keyboard Navigation & Screen Reader Support: Ensures all interactive elements are navigable and understandable without a mouse.
  • Use Case: When developing a new modal component, use this skill to ensure the AI implements proper ARIA attributes, manages focus correctly, and provides sufficient color contrast for text, making it accessible to screen reader users and those with visual impairments.

Quick Start

Ensure the new navigation menu component adheres to frontend accessibility standards, including keyboard navigation and ARIA attributes.

Frequently Asked Questions about Frontend Accessibility

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

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

Screen reader accessibility in React requires semantic HTML elements, ARIA attributes for interactive components, and proper label associations. Apply this Skill to .tsx/.jsx files to enforce correct element usage, add landmark roles, and ensure focus management in modals, menus, and dialogs for full screen reader compatibility.

What makes a UI component keyboard navigable?▼

Keyboard navigation requires all interactive elements to be reachable via Tab, with visible focus indicators and proper event handling. This Skill identifies gaps in React components and ensures focus management, semantic structure, and keyboard event handling so users can operate without a mouse.

Do I need ARIA attributes for accessible forms?▼

ARIA attributes supplement semantic HTML but aren't always necessary; semantic labels and proper HTML structure are the foundation. This Skill checks label associations, form semantics, and ARIA usage in React to enforce WCAG-compliant forms that work with assistive technology.

How do I ensure sufficient color contrast in my UI?▼

Color contrast accessibility means text and interactive elements must meet WCAG standards so users with low vision can read content. This Skill audits React components for contrast compliance and guides remediation to meet accessibility color requirements.

Can I use this Skill to test components for accessibility compliance?▼

This Skill identifies and remediates accessibility gaps in React components, enforcing semantic HTML, ARIA attributes, focus management, and contrast standards. It prepares components for WCAG-compliant testing readiness but requires manual testing with assistive technologies for full validation.

What's the best way to structure accessible interactive components like modals?▼

Accessible modals require semantic structure, focus trapping, proper ARIA roles, keyboard event handling, and sufficient contrast. This Skill enforces these patterns in React modals, menus, and dialogs to ensure keyboard navigation and screen reader compatibility.

Related Skills

Explore More Software Engineering Skills→
ReefBytesReefBytes
1

ux-review

Audit HTML, JSX, and TSX projects for WCAG 2.2 accessibility and responsive design issues.

Community
Advanced
josephblaisjosephblais

report-generation

Generate document accessibility audit reports with severity scores and compliance exports.

Community
Advanced
kennedym-dskennedym-ds
14

accessibility-wcag

Evaluate and implement WCAG 2.1 AA accessibility patterns for frontend web development.

Community
Advanced
martinholovskymartinholovsky
45

linux-at-spi2

Automate Linux desktop applications via AT-SPI2 and D-Bus accessibility interfaces.

Community
Advanced