Why this step always gets skipped
Because it's invisible.
You can see a bad colour choice instantly. You cannot see that a button has no accessible name — not unless you use a screen reader, or one of your users does.
AI builders optimise for "the output looks correct". Between looking correct and working correctly sit semantic tags, keyboard focus, contrast ratios and alternative text — none of which are in the visual feedback loop.
The result is measurable: accessibility compliance across the web fell roughly 10% between 2025 and 2026, with the flood of AI-generated client-rendered sites cited as a major cause.
The four failures you'll actually hit
1. Everything is a div
AI loves <div>. Screen readers depend on semantics — <nav> says "this is navigation, you can skip it", <button> says "this is pressable". A stack of divs with onClick handlers says nothing at all.
Side note: this is the same root cause as SEO trap #4. Fix it once, fix both.
2. Images without alt text
Or worse: alt="image". Decorative images should carry alt="" so screen readers skip them. Informative images should describe what they communicate, not what they look like.
3. Icon buttons with no name
<!-- Announced as: "button" -->
<button><XIcon /></button>
<!-- Correct -->
<button aria-label="Close dialog"><XIcon /></button>
Icon-only buttons are the single most common accessibility defect in AI output.
4. Keyboard dead ends
Custom dropdowns, modals, tab panels — the generated versions frequently respond to mouse only. Tab can't reach them, Esc doesn't close them, and focus lands at the bottom of the page when a modal opens.
How to test: push the mouse away and traverse your page using only Tab, Shift+Tab, Enter and Esc. Anywhere you get stuck is a bug.
Four constraints to paste into any prompt
Accessibility requirements:
- Semantic elements (header/nav/main/section/article/footer);
interactive elements must be button or a, never a div with onClick
- Descriptive alt on every image; alt="" for decorative images
- Icon-only buttons must have aria-label
- All interactive components keyboard-operable: reachable via Tab,
activated by Enter/Space, dismissed by Esc, with visible focus
- Body text contrast ratio at least 4.5:1 against its background
These lines cost nothing and eliminate most of the low-hanging defects.
Three checks that take 30 seconds
- Keyboard-only pass — the highest-value check, no tooling required.
- Lighthouse accessibility audit in devtools — catches contrast and missing labels.
- Zoom the page to 200% — overlapping text and clipped buttons surface immediately.
Automated tools only cover about a third of accessibility issues, but that third happens to be exactly what AI gets wrong most often. Good return for the effort.
This isn't only an ethics question
In many jurisdictions, accessibility requirements for public-facing websites carry legal force. "An AI generated it" is not a defence. You published it; you own it.
Prompts in the MotionSites library carry these accessibility constraints by default.