intopia-web-accessibility

Name: intopia-web-accessibility
Availability: InStock
Author: Intopia

Build accessible web interfaces and review UI code for WCAG 2.2 issues.

38|3|Updated Mar 6, 2026

Search Tags:#accessibility #frontend #wcag #semantic-html #aria #keyboard-navigation #colour-contrast

Ready to run

npx skills add https://github.com/Intopia/intopia-web-accessibility-skill --skill intopia-web-accessibility

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: intopia-web-accessibility
Source: https://github.com/Intopia/intopia-web-accessibility-skill/tree/main
Command: npx skills add https://github.com/Intopia/intopia-web-accessibility-skill --skill intopia-web-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

This Skill helps AI agents build and review accessible web interfaces without missing common WCAG 2.2 issues, reducing the need for repeated manual accessibility fixes.

Core Features & Use Cases

Component-specific guidance: Apply acceptance criteria for forms, buttons, tabs, accordions, modals, tables, links, images, and other common UI patterns.
Accessible implementation patterns: Use semantic HTML, correct ARIA only where needed, logical heading structure, keyboard support, focus management, and visible focus indicators.
Contrast and responsive checks: Validate text, UI controls, and focus styling with colour-contrast references and scripts, then adjust layouts so interfaces still work at small screens and larger text sizes.

Quick Start

Use the intopia-web-accessibility skill to review the requested interface, consult the matching component guidance, and produce accessible code that satisfies the relevant acceptance criteria.

Frequently Asked Questions about intopia-web-accessibility

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

FAQPage Schema

How do I check my React or Vue components for WCAG 2.2 accessibility issues?▼

To check WCAG 2.2 accessibility issues in React, Vue, Svelte, or TSX, this skill reviews your UI code against component-specific acceptance criteria for semantic markup, ARIA usage, and keyboard navigation. It identifies missing labels, states, and focus management errors.

What's the best way to build accessible modal dialogs with proper keyboard navigation?▼

The best way to build accessible modals is applying semantic HTML and correct ARIA states while enforcing focus trapping and keyboard navigation patterns. This skill provides component-specific guidance to ensure your modals meet WCAG 2.2 reflow and focus indicator requirements.

How does colour contrast validation work for accessible web interfaces?▼

Colour contrast validation works by checking text, UI controls, and focus styling against WCAG reference ratios using integrated scripts. This skill validates your colour choices to ensure accessible web interfaces remain readable at small screens and larger text sizes.

Can I use this to review existing HTML and email templates for ARIA and semantic markup compliance?▼

Yes, you can review existing HTML and email templates for ARIA and semantic markup compliance. The skill audits existing UI code across various formats, applying acceptance criteria to enforce correct logical heading structures, labels, and accessible states.

Do I need manual fixes after automatically generating accessible forms and accordions?▼

You should not need manual fixes if the generated code follows the provided acceptance criteria. This skill produces accessible forms and accordions with correct semantic markup, keyboard support, and focus management, reducing repeated manual accessibility fixes.