accessibility-perceivable

Audit UI content for WCAG Principle 1 perceivability requirements.

6|3|Updated May 3, 2026
One-click install
npx skills add https://github.com/HDeibler/universal-design-principles --skill accessibility-perceivable
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: accessibility-perceivable
Source: https://github.com/HDeibler/universal-design-principles/tree/main/plugins/process-and-robustness-principles/skills/accessibility-perceivable
Command: npx skills add https://github.com/HDeibler/universal-design-principles --skill accessibility-perceivable

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Users may not be able to perceive your interface content due to missing alternatives, poor contrast, inaccessible media, or non-adaptable structure, causing failures of accessibility expectations (WCAG Principle 1: Perceivable).

Core Features & Use Cases

  • Text alternatives for non-text content (images, icons, complex graphics).
  • Time-based media alternatives (captions, transcripts, audio descriptions, controls for autoplay audio).
  • Adaptable structure using semantic markup and meaningful programmatic relationships.
  • Distinguishable presentation through color contrast, non-color cues, and reflow/resizing support.

Use this when building or auditing design-heavy UX/UI: dashboards with charts, media-rich landing pages, color systems, typographic scales, and accessibility reviews against WCAG Perceivable criteria.

Quick Start

Use accessibility-perceivable to audit a screen and produce specific fixes for missing alt text, insufficient contrast, and non-adaptable headings/reading order.

Frequently Asked Questions about accessibility-perceivable

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

FAQPage Schema
How do I audit UI components for WCAG Perceivable compliance?

To audit UI for WCAG Perceivable compliance, evaluate text alternatives for non-text content, verify time-based media captions and transcripts, check semantic structure adaptability, and measure color contrast ratios to identify specific accessibility failures.

What are the WCAG requirements for text alternatives and contrast?

WCAG requirements for text alternatives and contrast mandate providing alt text for images and icons, ensuring measurable contrast ratios for distinguishable presentation, and supplying captions or transcripts for time-based media so content is perceivable by users with visual or auditory constraints.

How do I add captions and transcripts to media-rich landing pages?

Adding captions and transcripts to media-rich landing pages involves providing synchronized text alternatives for time-based media, implementing controls for autoplay audio, and including audio descriptions to satisfy accessibility audits for users with auditory perception constraints.

Can I use semantic markup to fix adaptable structure and reading order issues?

You can use semantic markup to fix adaptable structure issues by establishing meaningful programmatic relationships between elements, which corrects reading order and ensures content reflows properly for users relying on assistive technologies during accessibility audits.

Does this accessibility audit handle reflow and non-color cues for dashboards with charts?

This accessibility audit handles reflow and non-color cues for dashboards with charts by verifying resizing support, enforcing distinguishable presentation through non-color reliant indicators, and testing semantic relationships within complex visual data structures.