Accessibility in 2 hours – with AI instead of days of manual work

#webdev #a11y #ai #claudeai

This article was originally published on grossbyte.io.

Accessibility was on my list for months. I knew what needed to be done. I kept putting it off anyway — because it always felt like days of tedious work.

Last week I just did it. With Claude Code CLI in under 2 hours.

What was built

Not just the basics – the result exceeds WCAG 2.1 Level AA in the areas covered, including support for system preferences that go beyond the standard:

Semantic HTML & ARIA on every interactive element
Skip-to-content link, visible focus styles, focus trap in the mobile menu
prefers-contrast: more/less, prefers-reduced-motion, prefers-reduced-transparency, forced-colors: active
Manual .a11y-mode toggle in the header
Fully accessible contact form with aria-live, aria-busy, aria-describedby
iOS zoom fix for inputs below 16px font size

What surprised me

The quality. I expected to do a lot of manual follow-up. Instead, Claude Code implemented the ARIA patterns correctly – disclosure widgets, live regions, focus traps. These aren't trivial patterns.

Also: prefers-contrast: less and prefers-reduced-transparency are CSS features I had never actively implemented before. Claude Code not only included them but chose sensible color values too.

The honest take

AI doesn't replace understanding accessibility. You need to know what aria-live does, why a focus trap is necessary, and whether the contrast values make sense. But the implementation – writing the labels, adjusting CSS variables, adding role attributes across dozens of files – that's exactly what AI does well.

When it takes 2 hours instead of 2 days, there are no more excuses.

Full writeup with all implementation details: grossbyte.io