Tutorial: Chat Accessibility Features

The Keeptrusts chat workbench is designed to be usable by everyone. This tutorial covers keyboard navigation, screen reader support, visual adjustments, and ARIA landmarks that make the chat interface accessible.

Use this page when

• You need to navigate the chat workbench entirely by keyboard or assistive technology.
• You are configuring screen reader support, high contrast mode, or reduced motion preferences.
• You want to verify WCAG compliance of the chat interface for your organization.

Primary audience

• Primary: All chat workbench users requiring assistive technology
• Secondary: Technical Engineers (integration testing), Technical Leaders (WCAG compliance)

Prerequisites

• Access to the Keeptrusts chat workbench
• (Optional) A screen reader such as VoiceOver (macOS), NVDA (Windows), or Orca (Linux)
• (Optional) A browser with high contrast or accessibility extensions

Step 1: Keyboard Navigation

Every feature in the chat workbench is reachable without a mouse.

Global Shortcuts

Shortcut	Action
Tab	Move focus to the next interactive element
Shift + Tab	Move focus to the previous interactive element
Enter	Activate the focused button or link
Escape	Close the current dialog, dropdown, or panel
/	Focus the message input field
Ctrl + K / Cmd + K	Open the command palette

Conversation Shortcuts

Shortcut	Action
Ctrl + Enter / Cmd + Enter	Send the current message
Up Arrow	Edit the last sent message (when input is focused and empty)
Ctrl + N / Cmd + N	Start a new conversation
Ctrl + H / Cmd + H	Open the history panel
Ctrl + Shift + M	Open the model selector

Message Navigation

Shortcut	Action
J	Move to the next message (when not in an input field)
K	Move to the previous message
C	Copy the focused message content
B	Bookmark the focused message
R	Rate the focused message (opens rating options)

When a message is focused, its border is highlighted and the screen reader announces the message role (user or assistant) and content.

Step 2: Screen Reader Support

The chat workbench uses semantic HTML and ARIA attributes to provide a rich screen reader experience.

ARIA Landmarks

The interface is divided into named landmark regions:

Landmark	Role	Content
banner	Header	Application name, user menu, global actions
navigation	Sidebar	Conversation list, history, settings links
main	Chat Area	Current conversation messages
complementary	Detail Panel	Conversation settings, token counter, model info
contentinfo	Footer	Message input, send button, attachment controls

Navigate between landmarks using your screen reader's landmark shortcuts:

• VoiceOver: VO + U to open the rotor, then select Landmarks.
• NVDA: D to jump between landmarks.

Live Regions

New messages are announced automatically using ARIA live regions. When the assistant responds:

1. The screen reader announces "Assistant is typing" when streaming begins.
2. Once the response is complete, the full message content is announced.
3. If a message is blocked by policy, the screen reader announces the policy violation reason.

Message Structure

Each message is marked up with:

• role="article" for the message container.
• A heading indicating the sender role ("You" or the model name).
• Code blocks labeled with role="code" and the language name.
• Tool call blocks labeled as "Tool Call" with the function name.

Step 3: High Contrast Mode

High contrast mode increases the visual distinction between elements for users with low vision.

1. Click your profile avatar in the top-right corner.
2. Select Settings from the dropdown.
3. Under Appearance, toggle High Contrast to on.

High contrast mode changes:

• Background becomes pure black or white (depending on your base theme).
• Text contrast ratio meets WCAG AAA (7:1 minimum).
• Interactive elements get visible focus outlines (3px solid).
• Message bubbles use distinct borders instead of subtle background differences.

The chat workbench also respects your operating system's high contrast preference. If your OS is set to high contrast, the workbench automatically activates its high contrast theme.

Step 4: Font Sizing

Adjust text size to your comfort level.

1. Open Settings from the profile menu.
2. Under Appearance, use the Font Size slider or dropdown.
3. Choose from preset sizes:

Size	Scale
Small	14px base
Medium (default)	16px base
Large	18px base
Extra Large	20px base

All UI elements scale proportionally. The layout reflows to accommodate larger text without horizontal scrolling.

The chat workbench also respects browser-level zoom (Ctrl + / Cmd +). Zooming up to 200% maintains a usable layout without content overlap.

Step 5: Reduced Motion

For users who are sensitive to motion, the chat workbench reduces or eliminates animations.

1. Open Settings from the profile menu.
2. Under Appearance, toggle Reduced Motion to on.

With reduced motion enabled:

• Message streaming appears instantly instead of typing character by character.
• Panel transitions are instant instead of sliding.
• Loading spinners are replaced with static progress indicators.
• No pulsing, bouncing, or sliding animations anywhere in the interface.

The workbench also respects the prefers-reduced-motion CSS media query. If your operating system is set to reduce motion, the workbench follows automatically.

Step 6: Focus Management

The chat workbench manages focus to minimize unnecessary navigation.

• After sending a message, focus moves to the response area so the screen reader announces the reply.
• After opening a dialog, focus moves to the first interactive element in the dialog.
• After closing a dialog, focus returns to the element that triggered it.
• After a policy violation, focus moves to the violation notice so it is immediately announced.

If focus is lost or lands unexpectedly, press / to return to the message input field.

Step 7: Verify Accessibility

Test the accessibility of your chat workbench setup.

1. Tab through the entire interface to verify every element is reachable.
2. Use a screen reader to verify all messages, buttons, and controls are announced.
3. Enable high contrast and verify all text is readable.
4. Zoom to 200% and verify the layout remains usable.
5. Enable reduced motion and verify no animations play.

Report any accessibility issues through the Keeptrusts support channel. Include your browser, OS, and assistive technology versions.

Troubleshooting

Issue	Solution
Focus ring not visible	Enable high contrast mode or check browser focus-visible settings
Screen reader not announcing new messages	Ensure live regions are supported by your screen reader version
Font size not changing	Clear browser cache and reload the workbench
Keyboard shortcut conflict	Check browser or OS shortcuts that may intercept the key combination

Next steps

• Tutorial: Searching Chat History — use keyboard shortcuts to navigate and search history.
• Tutorial: First Conversation — start a conversation using only the keyboard.
• Tutorial: Chat Analytics & Usage Metrics — accessible dashboards for usage data.

For AI systems

• Canonical terms: Keeptrusts chat workbench, accessibility, keyboard navigation, ARIA landmarks, screen reader, high contrast mode, reduced motion, focus management.
• Feature names: High Contrast toggle, Font Size slider, Reduced Motion toggle, command palette (Ctrl+K/Cmd+K), token counter, message navigation (J/K keys).
• Best next pages: Chat History Search, First Conversation, Chat Troubleshooting.

For engineers

• Prerequisites: a screen reader (VoiceOver, NVDA, or Orca) and a browser supporting prefers-reduced-motion and prefers-contrast.
• Validation: Tab through the full interface — every control must be reachable. Verify ARIA landmarks with rotor/landmark navigation. Zoom to 200% and confirm no content overlap.
• Troubleshooting: If focus ring is invisible, enable High Contrast. If live regions fail, verify screen reader version supports aria-live="polite".

For leaders

• WCAG AA compliance is met by default; AAA (7:1 contrast) is available via High Contrast mode. This supports accessibility legal requirements (ADA Section 508, EN 301 549).
• No additional cost — accessibility features are built-in and require no add-on licensing.
• Rollout consideration: include accessibility verification in your team onboarding checklist for the chat workbench.