qa-inclusion

Analyze UI code for WCAG 2.1 AA compliance and accessibility issues.

1|Updated Mar 3, 2026
One-click install
npx skills add https://github.com/dev-gios/agent-teams-qa --skill qa-inclusion
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: qa-inclusion
Source: https://github.com/dev-gios/agent-teams-qa/tree/main/skills/qa-inclusion
Command: npx skills add https://github.com/dev-gios/agent-teams-qa --skill qa-inclusion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill ensures that user interfaces are accessible to everyone, regardless of ability, by identifying and rectifying accessibility issues in UI code.

Core Features & Use Cases

  • WCAG 2.1 AA Compliance: Analyzes code against established accessibility standards.
  • Semantic HTML & ARIA: Checks for proper use of semantic elements and ARIA attributes.
  • Keyboard Navigation & Focus: Verifies that all interactive elements are keyboard accessible and have visible focus indicators.
  • Color Contrast: Flags insufficient color contrast ratios.
  • Screen Reader Support: Assesses compatibility with screen readers.
  • Use Case: Before deploying a new feature, run this Skill to catch any accessibility regressions, ensuring compliance with legal requirements and a better user experience for all.

Quick Start

Use the qa-inclusion skill to review the accessibility of the new modal component in the staging branch.

Frequently Asked Questions about qa-inclusion

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

FAQPage Schema
How do I check my React or Vue UI code for WCAG 2.1 AA compliance?

You can analyze JSX, TSX, HTML, Vue, and Svelte templates against WCAG 2.1 AA standards to identify accessibility issues related to text alternatives, adaptable layouts, and ARIA compatibility.

What is semantic HTML and how does it affect screen reader support?

Semantic HTML uses proper element types to convey document structure and meaning, enabling screen readers to accurately interpret and navigate interface content for users with visual impairments.

How do I verify keyboard navigation and visible focus indicators in my frontend components?

Verify keyboard navigation by analyzing interactive elements to ensure they are keyboard accessible and have visible focus indicators, confirming all interactive elements can be reached and operated without a mouse.

Can I use this accessibility review tool with Angular and Svelte projects?

Yes, the review process adapts to project-specific frameworks including React, Vue, Angular, and Svelte templates, analyzing the frontend code for inclusive design patterns and compliance.

What's the best way to find insufficient color contrast ratios in my UI layouts?

Analyze your frontend code to flag insufficient color contrast ratios, checking for distinguishable content elements that fail to meet established accessibility guidelines for visual readability.

Why does my screen reader skip interactive elements in my Svelte template?

Screen readers skip elements lacking proper semantic HTML, ARIA attributes, or keyboard accessibility, making them invisible to assistive technologies and failing inclusive design pattern requirements.