Keyboard & accessibility
Every interactive surface in AxisSynapse — the docs site you're reading and the live product — is designed against WCAG 2.1 AA. That means a keyboard-only path to every action, screen-reader semantics on every control, sufficient color contrast in both light and dark mode, and a reduced-motion fallback that respects your operating system's setting. This page is the disability-services buyer's first stop, the power-user's shortcut sheet, and the QA team's accessibility-test reference.
TL;DR —
⌘Kopens the global search.?opens in-product help.Tabwalks every interactive control. Theme, density, and motion preferences live in Account → Preferences. Everything we ship is keyboard-reachable, screen-reader friendly, and high-contrast in both light and dark.
Accessibility posture
AxisSynapse designs against three contracts at once:
- WCAG 2.1 AA conformance across every interactive surface. The design system tokens (color contrast, focus rings, tap-target sizes) are wired into the components so the conformance is structural, not per-page.
- Screen-reader friendliness with semantic HTML, ARIA labels on custom widgets, and live-region announcements for asynchronous feedback. We test against the latest stable VoiceOver (macOS, iOS), NVDA (Windows), and TalkBack (Android).
- Reduced motion that honors the operating system's
prefers-reduced-motionsetting. Decorative animations are swapped out for static states; functional motion (drawer slides, toast entries) drops to crossfades.
Independent accessibility audit
Our accessibility posture is independently reviewed and reported on in our compliance posture statement, available on the marketing site under Trust → Accessibility. Procurement teams typically ask for the latest VPAT — that document is the current, signed answer.
Keyboard shortcuts — global
Shortcuts that work from any page in the docs site and in the live product.
| Field | What it does | Accepted values / default |
|---|---|---|
| ⌘ K | Open the search palette. | Windows / Linux: Ctrl + K. Works from anywhere; the palette regains focus on Esc and re-open. |
| Esc | Close the palette, a drawer, a dialog, or a popover. | Universal. |
| ? | Open the in-product help drawer (inside the live app). | Reads the same MDX corpus as the docs site. |
| ⌘ P | Print the current page. | Chrome (left rail, top bar, right rail, footer) scrubs cleanly for evidence packs. |
| [object Object][object Object] | Go to the docs home (vim-style two-key sequence). | Inside the live app, G+H takes you to your workspace home. |
Keyboard shortcuts — search palette
| Field | What it does | Accepted values / default |
|---|---|---|
| NaN | Walk results in the palette. | Selection wraps at the top and bottom. |
| Enter | Open the highlighted result. | Cmd / Ctrl + Enter opens in a new tab. |
| Tab | Jump to the next group of results (Pages → Audit codes → Reference, etc.). | Shift + Tab walks backward. |
Tab navigation
Every interactive control on every page is reachable by Tab in
visual order. Skip-links appear when focus enters the page, letting
keyboard users jump past chrome:
Tab once to reveal "Skip to main content"
The first focusable element on any page is the Skip to main content link. Press
Enterto land on the article body without walking through the rail.Tab through the rail by sections
The left rail's module disclosure buttons are focusable; press
EnterorSpaceto collapse / expand a section. Tab continues into the expanded section's items.Tab into the right-rail TOC
The on-this-page rail is the last region in the tab order. Each heading link is a real anchor; pressing
Enterscrolls the article to that section.
Screen-reader support
| Field | What it does | Accepted values / default |
|---|---|---|
| Region landmarks | Every page declares <header>, <nav>, <main>, <aside>, <footer>. | Screen readers can jump between regions with their landmark shortcut (VoiceOver: VO + U). |
| ARIA labels on icon buttons | Every icon-only control carries an aria-label naming the action. | The collapse buttons in the left rail say 'Collapse Platform section'; the print button says 'Print this page'. |
| Live regions for async feedback | Toasts, validation messages, and search-result counts announce as live regions. | Politeness is tuned per kind — validation errors are assertive, result counts are polite. |
| Heading hierarchy | Every page is H1 → H2 → H3 with no skipped levels. | The TOC rail visually reflects the same hierarchy you hear in a screen-reader heading-list view. |
| Focus order matches visual order | Tab walks controls in the order they appear, not in arbitrary DOM order. | Verified against VoiceOver, NVDA, and TalkBack on every release. |
Visual preferences
Everything in this list lives in Account → Preferences in the live product. The docs site honors the same choices.
| Field | What it does | Accepted values / default |
|---|---|---|
| Theme | Light, dark, or follow the operating system. | System (default) tracks the OS appearance setting. Pick light or dark to force a single mode. |
| Color contrast | Default is the WCAG AA palette; an Increased contrast option swaps tokens for the AAA-conformant palette. | Increased contrast is what to recommend to users on glare-prone screens or with low-vision needs. |
| Density | Comfortable (default) gives generous spacing; Compact tightens tables and rails for power users. | Both densities meet AA tap-target sizes (44 × 44 px on touch surfaces). |
| Reduced motion | Honors the OS setting by default; can be overridden in either direction. | When on, decorative animations are static and functional motion drops to crossfades. |
| Locale | The language the chrome renders in. | 7 first-class locales: en-US, en-GB, fr-FR, fr-CA, es-ES, de-DE, pt-BR. Long-tail locales fall back to English with a 'translated' badge as content arrives. |
Color contrast at a glance
The design tokens that drive every page enforce contrast structurally, not page-by-page. The tokens land at the following minimums:
| Field | What it does | Accepted values / default |
|---|---|---|
| Body text on background | Default page text against the page surface. | ≥ 7.0 : 1 (AAA) in both light and dark. |
| Secondary text on background | Muted captions, metadata, eyebrow text. | ≥ 4.5 : 1 (AA). |
| Interactive control + text | Button labels, link text, form labels. | ≥ 4.5 : 1 (AA) against their background. |
| Focus ring | Visible focus indicator on every focusable control. | 3 px ring with ≥ 3 : 1 contrast against adjacent colors. |
Common gotchas
- "The shortcut doesn't fire." A browser extension may be
swallowing it. Disable the extension on
docs.axissynapse.comor on your workspace domain and retry. - "My screen reader reads the wrong heading order." Make sure you're on the latest stable release of your screen reader; older releases handle React 19's hidden landmark regions less consistently.
- "I can't see the focus ring." The reduced-motion preference doesn't affect the ring, but a custom OS theme might. Open Account → Preferences → Increased contrast as a temporary override.
- "The dark-mode logo is missing on my workspace." Your admin uploaded only the light-mode variant. Ask them to upload the dark variant from Branding your workspace.
Reporting accessibility issues
We treat accessibility regressions as functional bugs. If you find a page that fails a keyboard path, a screen-reader semantic, a contrast ratio, or a reduced-motion fallback, file the issue through your account team or the security inbox listed on the marketing site under Trust → Accessibility. Include the page URL, the browser + screen-reader version, and the expected vs actual behavior.
Related