Making an AI-generated website accessible

Why this matters

Accessibility decides whether people using screen readers, keyboards, magnification or voice control can use your site at all. It also overlaps heavily with general quality: labelled forms are easier for everyone, and readable contrast helps anyone on a phone in sunlight. The reference standard is the Web Content Accessibility Guidelines (WCAG) 2.2, and many accessibility laws point to its level AA.

The problems AI builders produce most often

Text that's too faint

Light grey on white and mid-grey on dark backgrounds look refined in a mockup and fail in real use. Fix: body text needs a contrast ratio of at least 4.5:1 against its background, and large text at least 3:1. Check the muted text colour especially, since it's usually the one that fails.

Form fields without labels

Generated forms often rely on placeholder hints instead of labels. The hint disappears as soon as someone types, and screen readers may announce nothing useful. Fix: give every field a visible <label> connected to it, and keep the hint as extra guidance only.

Clickable things that aren't buttons or links

A <div> with a click handler looks like a button but can't be reached with the Tab key or activated with Enter, and isn't announced as a button. Fix: use <button> for actions and <a href> for navigation. They come with keyboard support and the right semantics for free.

Focus outlines removed

Removing the browser's focus ring because it “looks ugly” leaves keyboard users unable to see where they are. Fix: keep a clear focus style. Styling it with :focus-visible shows it to keyboard users without flashing it on every mouse click.

Images with no text alternative, or the wrong one

Missing alt attributes leave screen reader users with a file name, and alternatives such as “image” or “hero image” say nothing. Fix: describe what the image shows and why it's there, such as “A barber trimming a client's beard at the front window”. For decorative images, use an empty alt="" so they're skipped.

Headings chosen for size, not structure

Generators often pick heading levels by how big they want the text, so a page may have three h1s and jump from h2 to h4. Screen reader users navigate by headings, so the outline matters. Fix: one h1 per page, then h2 and h3 in order, and set size with CSS.

Vague link text

“Click here” and “Learn more”, repeated down a page, mean nothing when a screen reader lists the links on their own. Fix: make link text describe where it goes, such as “See this week's menu”.

Motion that can't be turned off

Parallax, auto-playing carousels and large animated reveals can cause discomfort or nausea for some visitors. Fix: respect the prefers-reduced-motion setting and give anything that moves for more than a few seconds a way to pause.

Small touch targets and missing language

Tiny icon buttons are hard to hit on a phone, and a page without a lang attribute may be read aloud with the wrong pronunciation. Fix: make touch targets at least 44 by 44 pixels where you can (WCAG 2.2 sets a minimum of 24 by 24), and set <html lang="en"> or the right language for the page.

A 15-minute test anyone can run

1. Keyboard only. Put the mouse away and press Tab through the page. You should always see where focus is, reach every link, button and field, and be able to complete the main action.
2. Zoom to 200%. Text should reflow without overlapping or forcing you to scroll sideways.
3. Screen reader pass. Turn on the one built into your device (VoiceOver on Apple devices, Narrator on Windows, TalkBack on Android) and listen to the headings, links and form fields.
4. Contrast check. Use your browser's developer tools to check the contrast of body text and muted text.
5. Automated scan. Run Lighthouse or another automated checker. Treat it as a starting point: automated tools catch only some problems, and a clean score doesn't mean the page is accessible.

What Anticode checks automatically

On every build, Sentinel fails the page if a form field has no label or an image has no text alternative, and the Critic flags body text smaller than 16px. The design systems set a visible focus style and a lang attribute. Those checks don't replace the manual test above: whether alt text is accurate, whether contrast holds with your own colours and whether the page makes sense read aloud still need a person. For the rest of the pre-launch checks, see the AI website security checklist.