skills.rest
Intopia
IntopiaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

intopia-web-accessibility

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
One-click install
npx skills add https://github.com/Intopia/intopia-web-accessibility-skill --skill intopia-web-accessibility
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
CrazyDubyaCrazyDubya

accessibility-auditor

Audit web applications for WCAG 2.1 Level AA accessibility compliance.

Community
Intermediate
mustafazeydanimustafazeydani

accessibility

Automate web accessibility audits against WCAG 2.2 guidelines using Lighthouse.

Community
Advanced
raybargasraybargas

Frontend Accessibility

Enforce frontend accessibility compliance in web UI code.

Community
Basic
Montte-erpMontte-erp
6

wcag-audit-patterns

Audit web pages for WCAG 2.2 violations with automated and manual checks.

Official
Intermediate