Accessibility

Loquix targets WCAG 2.1 Level AA. Components use semantic controls, keyboard interaction, ARIA state, focus management, and live status announcements where the pattern requires them.

What Loquix provides

Keyboard interaction

Interactive components support Tab, arrow-key navigation, Enter or Space activation, and Escape dismissal where applicable.

Semantic state

Controls expose roles and states such as aria-expanded, aria-selected, aria-pressed, status, toolbar, and listbox.

Focus behavior

Dialogs and popovers manage their focus behavior, while visible controls retain native keyboard focus.

Status communication

Typing and generation states provide text or accessible labels instead of relying only on animation.

Automated component stories are checked with axe-core. Automated checks catch many issues, but they do not prove that a complete application is accessible.

Your application is responsible for

Meaningful labels

Provide agent names, attachment filenames, visible status text, and instructions that make sense outside visual context.

<loquix-chat-header agent-name="Research assistant"></loquix-chat-header>
<loquix-message-avatar name="Research assistant"></loquix-message-avatar>

Page structure

Keep one logical page heading hierarchy around the chat. Loquix components do not decide whether the surrounding interface is a landmark, dialog, complementary panel, or primary page content.

Focus after application changes

When your code opens a chat panel, removes content, changes routes, or reports an error, move focus only when that helps the user continue. Do not move focus for every streamed token or new message.

Streaming announcements

Avoid sending every token to an assertive live region. Announce meaningful state transitions—such as “Generating”, “Stopped”, or “Response complete”—and leave the full response available as normal document content.

Color and theme overrides

When changing Loquix tokens:

keep normal text at a contrast ratio of at least 4.5:1;
keep large text and essential UI graphics at least 3:1;
preserve a visible keyboard focus indicator;
never use color as the only indication of error, success, or selection;
verify both light and dark themes.

Motion preferences

Do not add essential meaning only through animation. If your application introduces additional transitions, respect prefers-reduced-motion.

@media (prefers-reduced-motion: reduce) {
  .app-transition {
    animation: none;
    transition: none;
  }
}

Release checklist

Complete the main task using only the keyboard.
Test at 200% browser zoom without losing controls or content.
Check the chat with a screen reader in at least one supported browser.
Verify focus after dialogs, dropdowns, errors, and route changes.
Confirm labels for icon-only actions.
Test empty, loading, streaming, complete, stopped, and error states.
Check light mode, dark mode, high contrast, and reduced motion.
Run axe or an equivalent automated scanner on the integrated page.

Found an accessibility issue? Report it in the Loquix repository.