L27 · Build & preview · 5 min
Responsive and accessible from the start
In one sentence
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.
Think of it like this
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 DefinitionPreviewA private test link Vercel makes for each change, so you can try it before it goes live.Open in the glossary → or DefinitionProductionThe live version of your app, the one everyone sees. It comes from `main`.Open in the glossary → link on a phone first. Responsive design (built mobile-first) means your DefinitionfrontendThe part of an app that runs in the visitor's browser: what people see and click.Open in the glossary → 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.
What it looks like 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
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.
Quick check · 1 question