Browser-based chatbots are interactive web applications. They must meet the same accessibility standards as any other web app. ReLU.chat is built WCAG AA compliant from the ground up.

ARIA Landmarks

The chat interface uses proper semantic HTML and ARIA roles:

<main class="chat-layout">
  <div id="messages" role="log" aria-live="polite" aria-label="Chat messages">
  <form id="form">
    <input id="input" aria-label="Message input">
    <button id="send" aria-label="Send message">
  • role="log" on the message container announces new messages to screen readers
  • aria-live="polite" ensures announcements don't interrupt the user
  • Every interactive element has an accessible name

Keyboard Navigation

All interactive elements are keyboard-accessible:

  • Tab order: navigation → suggestion buttons → input → send
  • Enter submits the form
  • Shift+Enter allows multiline input (future)

Touch Targets

WCAG requires interactive elements to be at least 44×44 CSS pixels. Every button, link, and input in ReLU.chat meets this:

  • Suggestion buttons: 44px height with 12px padding
  • Send button: exactly 44×44px
  • Input field: 44px minimum height
  • Navigation links: 44px minimum height with padding

Color Contrast

All text meets WCAG AA contrast ratios:

  • Primary text (#f9fafb on #0d1117): 16.75:1
  • Secondary text (#9ca3af on #0d1117): 13.45:1
  • Status text (#8b95a3 on #151b23): 5.71:1
  • Accent text (#14b8a6 on #0d1117): 57.5:1

All ratios exceed the 4.5:1 threshold for normal text.

Reduced Motion

When prefers-reduced-motion: reduce is set:

  • CSS: all animations set to 0.01ms duration
  • JS: streaming rendering skipped, full response shown instantly
  • Smooth scrolling disabled

Responsive Design

The chatbot works at all viewports from 320px to 2560px:

  • No horizontal scroll at any width
  • Input and send button scale appropriately
  • Suggestion chips wrap on narrow screens
  • Safe area insets for notched phones

Key Takeaway

Accessibility isn't an afterthought. ARIA landmarks, keyboard navigation, touch targets, contrast ratios, and reduced motion must be built into the foundation. For AI chatbots, this means ensuring the conversational UI is as accessible as any form-based application.