Web Accessibility in the Age of AI Chat

Web Accessibility in the Age of AI Chat

~ 3 min read

#accessibility #ai #frontend #web development

TL;DR

If your blog is accessible, it’s already 80% optimized for AI chat.

  • Use semantic HTML and a clean reading order
  • Mark up your chat UI like a proper dialog
  • Expose main content clearly (<main>, <article>, headings)
  • Announce chat updates via ARIA live regions
  • Don’t hide meaning in CSS, JS, or images

Accessibility isn’t just for screen readers anymore, it’s how AI understands your site.

Why Accessibility Suddenly Matters More

AI chat is becoming a new way people consume content:

  • On-page AI chat widgets answering questions about articles
  • Desktop and mobile AI apps summarising or querying webpages
  • Browser-level AI assistants reading tabs directly

In all cases, the AI doesn’t “see” your site visually.
It parses structure, semantics, and text, much like a screen reader.

That means:

WCAG-compliant HTML is now AI-compatible HTML

Connecting an AI Chat to Blog Content

There is no magic HTML attribute that links a chat <div> to your article.

You must explicitly provide content to the AI, usually by:

1. Extracting the Main Content

The simplest and most effective approach:

const articleText = document.querySelector("main")?.innerText;

Send this text as part of the AI’s system or context prompt:

“You are an assistant for this blog post. Answer questions using only the provided article text.”

This works well for blogs and avoids over-engineering.

2. Let Structure Do the Heavy Lifting

If your content is properly structured:

  • <main>
  • <article>
  • Logical heading hierarchy

You can reliably extract only meaningful content and ignore navigation, footers, and ads.

This is why semantics matter.

Marking Up the Chat Interface (Accessibly)

Treat your AI chat like a modal dialog, not a floating div.

The 80/20 Essentials

Chat toggle button

<button
    aria-haspopup="dialog"
    aria-controls="chat-dialog"
    aria-expanded="false"
>
    Open chat
</button>

Chat container

<section id="chat-dialog" role="dialog" aria-labelledby="chat-title">
    <h2 id="chat-title">Article chat</h2>
</section>

Announcing AI Responses

New messages should be announced automatically:

<div role="log" aria-live="polite">
    <!-- AI responses appear here -->
</div>

Keyboard & Focus Rules

  • Focus moves into the chat when opened
  • Focus is trapped inside until closed
  • Focus returns to the trigger button when closed

Structuring Blog Content for Humans and AI

Semantic HTML (Non-Negotiable)

Use elements for what they mean, not how they look:

<main>
    <article>
        <h1>Article title</h1>
        <h2>Major section</h2>
        <p>Paragraph text…</p>
    </article>
</main>

Avoid div soup.

Headings Are Your Knowledge Graph

  • One <h1>
  • Don’t skip levels
  • Use headings to reflect ideas, not visual size

Bad:

<a href="/post">Read more</a>

Good:

<a href="/post">Read more about accessible AI chat</a>

Alt Text Is AI Metadata

Alt text is often the only description AI has of an image.

Why This Works for External AI Chat Apps

Browser and app-based AI tools:

  • Don’t run all your JavaScript
  • Often ignore visual layout
  • Rely heavily on raw HTML and text order

Final Takeaway

The accessibility tree is the AI interface.

If a screen reader can understand your page,
an AI probably can too.

Have you ever checked your site out using a text-only browser like Lynx for example?

Accessibility isn’t a constraint, it’s the foundation.

all posts →