# Responsive Accessibility

> Make Design Studio artifacts responsive, keyboard operable, semantically correct, and readable across common viewport and input conditions.

- Skill: `juspay/responsive-accessibility` (Agent Skill)
- Install (CLI): `npx skillmds@latest add juspay/responsive-accessibility`
- Raw SKILL.md: https://api.skillmd.com/api/skills/juspay/responsive-accessibility/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: juspay (https://skillmd.com/u/juspay)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/juspay/responsive-accessibility

---


# Responsive and accessible UI

Treat mobile and accessibility as design inputs, not cleanup.

- Start from content behavior: allow wrapping, use fluid widths, set sensible
  max-widths, and avoid fixed heights around text.
- Add breakpoints only where the composition actually fails. Convert multi-
  column layouts into an intentional stacked order on narrow screens.
- Use semantic headings in order, associated labels, button elements for
  actions, links for navigation, and helpful alternative text.
- Ensure every interactive element is reachable and usable by keyboard.
- Include visible `:focus-visible`, hover, active, disabled, and error states.
- Respect `prefers-reduced-motion` and do not rely on hover for essential info.
- Maintain WCAG AA-style contrast for normal text and important controls.

Validate at approximately 1440px, 1024px, 768px, and 390px widths. Check for
horizontal overflow, clipped text, inaccessible menus, and reflow problems.