# Responsive and accessible from the start

> A responsive and accessible app adapts smoothly from a small phone screen to a wide desktop monitor, and works just as well with a thumb, a keyboard or a screen reader—because your agent builds it with semantic HTML, clear labels, strong contrast and generous tap targets from day one.

## Analogy

Think of a building designed with wide doors, clear signs and a gentle entrance ramp from the blueprint stage. Everyone—someone pushing a stroller, carrying groceries, using a wheelchair, or walking in a hurry—moves through it comfortably without needing a clumsy renovation later.

## How it works

Most visitors will open your preview or production link on a phone first. **Responsive design** (built **mobile-first**) means your frontend starts clean and readable on a narrow 320 px phone screen with zero horizontal scrolling, and expands gracefully to tablets, laptops and wide monitors, with explicit `width` and `height` on images and media so the page never jumps around while loading.

**Accessibility** (often written **a11y**, following the **WCAG 2.2 AA** standard) ensures everyone can use your app. Every interactive control uses the real HTML element for its job (`<button>` for actions, `<a>` for links, `<label>` connected to each form input) so a **screen reader** can announce what each control is, and every tap target is at least **44 × 44 px** so thumbs don't mis-tap.

You can test three of the most important rules yourself in thirty seconds: (1) press the **Tab** key repeatedly to check that you can reach and trigger every button and link with the keyboard alone, and that a clear focus ring shows where you are; (2) check that text has strong **contrast** against its background (at least 4.5:1) and never relies on color alone to show an error; and (3) respect `prefers-reduced-motion` so animations don't make people dizzy.

## In your project

Your agent follows the `web-design-guidelines` and `vercel-composition-patterns` skills whenever it builds a screen. Before approving a feature, resize your browser window down to phone width (or open the preview link on your phone) and press **Tab** through the page to confirm every control is easy to reach and read.

## Copy for your agent

```text
Check our app's screens against the web-design-guidelines skill: verify that every layout works cleanly at 320 px width, tap targets are at least 44×44 px, every input has a label, keyboard Tab focus is clearly visible, and text contrast meets WCAG 2.2 AA.
```

---
Source: [Agentic Makers](https://agenticmakers.app/en/learn/responsive-and-accessible) · License: CC BY 4.0