accessibility-perceivable
CommunityMake content perceivable for everyone.
System Documentation
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.
Dependency Matrix
Required Modules
None requiredComponents
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: accessibility-perceivable Download link: https://github.com/HDeibler/universal-design-principles/archive/main.zip#accessibility-perceivable Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.