skills.rest
gaia-react
gaia-reactOFFICIAL
Explore all skills by this author →
WebsiteGitHub

a11y-fixes

Resolve axe-core accessibility violations with standardized WCAG AA code patterns.

21|4|Updated Sep 4, 2024
Search Tags:#testing#accessibility#a11y#frontend#axe-core#web-standards
One-click install
npx skills add https://github.com/gaia-react/gaia --skill a11y-fixes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: a11y-fixes
Source: https://github.com/gaia-react/gaia/tree/main/.claude/skills/a11y-fixes
Command: npx skills add https://github.com/gaia-react/gaia --skill a11y-fixes

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill addresses common web accessibility (a11y) violations identified by automated testing tools like axe-core, ensuring your application meets WCAG AA standards and remains inclusive for all users.

Core Features & Use Cases

  • Violation Remediation: Provides specific fix patterns for common issues like color contrast, missing labels, incorrect heading orders, and ARIA attribute misuse.
  • Standardized Implementation: Enforces the use of project-specific semantic components (e.g., GAIA Field wrappers) to maintain consistent accessibility across the codebase.
  • Use Case: When a CI test run reports a color-contrast failure or a missing label on a form input, use this skill to apply the correct semantic Tailwind tokens or GAIA component patterns to resolve the issue immediately.

Quick Start

Apply the a11y-fixes skill to resolve the reported color-contrast and label violations in the current component.

Frequently Asked Questions about a11y-fixes

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

FAQPage Schema
How do I fix axe-core accessibility violations reported in my frontend tests?▼

To fix axe-core accessibility violations, apply standardized code patterns for common WCAG AA failures like color contrast, missing labels, and incorrect heading orders to ensure compliant, accessible user interfaces.

What is the best way to resolve color contrast and missing label violations in web components?▼

The best way to resolve color contrast and missing label violations is by enforcing semantic HTML and project-specific component usage, applying correct semantic Tailwind tokens to remediate the failures immediately.

Can I use this approach to fix WCAG AA failures detected by Vitest or Playwright?▼

Yes, this approach targets frontend components identified by Vitest, Playwright, or code-audit-frontend agents, providing specific remediation patterns to resolve detected WCAG AA failures.

How do I correct ARIA attribute misuse and incorrect heading orders for web accessibility?▼

Correct ARIA attribute misuse and heading orders by replacing non-compliant markup with standardized semantic HTML patterns and GAIA-specific component wrappers to maintain consistent accessibility.

Does resolving a11y violations require specific semantic components or can I use standard HTML?▼

Resolving a11y violations requires using project-specific semantic components like GAIA Field wrappers alongside semantic HTML to ensure consistent accessibility across the entire codebase.

Related Skills

Explore More Software Engineering Skills→
joe-watkinsjoe-watkins
1

a11y-tester

Run axe-core accessibility tests on web pages via Playwright MCP.

Community
Advanced
omarrohit20omarrohit20

Axe-core Accessibility

Automate axe-core accessibility scans with Playwright for WCAG 2.1 AA compliance.

Community
Advanced
helderbertohelderberto
12

a11y-audit

Audit frontend source files for WCAG violations and report findings by severity.

Community
Intermediate
aroidoaroido

accessibility-audit

Audit web components for WCAG 2.1 AA accessibility issues.

Official
Intermediate