Updated 2026-07-23 · 11 min read
Accessibility is not a compliance chore bolted on at the end — it is a design quality that also improves SEO, usability and conversion. This checklist covers the practical WCAG-aligned essentials most sites miss, in the order they matter. It is a strong starting point, not a substitute for a full audit on high-stakes products.
Body text needs a contrast ratio of at least 4.5:1 against its background; large text at least 3:1. The most common failure is muted-on-muted text (grey placeholder copy on a tinted surface). Check real combinations with a contrast tool, and never rely on color alone to convey meaning — pair it with text or an icon.
Every interactive element must be reachable and operable with the keyboard alone, in a logical order. Test by putting the mouse away: Tab through the page, activate links and buttons with Enter/Space, open and close menus and modals. If focus gets trapped or lost, or an element cannot be reached, that is a blocker.
Focus must be clearly visible. Do not remove outlines without replacing them — use a strong :focus-visible style with sufficient contrast. This is one of the most frequently broken items in AI-generated UI, which often strips focus rings for aesthetics.
<h1> per page; headings in a logical, unskipped order.header, nav, main, footer.<button> and <a href> elements, not clickable divs.Semantic HTML gives screen readers structure for free and also helps crawlers and answer engines — the same foundation as SEO for AI-built sites.
Every meaningful image needs descriptive alt text; decorative images take empty alt="" so screen readers skip them. Provide captions or transcripts for video, and never autoplay audio. Icon-only buttons need an accessible name via aria-label.
Associate a visible <label> with every input. Show errors in text (not color alone), move focus to the first invalid field, and describe requirements before submission. Group related fields with fieldset/legend where appropriate. Accessible forms are also higher-converting forms.
Respect prefers-reduced-motion: disable or dampen non-essential animation for users who request it. Avoid content that flashes more than three times per second. See micro-interactions for how to keep motion purposeful.
No horizontal scrolling at 320px, touch targets at least ~44px, and content that reflows without loss at 200% zoom. Accessibility and responsive design overlap heavily.
Audit this page for accessibility without changing the visual design. Check color contrast (4.5:1 body, 3:1 large), keyboard operability and focus order, visible focus-visible styles, one logical heading structure, landmark elements, labeled form fields with text errors, descriptive alt text, accessible names on icon buttons, and prefers-reduced-motion support. Return a prioritized report first; then fix one category at a time and re-verify.
Two tie for first: sufficient color contrast (4.5:1 for body text) and full keyboard operability with a visible focus state. They are the most commonly failed and the most impactful for real users.
Yes. Semantic structure, descriptive links, alt text and clear headings help screen readers, search crawlers and AI answer engines alike. Accessible pages are also typically faster and higher-converting.
Only partly, and only when prompted. Generated UI often strips focus states and uses non-semantic elements. Ask explicitly for semantic HTML, focus-visible styles, labels and ARIA where needed, then verify with keyboard and automated testing.