skills.rest
therealityreport
therealityreportCOMMUNITY
Explore all skills by this author →
GitHub

audit-responsive-accessibility

Audit generated UI for WCAG compliance across article and brand pages.

Updated Aug 23, 2025
Search Tags:#accessibility#a11y#qa#contrast#heading#design-validation#ui-audit
One-click install
npx skills add https://github.com/therealityreport/trr-app --skill audit-responsive-accessibility
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: audit-responsive-accessibility
Source: https://github.com/therealityreport/trr-app/tree/main/.agents/skills/design-docs-agent/audit-responsive-accessibility
Command: npx skills add https://github.com/therealityreport/trr-app --skill audit-responsive-accessibility

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

After generation, this audit gate scans the output for accessibility and responsive design issues to prevent rollout with defects.

Core Features & Use Cases

  • Enforces heading hierarchy, ensures a single H1 per page, and validates proper nesting.
  • Checks color contrast against backgrounds for body text, links, and UI tokens; verifies responsive overflow and alt text coverage.
  • Used in post-generation pipelines to gate releases of article pages and brand tabs before QA review.

Quick Start

Run the accessibility audit on the latest generated page set.

Frequently Asked Questions about audit-responsive-accessibility

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

FAQPage Schema
How do I audit generated UI for WCAG compliance?▼

To audit generated UI for WCAG compliance, run an accessibility validation gate on the output to check heading hierarchy, color contrast ratios, ARIA presence, and responsive overflow.

What is the best way to validate heading structure and color contrast in post-generation pipelines?▼

The best way to validate heading structure and color contrast is using an automated accessibility audit that enforces a single H1 per page, proper nesting, and verifies contrast ratios for body text and links.

How do I check responsive overflow and alt text coverage before a release?▼

You check responsive overflow and alt text coverage by running a post-generation accessibility scan that verifies image alt text presence and detects overflow handling issues across responsive layouts.

Can I use an accessibility audit skill to gate article and brand page releases?▼

Yes, you can use an accessibility audit skill to gate releases of article pages and brand tabs by scanning the generated output for defects before manual QA review.

Does this accessibility QA check keyboard accessibility and ARIA attributes?▼

Yes, this accessibility QA checks keyboard accessibility and validates ARIA attribute presence alongside alt text, heading hierarchy, and color contrast to ensure WCAG-compliant output.

Related Skills

Explore More Design & Creative Skills→
ncsound919ncsound919

ui-ux-pro-max

Generate design-system tokens, component specs, and accessibility guidance for web stacks.

Community
Advanced
coastdigitalgroupcoastdigitalgroup
2

accessible-color-system

Generate WCAG-compliant color palettes and CSS variables for brand systems.

Official
Advanced
thiagoooo34252thiagoooo34252
1

engineer-ci-cd-pipeline

Configure CI/CD pipelines with quality gates and deployment strategies.

Community
Advanced
BigPapiCBBigPapiCB
2

accessibility

Identify and enforce WCAG compliance, ARIA patterns, and keyboard operability in UI components.

Community
Advanced