Seven accessibility problems AI builders leave behind.

01Why it gets missed

When you prompt a builder, you judge the result by looking at it. Accessibility is mostly about what you cannot see: the structure a screen reader reads aloud, the order the Tab key moves through, the labels attached to form fields. A page can look perfect and be unusable without a mouse.

Colour contrast is the other big one, and it gets its own post. These are the seven we find next most often.

02The seven

1. Images with no alt text, or useless alt text

Either the alt attribute is missing, or it says “image” or the file name. Meaningful images need a short description of what they show. Decorative ones should have an empty alt so screen readers skip them.

2. Clickable things that are not buttons or links

A div with a click handler looks like a button but cannot be reached with the keyboard and is not announced as a button. Generated code does this often with cards, tabs and custom toggles. Use a real button or link element.

3. Focus styles removed

Many generated stylesheets remove the focus outline because it looked untidy in a screenshot. Keyboard users then cannot see where they are on the page. A visible, on-brand focus style fixes it.

4. Form fields without labels

Placeholder text inside the field is not a label. It disappears as soon as someone types, and many screen readers do not announce it reliably. Every field needs a label, even if it is visually tucked away.

5. Headings chosen for size, not structure

An H4 used because it looked the right size, three H1s on one page, a section with no heading at all. Screen reader users jump between headings to scan a page, so the order has to make sense.

6. Menus and modals that trap or lose focus

Open the mobile menu with the keyboard and focus stays behind it on the page. Or a modal opens and Escape does nothing. Both are common in generated components that were only ever tested with a mouse.

7. Motion with no way to turn it down

Parallax, auto-playing carousels and big scroll effects can make some people feel sick. Operating systems have a reduce motion setting, and sites should respect it.

03How to check your own site

• Unplug the mouse. Press Tab from the top of the page. Can you see where you are, reach every link and button, and open and close the menu?
• Run a free checker. Lighthouse in Chrome DevTools, or the WAVE browser extension, will flag missing alt text, labels and contrast in a minute.
• Look at the heading outline. Most checkers list headings in order. It should read like a table of contents.
• Try a screen reader for five minutes. VoiceOver on a Mac or iPhone, or NVDA on Windows. Listen to your homepage once.

“A page that only works with a mouse is a page that works for some of your visitors.”

04Automated checks are a start, not a pass

Automated tools only catch part of the real issues. They can tell you an image has no alt text, but not whether the alt text is any good. They cannot tell you the Tab order is confusing. Treat a clean report as the minimum, then do the keyboard test yourself.

05Questions people ask