
multimedia-accessibility
Design accessible video, audio, and multimedia content with captions, transcripts, and audio descriptions. Use when creating or reviewing video, audio, podcasts, webinars, animations, or any time-based media. Triggers on: captions, subtitles, transcript, audio description, video accessibility, podcast accessibility, multimedia, closed captions, sign language, media player, autoplay.
- Installs
- 73
- Last 24h
- —
- Trending rank
- —
- Security
- Not audited
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/owl-listener/inclusive-design-skills --skill multimedia-accessibility- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads multimedia-accessibility automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
SKILL.md
The instructions your agent reads when the skill is triggered.
Multimedia Accessibility
Design multimedia content that can be consumed by people who can't hear the audio, can't see the video, or can't process both at once.
Core Principle
Every piece of information conveyed through one sense must also be available through another. Audio content needs a visual equivalent. Visual content needs an audio or text equivalent.
Captions
What Captions Include
- All spoken dialogue, attributed to the speaker
- Relevant sound effects: [door slams], [phone rings], [laughter]
- Music that conveys mood or meaning: [upbeat music], [tense score]
- Off-screen sounds that matter: [footsteps approaching]
Caption Quality
- Synchronised with speech (within 1 second)
- Minimum 1 second display time, maximum 2 lines
- No more than 32 characters per line for readability
- Proper punctuation and grammar — not auto-generated without review
- Speaker identification when multiple speakers are present
Auto-Captions Are Not Enough
- Auto-generated captions typically have 80–85% accuracy
- That means 1 in 5 or 6 words is wrong
- Always review and correct auto-captions
- Names, technical terms, and accented speech fail most often
Transcripts
When to Provide
- Every audio-only file (podcast, voice memo, audio article)
- Every video (as a complement to captions)
- Transcripts serve people who are deaf, hard of hearing, or who prefer reading to watching/listening
What Transcripts Include
- All spoken content with speaker labels
- Descriptions of relevant visual content (for video transcripts)
- Relevant sound effects and music cues
- Timestamps for longer content (helps navigation)
Transcript Placement
- Link directly below or beside the media player
- Label clearly: "Read the full transcript"
- Don't hide behind multiple clicks
- Make transcripts searchable
Audio Descriptions
When to Provide
- When video content conveys important visual information that isn't in the dialogue
- Presentations where speakers reference slides or visuals
- Tutorials that demonstrate visual actions
What to Describe
- On-screen text not read aloud
- Actions and gestures that carry meaning
- Scene changes and visual context
- Charts, graphs, and visual data shown on screen
How to Describe
- Fit descriptions into natural pauses in dialogue
- Be concise — describe what matters, not everything visible
- For dense visual content: provide an extended audio description version where the video pauses for description
Media Player Requirements
- Keyboard-accessible play, pause, stop, volume, and seek controls
- Visible captions toggle
- Speed controls (0.5x to 2x) — essential for cognitive accessibility
- Volume control independent of system volume
- No autoplay — let the user choose when to start
- Visible progress bar with time display
Assessment Questions
- Does every video have accurate, synchronised captions?
- Does every audio file have a transcript?
- Are auto-captions reviewed and corrected?
- Is important visual information audio-described?
- Is the media player fully keyboard accessible?
- Is autoplay disabled?
FAQ
What does the multimedia-accessibility skill do?
Design accessible video, audio, and multimedia content with captions, transcripts, and audio descriptions. Use when creating or reviewing video, audio, podcasts, webinars, animations, or any time-based media. Triggers on: captions, subtitles, transcript, audio description, video accessibility, podcast accessibility, multimedia, closed captions, sign language, media player, autoplay.
How do I install multimedia-accessibility?
Run npx skills add https://github.com/owl-listener/inclusive-design-skills --skill multimedia-accessibility in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/multimedia-accessibility/ (personal) or .claude/skills/multimedia-accessibility/ (project).
Which AI agents can use multimedia-accessibility?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is multimedia-accessibility safe to install?
No partner security audit is available yet. Skills can run commands and scripts, so read the SKILL.md and any bundled files before installing.
Who maintains multimedia-accessibility?
It is published by owl-listener in owl-listener/inclusive-design-skills. It has 73 recorded installs.
More from owl-listener/inclusive-design-skills
plain-language-design
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
keyboard-navigation
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
cognitive-load-assessment
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
responsive-review
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
user-preference-respect
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
error-prevention-recovery
owl-listener/inclusive-design-skills
Open the skill to read its SKILL.md instructions.
Popular frontend & design skills
setup-matt-pocock-skills
mattpocock/skills
Configure this repo for the engineering skills: set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.
frontend-design
anthropics/skills
Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
hyperframes-animation
heygen-com/hyperframes
All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP default, plus Lottie, Three.js, Anime.js, CSS keyframes, Web Animations API, TypeGPU). Use for any motion or animation task: pick 2-4 rules and compose, or load a blueprint, or look up runtime-specific API (e.g. GSAP eases / Lottie player / Three.js mixer). Also covers auditing an existing composition's choreography (animation map) and 24 named text-animation effects. HyperFrames-native: single paused timeline, seek-safe, deterministic.
prototype
mattpocock/skills
Build a throwaway prototype to answer a design question. Use when the user wants to sanity-check whether a state model or logic feels right, or explore what a UI should look like.
hyperframes-core
heygen-com/hyperframes
The HyperFrames composition contract — build one renderable project. Use for composition structure, the data- timing attributes, class="clip", tracks, sub-compositions, variables, framework-owned media playback, deterministic-render rules, and validation. Read before writing composition HTML.
vercel-react-best-practices
vercel-labs/agent-skills
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.