alt-text-design
Alt Text Design
Write alt text that conveys the same information and purpose as the visual content — not just what the image looks like, but what it communicates.
Core Principle
Alt text answers the question: if this image disappeared, what information would be lost? That's what needs to be in the alt text.
Decision Tree
1. Is the image purely decorative?
- Background textures, dividers, visual flourishes
- Images that repeat information already in adjacent text
- Action: use empty alt (alt="") so screen readers skip it
More from owl-listener/inclusive-design-skills
plain-language-design
Write and review content for plain language accessibility. Use when writing interface copy, error messages, instructions, onboarding text, help content, legal or medical information, forms, or any user-facing text. Triggers on: plain language, reading level, simplify text, jargon, hard to understand, nobody reads this, unclear copy, rewrite, too complicated, ESL, literacy, readability.
13user-preference-respect
Design interfaces that detect and respond to system-level user preferences. Use when implementing dark mode, reduced motion, high contrast, text scaling, or any user preference that affects how the interface renders. Triggers on: user preference, system preference, prefers-reduced-motion, prefers-contrast, prefers-color-scheme, forced-colors, media query, user settings, system settings, accessibility settings, OS settings.
12situational-impairment-mapping
Map situational impairments that affect all users in specific contexts — not just people with permanent disabilities. Use when designing for mobile, outdoor, noisy, stressful, or multitasking contexts. Triggers on: situational, context of use, environment, one-handed, bright sunlight, noisy, driving, multitasking, gloves, temporary disability, context, edge case.
12multi-modal-input
Design interfaces that offer multiple input methods so users can choose what works for their abilities and context. Use when designing any interactive system where users provide input — forms, search, editors, creative tools, communication interfaces. Triggers on: multi-modal, input methods, alternative input, how people interact, mouse alternative, touch alternative, input flexibility, switch access, eye tracking, head pointer.
12keyboard-navigation
Design keyboard navigation and focus management for users who cannot or prefer not to use a mouse or touch screen. Use when designing any interactive interface — forms, menus, modals, tabs, carousels, drag-and-drop, data tables, or custom components. Triggers on: keyboard, focus, tab order, focus trap, skip link, arrow keys, keyboard shortcut, can't use mouse, motor disability, switch access, focus indicator, focus ring.
12voice-interaction
Design voice interactions and speech interfaces that work for people with diverse speech patterns, accents, and communication styles. Use when designing voice commands, voice search, dictation, voice assistants, or any interface that accepts speech input. Triggers on: voice, speech, dictation, voice command, voice search, speech recognition, accent, stutter, speech disability, non-verbal, AAC, voice assistant, talk to type.
12