The term “vibe coding” didn’t even exist before 2025, but this AI-powered approach to generating code has already become the new normal, because it enables developers to ship software faster than ever.
AI can and should be a powerful tool in our arsenal as developers. It extends and augments our capabilities, helping us to be more productive when writing code. But that boost sometimes comes at a cost. AI-generated code is often sloppy, redundant, and inaccessible.
That’s a problem.
Now, obviously, bad code is not a new thing. It’s why we have testing tools. What’s new is how much of it we’re now producing—and how quickly—because of vibe coding.
What can we do?
If vibe coding makes it easier to produce code quickly (albeit sometimes with less-than-desirable accessibility experiences), vibe fixing is the obvious answer for how accessibility can keep pace.
Testing our code for accessibility is necessary, and thanks to modern AI workflows, accessibility testing is easier than ever. Fixing the issues returned from our testing is also easier than ever. This means we can get the same boost for accessibility testing as we get for coding, since we’re now enabled to fix those issues faster. If you want a demonstration of how simple it is to use AI for this, just request a demo here.
AI-generated code is often riddled with accessibility errors
Let’s look at a real-world example of completely AI-generated code. The code below was included in a recent blog post about using AI to convert Figma designs to React code.
import React from 'react';
import './index.css';
export default function Main() {
return (
<div className='main-container'>
<div className='header'>
<button className='cart-button'>
<span className='basket'>Basket (3)</span>
</button>
<span className='world-peas'>World Peas</span>
<span className='shop'>Shop</span>
<span className='newstand'>Newstand</span>
<span className='who-we-are'>Who we are</span>
<span className='my-profile'>My profile</span>
</div>
<div className='we-are-farmers'>
<span className='comma'>We're </span>
<span className='purveyors'>farmers</span>
<span className='comma-1'>, </span>
<span className='purveyors-2'>purveyors</span>
<span className='comma-3'>, and </span>
<span className='purveyors-4'>eaters</span>
<span className='of-organically-grown-food'>
of organically grown food.
</span>
</div>
</div>
);
}
This code is riddled with accessibility issues, including:
- no clear heading structure
- overuse of <span> tags
- no clear navigation or landmarks like <header>, <nav>, and <main>
- links treated as plain text that aren’t focusable
- a cart button without a proper accessible name or semantics for the item count
- hero text broken into multiple spans instead of a meaningful <h1>
These issues make the page impossible to use for screen readers and keyboard users. That’s bad for your customers, and it could cost your business in a big way—legally, financially, and reputationally. (For more on this, please read “Digital accessibility and the cost of exclusion.”)
As developers, we need a way to validate AI-generated code and ship responsibly. If AI is going to help us generate code at speed, then our accessibility checks must be AI-powered as well, so we can keep pace.
Vibe fixing gives accessibility novices the tools to create quality products
We’ve seen how some AI workflows don’t produce accessible results, and we’ve established why accessibility testing is critical if our applications are going to work for people who rely on assistive technology. What we now need is a solution that fits seamlessly into existing workflows. Many developers experimenting with vibe coding are already using MCP (model context protocol) servers to plug directly into their AI workflow, and we can use it the same way on the vibe fixing side.
With the axe MCP Server from Deque, your accessibility testing gets the same kind of “boost” that AI gives your coding. The axe MCP Server scans your project, flags accessibility issues, and provides fixes within your IDE. Since it uses the MCP protocol, it plugs directly into any agents you may likely be using, such as Windsurf, Cursor, or Copilot. That means you can simply ask Copilot to test your application and trust that you’re shipping code that’s accessible by design.
Vibe fixing in action
Vibe fixing within an MCP workflow is relatively simple. In my own workflow, I connected the axe MCP Server to VS Code and opened up Copilot in agent mode. From there, I could simply prompt in natural language like this:
#analyze http://localhost:3033/example-page for accessibility issues,
#remediate any violations, and reanalyze to verify fixesIn seconds, Copilot calls the axe MCP Server’s analyze tool, which runs a full accessibility scan in a browser using the axe DevTools Extension, and returns a list of issues. Then it uses the remediate tool to provide targeted, expert-level remediation guidance (actual code recommendations) that I can accept or tweak within my editor. Then, it can re-run the scan to confirm that everything was resolved. And, close the accessibility testing loop.
I’m used to juggling multiple monitors and testing localhost pages with Chrome DevTools, but having the testing run inside the IDE, with welcome fixes, has been a welcome shift. I’ve been using Copilot for a while, and the plug-and-play integration makes it feel like a natural extension of my workflow.
Use AI not just for speedy code, but accessible code
When used appropriately, AI can make us all more efficient, giving us superpowers that we didn’t have before and saving us a tremendous amount of time by performing the more mundane aspects of our work for us.
However, just because AI is here to stay doesn’t mean we should embrace it outright—we need to be thoughtful when using it.
We’ve just seen an example of how we can leverage AI to help us increase accessibility coverage in our projects, but we also just saw what happens when the code isn’t validated before we push it.
By combining vibe coding and vibe fixing, we can achieve accessibility at the speed of AI.
Would you like to learn more? Request a demo today and experience how the axe MCP Server works within your existing AI workflows and enables you to accelerate the creation of accessible experiences.