skills.rest
trudyan141
trudyan141COMMUNITY
Explore all skills by this author →
GitHub

accessibility-expert

Diagnose and fix WCAG, ARIA, keyboard navigation, and screen reader accessibility issues in web code.

3|Updated Jan 15, 2026
Search Tags:#accessibility#screen reader#keyboard navigation#frontend#wcag#axe-core#aria
One-click install
npx skills add https://github.com/trudyan141/my-antigravity-agents-kit --skill accessibility-expert-trudyan141
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: accessibility-expert
Source: https://github.com/trudyan141/my-antigravity-agents-kit/tree/main/templates/.agent/skills/accessibility-expert
Command: npx skills add https://github.com/trudyan141/my-antigravity-agents-kit --skill accessibility-expert-trudyan141

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Web applications frequently ship with accessibility violations—missing alt text, broken ARIA attributes, keyboard traps, and poor screen reader support—that exclude users with disabilities and create legal compliance risk. This Skill provides systematic diagnosis and remediation guidance for WCAG 2.1/2.2 conformance. ## Core Features & Use Cases - WCAG Compliance Auditing: Detects contrast failures, missing labels, broken heading hierarchy, and reflow issues using grep-based diagnosis plus axe-core, Pa11y, and Lighthouse integration. - ARIA & Screen Reader Fixes: Corrects role misuse, broken aria-describedby references, missing live regions, and validates against NVDA, JAWS, and VoiceOver behavior. - Keyboard & Focus Management: Identifies non-keyboard-accessible interactive elements, focus traps, and missing focus indicators, with prioritized minimal-to-complete fix paths. - Use Case: A React app fails an accessibility audit. Invoke this Skill to scan JSX for unlabeled inputs and div-button anti-patterns, apply prioritized fixes, and validate with automated tooling. ## Quick Start Audit my React components for WCAG accessibility violations and fix the keyboard navigation and ARIA issues you find.

Frequently Asked Questions about accessibility-expert

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

FAQPage Schema
How do I fix WCAG color contrast violations in my web app?▼

WCAG AA requires 4.5:1 contrast for normal text, 3:1 for large text and UI components. Detect failures with Lighthouse or axe-core audits, then adjust your color palette and validate with a contrast checker like WebAIM's tool.

How to make a React modal keyboard accessible with focus trapping?▼

Trap focus inside the modal while open, return focus to the trigger element on close, and support the Escape key. Libraries like react-aria, @headlessui/react, or @reach/ui provide pre-built accessible dialog patterns.

What is the difference between axe-core, Pa11y, and Lighthouse for accessibility testing?▼

Axe-core offers the most comprehensive rule coverage and integrates with Playwright. Pa11y is fastest for CI/CD pipelines with binary pass/fail results. Lighthouse suits initial assessments and correlates accessibility with performance.

Does automated accessibility testing catch all WCAG issues?▼

No. Automated tools catch roughly 35% of accessibility issues. Manual testing with keyboard-only navigation and screen readers like NVDA, JAWS, or VoiceOver is essential for full WCAG conformance.

Why is using ARIA attributes sometimes worse than semantic HTML?▼

Incorrect ARIA overrides native element semantics and confuses screen readers. The first rule of ARIA is to prefer semantic HTML elements like button, nav, and main, adding ARIA only when native elements cannot express the behavior.

Related Skills

Explore More Software Engineering Skills→
YuriiYInnoYuriiYInno

wcag-accessibility

Review and write accessible web interfaces using WCAG 2.2 Level AA rules.

Community
Intermediate
hopeoverturehopeoverture
6

a11y-checker-ci

Automate WCAG accessibility checks in CI/CD pipelines and generate PR reports.

Community
Advanced
timsvoicetimsvoice

specimin-ui-accessibility

Audit and fix generated UI code for WCAG 2.1 AA compliance.

Community
Advanced
meow-scimeow-sci
13

react-aria

Build accessible React Aria UI components with hooks and documentation.

Official
Advanced