a11y-fixes

Name: a11y-fixes
Availability: InStock
Author: GAIA

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

Ready to run

npx skills add https://github.com/gaia-react/gaia --skill a11y-fixes

💬 Prompt for ChatGPT / Claude Chat▼

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.