v0 by Vercel Accessibility Checklist 2026 | WCAG 2.1 AA Compliance

Last updated: 2026-06-22

v0 by Vercel is an AI interface builder that generates React components from a text prompt or a screenshot, most often using the shadcn/ui component system and Tailwind CSS. It is widely used by developers and designers to scaffold UI quickly, and the components it builds on are generally well structured because shadcn/ui wraps the accessible Radix UI primitives. That foundation gives v0 a head start over many AI builders, but it does not make the output automatically compliant. The accessibility of a v0 screen depends heavily on how you assemble and customize the generated pieces: v0 regularly produces decorative layout that omits semantic landmarks, color palettes that fail contrast, icon-only buttons with no accessible name, images without alt text, and custom interactive widgets built outside the Radix primitives that lack proper roles and keyboard handling. Because v0 generates code you copy into your own project, the responsibility for the final accessibility sits with you, and the issues are easy to miss when the preview looks polished. Most v0-built interfaces end up in real commercial products subject to the European Accessibility Act and the ADA. This checklist covers the accessibility issues most likely to appear in v0 output and the concrete prompts and code changes that resolve them.

Common Accessibility Issues

serious

Missing Landmark Structure in Generated Layouts

WCAG 1.3.1

v0 builds page layouts primarily from div elements with Tailwind utility classes. Even when the visual result is a clear header, sidebar, main area, and footer, the generated markup often uses generic divs, so screen reader users get no landmark navigation and no structural overview of the page.

How to fix:

Prompt v0 to 'use semantic landmark elements: <header> for the top bar, <nav> for navigation, <main> for the primary content, <aside> for sidebars, and <footer> for the footer, with an aria-label on each nav and aside.' Verify the landmarks appear in the browser's accessibility tree.

Before 
<div className="flex flex-col min-h-screen">
  <div className="border-b">...</div>
  <div className="flex-1">...</div>
  <div className="border-t">...</div>
</div>
After 
<div className="flex flex-col min-h-screen">
  <header className="border-b">...</header>
  <main className="flex-1">...</main>
  <footer className="border-t">...</footer>
</div>
critical

Icon-Only Buttons Without an Accessible Name

WCAG 4.1.2

v0 loves compact, icon-driven UI: a Button containing only a Lucide icon for actions like search, settings, close, or menu. Without text or an aria-label, these buttons are announced by screen readers as just 'button' with no indication of what they do, leaving the function unusable for non-visual users.

How to fix:

Ask v0 to 'add an aria-label describing the action to every icon-only button, and mark the icon itself aria-hidden.' For shadcn Button components, the aria-label goes on the Button element directly.

Before 
<Button variant="ghost" size="icon">
  <Search />
</Button>
After 
<Button variant="ghost" size="icon" aria-label="Search">
  <Search aria-hidden="true" />
</Button>
serious

Low-Contrast Muted Text and Borders

WCAG 1.4.3

The default shadcn/ui 'muted-foreground' token and many of v0's chosen Tailwind shades render secondary text, captions, and placeholder content in light gray that often falls below the 4.5:1 contrast threshold. Subtle borders and disabled states can also drop below the 3:1 ratio needed for UI components.

How to fix:

Prompt v0 to 'check all text and UI component colors against WCAG AA and adjust the muted-foreground and border tokens or Tailwind shades so body text meets 4.5:1 and interactive borders meet 3:1.' Confirm with a contrast checker, especially on muted captions and placeholder text.

critical

Form Fields Without Associated Labels

WCAG 3.3.2

When v0 generates forms quickly it sometimes drops the shadcn Label component or relies on placeholder text alone, and it may forget to connect a Label to its Input with matching htmlFor and id. The field then has no programmatic label, so assistive technology cannot announce its purpose.

How to fix:

Ask v0 to 'pair every Input with a shadcn <Label> connected via htmlFor and a matching id, and use the Form components for validation messages tied to the field with aria-describedby.' Check that each field has a visible, persistent label.

Before 
<Input type="text" placeholder="Full name" />
After 
<Label htmlFor="name">Full name</Label>
<Input id="name" type="text" placeholder="Jane Doe" />
critical

Images and Avatars Missing Alt Text

WCAG 1.1.1

v0 frequently inserts placeholder images, hero graphics, and avatar components with empty or generic alt attributes (or none at all). Informative images then convey nothing to screen reader users, and avatars may be announced with unhelpful default text.

How to fix:

Prompt v0 to 'add meaningful alt text to every informative image and avatar, and set alt to an empty string for purely decorative graphics.' Replace the AI's generic descriptions with text that reflects the actual content or the person's name for avatars.

v0 by Vercel-Specific Tips

  • v0's shadcn/ui foundation is built on accessible Radix primitives, so prefer the generated Dialog, DropdownMenu, Popover, Tabs, and Accordion components over any hand-rolled equivalents the AI sometimes produces, since the Radix versions handle focus and ARIA correctly out of the box.
  • Be explicit in your prompts. v0 acts on accessibility instructions you state directly, so include requirements like 'semantic landmarks, labeled forms, AA contrast, and aria-labels on icon buttons' in the prompt rather than expecting them by default.
  • Because you paste v0 output into your own codebase, wire eslint-plugin-jsx-a11y into your project so every generated component is automatically linted for common accessibility mistakes before it ships.
  • v0 can regenerate a component differently each time you iterate, so re-verify keyboard access and contrast after each regeneration rather than assuming a fix from an earlier version carried over.

axe DevTools

A browser extension that audits the rendered output of v0 components for WCAG violations, catching the landmark, contrast, and labeling gaps that the v0 preview hides.

eslint-plugin-jsx-a11y

An ESLint plugin that statically analyzes the React/JSX code you copy out of v0, flagging missing alt text, unlabeled inputs, and inaccessible interactive elements during development.

WAVE

A web-based evaluation tool and browser extension that visually overlays accessibility errors on your deployed v0 interface, making missing labels and low-contrast text quick to spot.

Further Reading

Other CMS Checklists