Accessibility WCAG AA

Validate design and code outputs for WCAG 2.1 AA compliance.

Updated Apr 30, 2026
One-click install
npx skills add https://github.com/bytetalent/docs --skill accessibility-wcag-aa
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: Accessibility WCAG AA
Source: https://github.com/bytetalent/docs/tree/main/skills/design/accessibility-aa
Command: npx skills add https://github.com/bytetalent/docs --skill accessibility-wcag-aa

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill ensures compliance with WCAG 2.1 AA standards for accessibility in design and code, eliminating manual checks and reducing the risk of non-compliance.

Core Features & Use Cases

  • Automatic WCAG 2.1 AA Compliance: Automatically checks design and code outputs for WCAG 2.1 AA conformance.
  • Focus State Visibility: Verifies interactive elements have visible focus states for better accessibility.
  • Color Contrast Enforcement: Ensures body text and interactive elements have sufficient contrast.
  • Use Case: Before launching a new design or web application, use this Skill to validate it meets accessibility requirements, making it inclusive for all users.

Quick Start

Apply the accessibility checks to your design or code output with the 'run_accessibility_check' command.

Frequently Asked Questions about Accessibility WCAG AA

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

FAQPage Schema
How do I validate WCAG 2.1 AA compliance for my design and code?

To validate WCAG 2.1 AA compliance, apply automated checks to your design or code output using the run_accessibility_check command. This verifies focus states, color contrast, label associations, and alt text without manual tooling.

What specific accessibility checks are enforced for WCAG AA conformance?

WCAG AA conformance checks verify visible focus states for interactive elements, enforce sufficient color contrast for body text, validate proper label association, and ensure alt text is provided for all images.

Can I check color contrast and focus states without manual tooling?

Yes, you can check color contrast and focus states without manual tooling. The automated validation process directly inspects design and code outputs to enforce sufficient contrast and verify interactive focus state visibility.

Does this WCAG AA validation work for both design outputs and code?

Yes, this WCAG AA validation works for both design and code outputs. It automatically inspects your provided deliverables to ensure body text contrast, label association, and focus state visibility meet accessibility standards.

When should I run an accessibility check on my web application?

You should run an accessibility check before launching a new design or web application. Validating WCAG 2.1 AA standards early ensures your interactive elements and text are inclusive for all users without requiring manual reviews.