VPAT 2.5
Accessibility Conformance
Voluntary Product Accessibility Template — ITI VPAT 2.5 (WCAG 2.2 Edition)
Last updated: February 2026
Our Commitment
FARchat is actively building toward WCAG 2.2 Level AA conformance and Section 508 compliance. This is a beta product and we are continuously remediating identified gaps. We evaluate accessibility using automated axe-core testing (Playwright) and manual keyboard review.
Conformance Summary
- Standard
- WCAG 2.2 Level AA
- Date
- February 2026
- Product
- FARchat Beta
- Overall Status
- Partially Supports
29
Supports
10
Partially Supports
0
Does Not Support
8
Not Applicable
Note: This VPAT covers the public-facing web application only. The authenticated chat interface shares the same architectural patterns but has additional UI complexity. A full audit of the chat interface is planned before general availability.
Product Information
- Product Name
- FARchat
- Version
- Beta
- Report Date
- February 2026
- Product URL
- https://farchat.app
- Contact
- support@farchat.app
- Accessibility Contact
- accessibility@farchat.app
- Conformance Standard
- WCAG 2.2 Level AA (ITI VPAT 2.5)
- Evaluation Method
- Automated testing with axe-core (Playwright), manual keyboard navigation testing, code review.
Verified Accessibility Features
- Skip to main content link (sr-only, visible on focus)
- lang='en' on root HTML element
- Semantic HTML: nav, main, footer, aside landmarks
- Heading hierarchy: single h1 per page, logical h2/h3 structure
- Form labels associated via htmlFor / id pairs
- Keyboard-navigable navigation, forms, and chat input
- Focus visible indicators via Tailwind ring utilities
- No keyboard traps (Radix UI Sheet/Dialog manages focus return)
- prefers-reduced-motion respected (animations disabled in CSS)
- WCAG AA color contrast tokens (audited design tokens in globals.css)
- Descriptive page titles via Next.js Metadata API
- autocomplete attributes on auth form inputs
- Responsive layout with content reflow at 320px viewport
- axe-core automated tests on all public pages via Playwright
WCAG 2.2 — Level A Criteria
Level A criteria are the minimum requirements for accessibility.
| Criterion | Level | Conformance | Remarks and Explanations |
|---|---|---|---|
| 1.1.1 Non-text Content | A | Partially Supports | UI icons from Lucide React are rendered as SVGs without aria-label or aria-hidden attributes on all instances. Decorative icons in navigation and footers lack explicit aria-hidden. The logo mark text ('FAR' + 'chat') uses visible text spans with no img role, which is acceptable. File attachment previews in the chat interface may lack descriptive alt text. Actively being remediated. |
| 1.2.1 Audio-only and Video-only (Prerecorded) | A | Not Applicable | FARchat does not include prerecorded audio-only or video-only content. |
| 1.2.2 Captions (Prerecorded) | A | Not Applicable | FARchat does not include prerecorded synchronized media. |
| 1.2.3 Audio Description or Media Alternative (Prerecorded) | A | Not Applicable | FARchat does not include prerecorded video content. |
| 1.3.1 Info and Relationships | A | Supports | Semantic HTML is used throughout: nav, main, footer, h1–h3 heading hierarchy, ul/li for lists, label/input associations in auth forms (htmlFor matching id), and table/thead/tbody/th/td for the WCAG conformance table. The chat sidebar uses aside and nav landmarks. The SidebarInset component wraps the main chat region semantically. |
| 1.3.2 Meaningful Sequence | A | Supports | Reading order follows DOM order throughout. Navigation precedes main content. Chat messages are rendered in chronological order using a semantic list structure. CSS positioning does not reorder content in a way that changes meaning. |
| 1.3.3 Sensory Characteristics | A | Supports | Instructions and UI affordances do not rely solely on shape, size, visual location, or sound. Button actions use both icons and text labels. Error states use both color and text descriptions. |
| 1.4.1 Use of Color | A | Supports | Color is not used as the sole means of conveying information. Status badges (Complete, In Progress, Pursuing, Planned) use both color and text labels. Conformance status in this table uses both a colored badge and text. Focus indicators use both color and a ring border. |
| 1.4.2 Audio Control | A | Not Applicable | FARchat does not autoplay audio. No audio content plays automatically. |
| 2.1.1 Keyboard | A | Partially Supports | Core navigation, login, register, and landing pages are keyboard-navigable as verified by Playwright tests. The sticky navbar, footer links, and auth forms are fully operable via keyboard. The mobile hamburger Sheet component uses a SheetTrigger with aria-label. The chat input uses a textarea with keyboard submit (Enter key). Some custom chat UI elements (artifact panel, code editor via CodeMirror) may have keyboard interaction gaps under investigation. |
| 2.1.2 No Keyboard Trap | A | Supports | Playwright keyboard navigation tests confirm Tab cycles through all interactive elements without trapping. The mobile navigation Sheet (Radix UI) manages focus correctly and returns focus to the trigger on close. The chat interface does not trap focus. |
| 2.2.1 Timing Adjustable | A | Not Applicable | FARchat does not impose time limits on user sessions or content interaction. Rate limits exist at the API level but do not affect individual interactions. |
| 2.2.2 Pause, Stop, Hide | A | Partially Supports | Streaming AI responses can be stopped via the Stop button in the chat input, which halts the stream. Loading skeleton animations respect prefers-reduced-motion (globals.css sets animation-duration to 0.01ms when reduced motion is preferred). The skeleton pulse animation does not have an explicit pause control outside of OS-level reduced motion settings. |
| 2.3.1 Three Flashes or Below Threshold | A | Supports | FARchat does not contain content that flashes more than three times per second. |
| 2.4.1 Bypass Blocks | A | Supports | A 'Skip to main content' link targeting #main-content is implemented in the root layout (app/layout.tsx). It is visually hidden by default (sr-only) and appears on focus with full styling. Playwright tests confirm skip navigation presence or <main> landmark as a fallback. |
| 2.4.2 Page Titled | A | Supports | All pages have descriptive <title> elements set via Next.js Metadata API. Titles follow the pattern 'Page Name | FARchat' (e.g., 'Accessibility Statement (VPAT) | FARchat', 'Login | FARchat'). |
| 2.4.3 Focus Order | A | Supports | Focus order follows the visual and logical reading order. The skip-nav link is the first Tab stop in the root layout. Navigation precedes main content in DOM order. Dialog/Sheet components (Radix UI) manage focus correctly by moving focus to the dialog on open. |
| 2.4.4 Link Purpose (In Context) | A | Partially Supports | Most links have descriptive text ('Privacy Policy', 'Documentation', 'Get Started'). Navigation links in the footer use descriptive labels. The mobile menu trigger uses aria-label='Open navigation menu'. Some icon-only buttons in the chat interface (e.g., file attachment, send) rely on aria-label attributes; coverage is being audited. External social links (Twitter, GitHub, LinkedIn) use visible text without additional context about opening in a new tab. |
| 2.5.1 Pointer Gestures | A | Supports | All functionality is operable with a single pointer. No multi-point gestures (pinch, swipe) are required. Chat input accepts click and keyboard submission. |
| 2.5.2 Pointer Cancellation | A | Supports | Button and link interactions use the standard browser mouseup/click model. No custom down-event-only handlers that cannot be cancelled. |
| 2.5.3 Label in Name | A | Partially Supports | Visible button text (e.g., 'Get Started', 'Login', 'Logout') matches accessible names. The mobile menu aria-label='Open navigation menu' matches the visible icon intent. Chat stop button uses both an icon and aria context. Some icon-only buttons in the chat UI are under review to ensure aria-label values match visible icon intent. |
| 2.5.4 Motion Actuation | A | Not Applicable | FARchat does not use device motion or user motion (tilt, shake) to trigger functionality. |
| 3.1.1 Language of Page | A | Supports | The root <html> element includes lang='en' as set in app/layout.tsx. This applies to all pages in the application. |
| 3.2.1 On Focus | A | Supports | No context changes occur on focus. Focusing navigation links, buttons, or form fields does not trigger navigation, form submission, or other unexpected changes. |
| 3.2.2 On Input | A | Supports | Form submissions require explicit user action (click or Enter key). Typing in the chat textarea does not submit the form automatically. The model selector dropdown opens on click, not on focus. |
| 3.3.1 Error Identification | A | Partially Supports | Authentication forms use HTML5 required attributes and type='email'/'password' which trigger native browser validation messages. Server-side auth errors are displayed as toast notifications via Sonner. Toast messages are announced to screen readers via the Toaster component (positioned at top-center). However, server-side form errors are not programmatically associated with specific input fields via aria-describedby; improving this is in progress. |
| 3.3.2 Labels or Instructions | A | Supports | All form inputs have visible <Label> elements with htmlFor associations matching input id attributes (email, password). Placeholder text supplements but does not replace labels. The contact form uses labeled fields. |
| 4.1.1 Parsing | A | Supports | Next.js 16 with React 19 produces well-formed HTML. Duplicate id attributes are avoided by using unique identifiers (form fields use 'email', 'password'; page sections use unique section ids). Automated axe-core tests check for parsing violations on all public pages. |
| 4.1.2 Name, Role, Value | A | Partially Supports | Standard interactive elements (buttons, links, inputs, selects) use native HTML semantics with correct roles and accessible names. Radix UI primitives (Sheet, Dialog, Dropdown) include appropriate ARIA attributes. The SheetTitle uses sr-only for screen-reader-only labeling of the mobile menu. Custom chat components (model selector, artifact panel, regulation filter) use Radix-based patterns but complete ARIA audit across all dynamic states (loading, streaming, error) is ongoing. |
WCAG 2.2 — Level AA Criteria
Level AA criteria are the target conformance level for Section 508 and most procurement requirements.
| Criterion | Level | Conformance | Remarks and Explanations |
|---|---|---|---|
| 1.3.4 Orientation | AA | Supports | FARchat does not restrict content to a single display orientation. The responsive layout works in both portrait and landscape orientations on mobile and tablet devices. |
| 1.3.5 Identify Input Purpose | AA | Supports | Auth form inputs use autocomplete attributes: email field has autocomplete='email', password field has autocomplete='current-password' on login and autocomplete='new-password' on registration. |
| 1.4.3 Contrast (Minimum) | AA | Supports | Design tokens are explicitly tuned for WCAG AA contrast. --muted-foreground is darkened to 4.66:1. --destructive is set to 5.2:1 with white. --accent-blue-text uses a darker shade at ~8.6:1 for text on white. --accent-blue-button achieves 7.68:1 with white text. Status badge text colors use dark variants (e.g., --status-complete-text at #146B32). Dark mode uses lighter variants verified for contrast on dark backgrounds. |
| 1.4.4 Resize Text | AA | Supports | Text is sized in relative units (rem, em) via Tailwind CSS utility classes. Content reflowes correctly at 200% browser zoom. The viewport meta tag sets maximum-scale=1 to prevent auto-zoom on form fields on iOS Safari, which is a UX tradeoff for mobile; this does not prevent manual zoom. |
| 1.4.5 Images of Text | AA | Supports | FARchat uses styled HTML text throughout. The logo ('FAR' + 'chat') is rendered as styled HTML text spans, not an image of text. No decorative text images are used. |
| 1.4.10 Reflow | AA | Supports | The responsive design uses Tailwind CSS breakpoints (sm, md, lg). Content reflows to a single column at 320px-equivalent viewport widths. Overflow is controlled (overflow-x: hidden on html/body) to prevent horizontal scrolling at 400% zoom on content that can be linearized. |
| 1.4.11 Non-text Contrast | AA | Partially Supports | Primary interactive UI components (buttons, form inputs) use border colors from the design token system (--border, --input) which have been audited. Focus rings use --ring token applied via Tailwind ring utilities. Icon-only controls in the chat interface (attach file, stop, send) rely on color alone for boundary definition in some states; a complete audit of non-text UI component contrast is in progress. |
| 1.4.12 Text Spacing | AA | Supports | Content is not clipped or hidden when user stylesheets increase line-height to 1.5x, letter-spacing to 0.12em, word-spacing to 0.16em, or paragraph spacing to 2x. Tailwind CSS flex/grid layouts accommodate text expansion. No fixed-height text containers that would clip overflowing text. |
| 1.4.13 Content on Hover or Focus | AA | Partially Supports | Tooltip components (shadcn/ui Tooltip via Radix) are dismissible (Escape key), hoverable, and persistent until dismissed. Dropdown menus remain visible when the pointer is moved over them. The model selector dropdown is closable. However, not all hover-triggered UI states (e.g., inline citation tooltips in AI responses) have been fully audited for dismissibility. |
| 2.4.5 Multiple Ways | AA | Supports | Users can access the same content via multiple paths: the navbar (top navigation), the footer (site-wide links to all legal/info pages), and direct URL entry. The chat interface is reachable from the navbar 'Chat' link, the landing page CTA buttons, and the /chat route directly. |
| 2.4.6 Headings and Labels | AA | Supports | All pages use a logical heading hierarchy starting with a single h1. Section headings are descriptive ('Accessibility Features', 'WCAG 2.2 Conformance', 'Known Limitations'). Form labels are descriptive ('Email Address', 'Password'). The chat sidebar uses labeled navigation sections. |
| 2.4.7 Focus Visible | AA | Supports | Focus indicators are implemented via Tailwind's focus-visible utilities and shadcn/ui's ring system (box-shadow ring). Playwright tests verify that the first Tab-focused element on the landing page has a visible outline or box-shadow ring. The skip-nav link becomes fully visible (styled with bg-background, px-4, py-2, shadow-lg, ring-2) on focus. |
| 2.4.11 Focus Not Obscured (Minimum) | AA | Supports | The sticky navbar uses z-50 positioning. Focused elements below the navbar are not fully obscured. The skip-nav link appears at top-4 left-4 with z-[100], above the navbar z-index. No sticky footer obscures focused elements. |
| 3.1.2 Language of Parts | AA | Not Applicable | FARchat is an English-language application. No passages or phrases in other languages are present that would require lang attribute overrides. |
| 3.2.3 Consistent Navigation | AA | Supports | The Navbar and Footer components are shared across all public pages with consistent link order and structure. The chat sidebar uses a consistent layout. Navigation order and presentation do not change between pages. |
| 3.2.4 Consistent Identification | AA | Supports | Components with the same function are identified consistently across pages. The 'Get Started' CTA always links to /register. The logo always links to /. Email contact links always use mailto: hrefs. The logout button is consistently labeled 'Logout'. |
| 3.3.3 Error Suggestion | AA | Partially Supports | Native browser validation provides error suggestions for email format and required fields. Server-side errors (e.g., 'Invalid credentials', 'Email already exists') are surfaced as toast notifications. However, suggestions for correcting errors are not always specific (e.g., the toast for a failed login does not suggest checking email vs. password). In-progress improvement. |
| 3.3.4 Error Prevention (Legal, Financial, Data) | AA | Not Applicable | FARchat does not facilitate legal, financial, or binding data transactions. The application is a research tool. Account deletion or destructive actions are not currently implemented in the beta. |
Known Limitations
FARchat is in beta. The following limitations are known and actively being remediated:
- Some SVG icons lack aria-hidden or accessible labels; full icon audit in progress
- Server-side form errors are not programmatically associated with specific input fields via aria-describedby
- Chat UI icon-only buttons (attach, send) need complete aria-label audit across all states
- Non-text contrast for some chat interface UI components needs full audit (1.4.11)
- Hover-triggered citation tooltip dismissibility in AI responses needs verification (1.4.13)
- CodeMirror-based code editor in artifacts may have keyboard navigation gaps (2.1.1)
Testing Methodology
Automated axe-core Testing
Playwright end-to-end tests run axe-core on all public pages. Zero violations are required before deployment.
Keyboard Navigation
Manual and automated keyboard traversal testing ensures all interactive elements are reachable and operable without a mouse.
Screen Reader Testing
VoiceOver on macOS and NVDA on Windows are used to verify landmark announcements, heading structure, and interactive element labels.
Cross-browser Coverage
Playwright tests run against Chromium, Firefox, and WebKit to ensure consistent behavior across rendering engines.
Report an Accessibility Issue
We welcome feedback on accessibility barriers you encounter in FARchat. We aim to respond within 2 business days.
When reporting, please include:
- Description of the barrier and what you were trying to do
- Page URL where you encountered it
- Browser, operating system, and assistive technology used