The AI Elephant in the Room

Let’s talk about what nobody wants to admit: AI is probably writing a lot of your code now. Or will be soon.

And that AI? It learned to code from the internet.

The same internet where 96% of homepages have accessibility failures.

Think about that for a second. When you ask AI for a “button,” it’s drawing from millions of examples. And 96% of those examples are probably wrong. It’s like learning to drive by watching crash compilations.

The Uncomfortable Truth About AI Code

Here’s what happens when you ask AI for common UI patterns:

You: “Create a modal dialog”

AI: Confidently generates a focus-trapping nightmare made of divs with no escape route

You: “Add a dropdown menu”

AI: Delivers something that looks perfect but is completely invisible to screen readers

You: “Make an accessible form”

AI: Adds aria-label=”accessibility” to random elements and calls it done

The AI isn’t malicious. It’s just pattern matching. And the patterns it learned? They’re mostly broken.

Real Examples of AI Sabotage

Let me show you what I mean. These are ACTUAL outputs from popular AI coding assistants when asked for “accessible” components:

<!-- AI's "accessible" button -->

<div 

  className="btn btn-primary" 

  role="button" 

  onClick={handleClick}

  aria-label="Submit button for form"

>

  Submit

</div>

What’s wrong here? Everything:

• It’s a div pretending to be a button
• No keyboard support
• Redundant ARIA
• The aria-label adds nothing useful

Or this beauty:

<!-- AI's "accessible" modal -->

<div className="modal" role="dialog">

  <div className="modal-content">

    <span className="close" onclick="closeModal()">&times;</span>

    <h2>Welcome!</h2>

  </div>

</div>

Missing:

• Focus management
• Keyboard escape
• aria-labelledby
• Proper close button
• Background interaction prevention
• Focus return on close

The “Just Write Better Prompts” Myth

Everyone says “just write better prompts!” Like it’s that simple.

So you try:

“Create an accessible modal with proper ARIA labels, focus management, keyboard navigation, and screen reader announcements.”

And the AI gives you:

<div 

role="dialog" 

  aria-modal="true" 

  aria-label="Modal" 

  aria-describedby="modal" 

  aria-hidden="false"

  tabindex="0"

>

  <!-- A massacre of conflicting ARIA -->

</div>

It heard “accessible” and “ARIA” and just… threw everything at the wall. Because that’s what it’s seen humans do. Throw ARIA at accessibility problems like spaghetti, hoping something sticks.

What AI Gets Consistently Wrong

1. Focus Management
AI almost never handles focus correctly. It doesn’t understand that focus needs to:

• Move to the modal when it opens
• Stay trapped inside
• Return to the trigger when it closes

2. Semantic HTML
AI loves divs. LOVES them. Even when there’s a perfect HTML element right there:

<!-- AI generated -->
<div class="navigation-menu">

<!-- Should be -->

<nav>

3. ARIA Overuse
AI treats ARIA like accessibility pixie dust. Just sprinkle it everywhere!

<!-- AI's idea of "extra accessible" -->

<button 

  role="button"  <!-- Redundant -->

  aria-label="Click to submit"  <!-- Weird phrasing -->

  aria-pressed="false"  <!-- Wrong usage -->

  aria-role="submit"  <!-- Not even real -->

>

4. Keyboard Interaction
AI regularly forgets that not everyone uses a mouse:

// AI's "interactive" element

<div onClick={handleClick}>Click me!</div>

// No onKeyPress, no tabindex, no nothing

5. Screen Reader Announcements
AI doesn’t understand how screen readers actually work:

<!-- AI trying to be helpful -->

<span class="sr-only">Click here to</span>

<button>Submit</button>

<!-- Screen reader hears: "Click here to Submit button" -->

So What Do We Do?

You need to know enough to:

1. Spot the BS immediately
   
   • That div button? Nope.
   • That aria-label on a heading? Useless.
   • That modal you can’t escape? Trap.
2. Fix it or reject it
   
   • Don’t accept bad patterns
   • Know the correct implementation
   • Test with actual assistive tech
3. Teach the tools (maybe)
   
   • Reject bad output consistently
   • Provide corrections
   • Some tools learn from feedback (most don’t)
4. Verify everything
   
   • Tab through it
   • Screen read it
   • Break it intentionally

The Real Cost

This isn’t just about code quality. When AI generates inaccessible code and developers ship it:

• A screen reader user can’t complete their purchase
• A keyboard user gets trapped in your modal
• Someone using voice navigation can’t click your “button”
• A person with cognitive disabilities can’t figure out your form errors

Real people. Real barriers. Created by artificial intelligence and shipped by real developers who trusted it.

The Bottom Line

AI doesn’t care if your site works for everyone. The AI’s job is to generate code that looks right. Your job is to make sure it actually works.

So yeah, use AI. Let it write your boilerplate. Let it handle the repetitive stuff. But for the love of all that is accessible:

• Never trust it blindly
• Always verify the output
• Know enough to spot the problems
• Test with real assistive technology

Because here’s the thing: You can blame AI for generating bad code. But you can’t blame it for shipping it.

That’s on you.

And now you know better.