Questions tagged [accessibility]
Post a PromptPrompts that build accessible interfaces by default.
9 prompts
47votes
3answers
5.3kviews
Reduced-motion-first system prompt so every animation ships with a safe fallback
We had animations scattered across the codebase and maybe half respected prefers-reduced-motion. Auditing after the fact is miserable. I wanted motion to be safe by construction, not by review. So I m
10votes
0answers
1.3kviews
Touch bottom-sheet micro-interaction that feels native without a JS animation lib
Building a PWA and the bottom sheet is the make-or-break interaction. The generated versions animated height (janky), had no drag affordance, and snapped instantly instead of easing, so it felt like a
33votes
1answers
3.3kviews
Scroll-driven reveal animations that don't nuke accessibility or jank the scroll
I wanted sections to fade and rise as they enter the viewport, but every prompt result either used a heavy IntersectionObserver soup or animated top/margin and made the scroll stutter on a mid-range p
9votes
1answers
2.0kviews
Prompt that bakes accessibility into a chart instead of bolting it on later
Our charts passed a visual review and failed an a11y audit hard: color-only encoding, no keyboard access, screen readers announcing a wall of unlabeled paths. Retrofitting was miserable, so I moved th
21votes
1answers
2.8kviews
Accessible hover and focus states in one prompt, with a banned-patterns list
The recurring failure: models give me pretty hover effects that vanish for keyboard users, remove the focus outline "because it's ugly", or convey state with color alone. I got tired of fixing the sam
24votes
2answers
4.2kviews
System prompt for a dark-mode-first design token set that isn't just inverted grays
Every "add dark mode" prompt gives me pure black backgrounds, fff text, and one flat gray for everything. It looks like a terminal, not a product, and the contrast is actually too harsh at night. I tu
21votes
2answers
3.6kviews
CSS-only accordion that animates open using grid-template-rows 0fr to 1fr
The eternal problem: you can't transition height: auto, so every accordion prompt gives me either a JS height-measuring hack or a max-height guess that's either clipped or has a laggy delay when conte
9votes
1answers
1.6kviews
Fluid type scale with clamp() that stays readable and doesn't overshoot on 4K
Editorial layouts live and die by the type scale. My first prompts gave me clamp() values that looked fine on a laptop but ballooned to absurd sizes on a 32-inch monitor because the preferred vw term
26votes
2answers
2.9kviews
How I prompt for an accessible signup + first-run flow that passes an audit by default
We failed an accessibility audit on our signup once: unlabeled inputs, an error summary that never got announced, focus that jumped to the top of the page after validation. Retrofitting a11y is misera