LibreChat logo

LibreChat Accessibility Audit

Web Accessibility Remediation for LibreChat AI Chat Application to make it conforms with the WCAG technical standards and comply with the ADA.

  • https://www.librechat.ai/
  • Accessibility Remediation, Accessibility Audit, React JS
  • Color Contrast Analyzer, Deque AXE, Jaws, NVDA, Voiceover, Talkback, Keyboard Testing
  • Daniel Avila
  • August 08, 2024
  • Chat Application

This LibreChat accessibility audit and WCAG 2.1 AA remediation covered the open-source AI-chat application that lets teams and individuals run a self-hosted, ChatGPT-style interface.

A chat interface is intensely interactive: message input, streaming responses, model and conversation controls. For a user relying on a screen reader or a keyboard, the accessibility of those controls and the live message area decides whether they can hold a conversation at all.

StandardWCAG 2.1 AA
IndustryOpen-source software
TestingManual + Automated
RegionInternational

Why accessibility is critical for an AI-chat interface

Software and SaaS companies are not exempt from accessibility expectations. Accessibility is a global expectation for digital products, and WCAG 2.1 Level AA is the standard, and for a product company it applies twice over — to the public marketing site and to the application itself. A conversational UI with live, streaming updates is easy to build in a way that screen readers cannot follow — so it needs deliberate care. A sign-up or demo form a screen-reader user cannot complete, or a product UI a keyboard user cannot operate, shuts paying customers and their own users out.

Scope and standard

Our LibreChat accessibility audit assessed the application and its site against WCAG 2.1 Level AA across the journeys that matter: the message input and send controls, streaming responses announced to assistive technology, conversation and model controls, settings, and navigation.

How we ran the LibreChat accessibility audit

  • Screen-reader testing with JAWS and NVDA on Windows, VoiceOver on macOS and iOS, and TalkBack on Android
  • Automated audits with Deque axe, Google Lighthouse and WAVE
  • Keyboard-only operation of every step, with attention to focus order and a clearly visible focus indicator
  • Colour-contrast analysis, plus 400% zoom and reflow testing for low-vision users

What accessibility means on each part of the site

Because LibreChat is a product-led site, our LibreChat accessibility audit focused on the marketing site and the path into the product:

  • Feature, solution and pricing pages need a clear heading structure and readable text, so a screen-reader user can evaluate the product.
  • Sign-up, login and demo-request forms need programmatic labels, clear instructions and announced errors, so getting started never depends on sight or a mouse.
  • Any interactive demo or product UI needs keyboard operability, managed focus and names and states that assistive technology can read.
  • Documentation and support content needs correct heading levels, readable code or examples, and link names that make sense out of context.
  • Navigation and content need visible focus, sufficient colour contrast and clean reflow at 400% zoom.

Outcome

This LibreChat accessibility audit, combining manual and automated testing with remediation, brought the site into line with WCAG 2.1 AA expectations, so people using a screen reader or a keyboard can use it without barriers. Every fix was verified with assistive technology rather than assumed from an automated pass, so the result holds up in real use.

Services we provided for this client