skills.rest
BWCbewchan
BWCbewchanCOMMUNITY
Explore all skills by this author →
GitHub

web-accessibility

Implement WCAG-aligned ARIA patterns and keyboard navigation in web applications.

5|2|Updated Dec 14, 2025
Search Tags:#screen reader#keyboard navigation#wcag#accessibility testing#focus management#aria#accessible forms
One-click install
npx skills add https://github.com/BWCbewchan/tpsmindx --skill web-accessibility-bwcbewchan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-accessibility
Source: https://github.com/BWCbewchan/tpsmindx/tree/main/.agents/skills/web-accessibility
Command: npx skills add https://github.com/BWCbewchan/tpsmindx --skill web-accessibility-bwcbewchan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of inaccessible web interfaces that fail assistive technology expectations, keyboard-only usability, and WCAG accessibility requirements.

Core Features & Use Cases

  • Accessible ARIA patterns: Implement correct ARIA roles and attributes for common UI elements such as buttons, dialogs, and navigation menus to improve screen reader comprehension.
  • Keyboard navigation & focus management: Ensure focus is trapped and restored appropriately in modals and interactive components, including Escape handling and Tab traversal.
  • Accessible forms & visual clarity: Add proper labeling, required/invalid semantics, error announcement via role="alert", and enforce color-contrast targets for WCAG AA compliance.
  • Testing for accessibility regressions: Use automated testing tooling (e.g., axe) to detect accessibility violations early during development.

Quick Start

Use the web-accessibility skill to audit and update your React components so that dialogs trap focus correctly, forms use proper ARIA attributes, and your UI meets WCAG AA contrast targets.

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 for modal dialogs?▼

Keyboard navigation for modal dialogs requires trapping focus within the component, handling Escape key presses, and restoring focus to the triggering element upon close. This ensures keyboard-only users interact with modals safely.

What ARIA attributes are needed for accessible forms with required fields and error messages?▼

Accessible forms require proper labeling with aria-required for mandatory fields, aria-invalid for error states, and aria-describedby to link error messages. Use role="alert" to announce validation errors dynamically to screen readers.

How do I test my web UI for WCAG compliance and accessibility regressions?▼

Testing WCAG compliance involves running automated accessibility checkers like axe during development to detect violations early. This identifies issues with ARIA roles, color contrast targets, and keyboard navigation before deployment.

What are the correct ARIA roles and semantics for interactive navigation menus?▼

ARIA roles for navigation menus involve using correct semantic elements and aria-* attributes to improve screen reader comprehension. Proper role assignments ensure assistive technologies accurately announce interactive controls and navigation states.

How do I meet WCAG AA color contrast requirements for web application interfaces?▼

WCAG AA color contrast requires enforcing specific contrast ratios between text and background elements in your UI. This involves validating color choices during front-end development to ensure visual clarity for users with visual impairments.

Can I use automated accessibility testing to check React components for screen reader compatibility?▼

Automated accessibility testing tools can audit React components to detect screen reader compatibility issues. They scan for missing ARIA attributes, incorrect focus management, and semantic HTML problems in your front-end components.

Related Skills

Explore More Software Engineering Skills→
V4-CompanyV4-Company
2

marsai:dev-frontend-accessibility

Run axe-core accessibility scans on React/TypeScript UI components.

Official
Intermediate
gaiastudio-aigaiastudio-ai
2

gaia-test-a11y

Run automated accessibility tests on deployed web applications with axe-core, pa11y, and Lighthouse.

Official
Advanced
froide-kkfroide-kk
1

design-ui-patterns

Provide UI component design guidelines for accessible, responsive interfaces.

Official
Intermediate
wojonswojons
4

testing-accessibility

Test web applications for WCAG compliance using automated tools.

Community
Intermediate