skills.rest
yahav123147
yahav123147COMMUNITY
Explore all skills by this author →
GitHub

web-accessibility

Implement ARIA semantics, keyboard navigation, and accessible form patterns for React components.

1|Updated Apr 13, 2026
Search Tags:#screen reader#keyboard navigation#wcag#web accessibility#aria#accessible forms#axe testing
One-click install
npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill web-accessibility-yahav123147
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/yahav123147/paid-ads-cro-skills/tree/main/skills/web-accessibility
Command: npx skills add https://github.com/yahav123147/paid-ads-cro-skills --skill web-accessibility-yahav123147

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Web accessibility gaps can prevent users with disabilities from using your site, and they can also create compliance and usability risk when keyboard navigation, ARIA semantics, and screen reader support are missing or incorrect.

Core Features & Use Cases

  • ARIA pattern guidance: Implements common accessibility patterns such as toggle buttons, modal dialogs, and navigation menus using appropriate ARIA attributes and roles.
  • Keyboard navigation & focus management: Adds focus trapping, Escape handling, and restore-focus behavior to ensure dialogs and interactive components are usable without a mouse.
  • Accessible form construction: Produces form fields with correct labels, required/invalid states, and error messaging using aria-required, aria-invalid, aria-describedby, and role="alert".
  • Contrast and visual accessibility checks: Applies WCAG AA contrast targets for normal text, large text, and UI components.
  • Screen-reader-only helper patterns: Supports sr-only content for supplementary instructions without visual clutter.
  • Testing for violations: Shows how to run automated accessibility testing with axe to catch common WCAG issues early.

Use it when implementing or reviewing an accessible UI component for a production web app, such as a signup modal, navigation dropdown, or an error-prone form.

Quick Start

Ask for a WCAG-focused review and updated implementation of the component, including ARIA attributes, keyboard behavior, focus management, and accessible error states.

Frequently Asked Questions about web-accessibility

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

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

Implement keyboard navigation in a React modal by applying ARIA roles, trapping focus within the dialog, handling Escape key presses, and restoring focus to the triggering element upon closure.

How do I build accessible forms with ARIA for screen reader error messaging?▼

Build accessible forms by wiring error messages using aria-invalid and aria-describedby, marking required fields with aria-required, and assigning role="alert" to error text for screen reader announcements.

What WCAG 2.1 contrast ratio targets do I need to meet for web accessibility?▼

WCAG 2.1 web accessibility contrast targets require specific ratio thresholds for normal text, large text, and UI components to ensure visual readability for users with visual impairments.

How do I run automated axe testing to check my UI for WCAG compliance?▼

Run automated axe testing against your web application components to detect common WCAG accessibility violations early, verifying that ARIA semantics and keyboard patterns function correctly.

Does this approach to web accessibility work for component-based frontends other than React?▼

Yes, the web accessibility patterns for ARIA semantics, focus management, and screen-reader-only helpers apply across React and other component-based front-end codebases requiring WCAG 2.1 compliance.

Related Skills

Explore More Software Engineering Skills→
partme-aipartme-ai
610

framer

Guide interactive design, prototyping, and React code components in Framer.

Official
Basic
tom-xstom-xs

accessibility-selenium-testing

Automate WCAG 2.1/2.2 accessibility audits with Selenium WebDriver and axe-core.

Community
Advanced
fusenginefusengine
22

palette-generator

Generate OKLCH color palettes with WCAG AA/AAA contrast ratios and dark mode variations.

Community
Intermediate
coastdigitalgroupcoastdigitalgroup
2

accessible-modal-dialog

Implement accessible modal dialogs with focus trapping and ARIA attributes.

Official
Intermediate