Accessibility at Meridian
Meridian is a web app, and this is what its code, tests, and real-browser scans show today. It has a skip link, labeled landmarks, a header navigation that works at every width, and an axe-core scan that finds no serious or critical violations on its nine screens at 375 and 1,440 pixels in light and dark. Nobody has tested it with a screen reader or walked it with only a keyboard, and we do not claim a conformance level for it.
What Meridian supports today
Each line says what the product does, how we know, and where to look. “Not yet tested” means exactly that: we have not checked, and we do not claim it.
Partly supported
Keyboard operation
Every page starts with a skip link to the main content, and the header navigation, buttons, filters, and the timesheet's hour cells are standard links, buttons, and fields that take Tab focus. Dialogs are labeled and close on Escape. The code does not move focus into a dialog or trap it there, and nobody has walked every flow with only a keyboard.
Evidence
- frontend/src/components/Layout.tsx: the skip link to #main-content, and the header navigation
- frontend/src/components/Modal.tsx: role dialog, aria-modal, a labeled title, and Escape closes it; no focus handling
- frontend/src/pages/TimePage.tsx: each hour cell is a labeled field (for example Hours for a project on a date)
- A keyboard-only walkthrough of every flow has not been recorded.
Partly supported
Screen reader landmarks and labels
Pages have a main landmark and a labeled navigation, buttons and filters carry accessible names, table headers are marked as column headers, and the loading state is announced politely. An axe-core scan finds no violations on the nine screens. Meridian has not been tested with VoiceOver, NVDA, or any other screen reader, so how it reads aloud is unknown.
Evidence
- frontend/src/__tests__/accessibility.test.tsx: vitest-axe on the whole app and on eight routes (jsdom)
- screenshots/captures/meridian-a11y.spec.ts: axe-core 4.14.0 in a real browser, nine routes at 375 and 1,440 pixels in light and dark (36 scans), output/meridian/a11y.json, 10/29/2026
- On 10/29/2026 the scan found and we fixed unnamed buttons, an unnamed back link, and scrolling tables that a keyboard could not reach
- No screen-reader run is on record.
Partly supported
Contrast in light and dark
Before the 10/29/2026 scan the primary buttons measured 2.76 to 1 in light and 3.32 to 1 in dark and the Sent badge 4.24 and 3.9 to 1; both were fixed, and the scan's color-contrast rule now passes on all nine screens in both themes. The scan measures the screens as seeded, with text on its real backgrounds; it cannot judge every state, such as a hover or a disabled button.
Evidence
- meridian commits 1598a21 and 0af72f4 (buttons, the Sent badge, and Write Off), 10/29/2026
- screenshots/captures/meridian-a11y.spec.ts: the color-contrast rule, both themes, both widths, output/meridian/a11y.json
- No manual contrast measurement of hover, focus, or disabled states is on record.
Partly supported
Reduced motion
The design system's global stylesheet shortens animations and transitions to almost nothing when the system asks for reduced motion. This was read from the stylesheet and not checked in a browser with the setting turned on.
Evidence
- node_modules/@renkara/design-system/dist/tokens.css: a prefers-reduced-motion block
Not yet tested
Text resize and zoom
Nobody has tested Meridian at larger text sizes or browser zoom. The timesheet is a wide grid, so large text may push it into horizontal scrolling.
Partly supported
Mobile and touch
The header navigation collapses to a drawer on a phone, so every page is reachable at 375 pixels. The scan found no horizontal overflow on any of the nine screens at 375 pixels, and wide tables scroll inside a region the keyboard can reach. Nobody has used it on a phone for real work, and the timesheet is tight at that width.
Evidence
- frontend/src/__tests__/layoutNav.test.tsx: every page link is in the header navigation, and there is no sidebar
- screenshots/captures/meridian-a11y.spec.ts: page width against viewport width on every route at 375 pixels
- No hands-on phone session is on record.
No WCAG conformance level is claimed for the Meridian app. The tests are automated: axe-core run inside the app's unit tests (jsdom, no contrast checks) and axe-core 4.14.0 run in a real browser against the running app by the fleet screenshot harness on 10/29/2026, which does check contrast. Axe finds only some problems, so a clean scan is not a conformance claim. This site's own pages are scanned by the kit's axe-core run at 375 and 1,440 pixels in light and dark.
More about Meridian
Where to go with the keyboard
Meridian has no custom shortcuts. Everything is reached with the standard keys.
| Tab and Shift Tab | Move between the skip link, the header navigation, filters, buttons, and the timesheet's hour fields |
|---|---|
| Enter or Space | Press a button or follow a link |
| Escape | Close the open dialog |
What does not work yet
- Meridian has not been tested with a screen reader, and nobody has walked it with only a keyboard.
- Dialogs do not move focus in or return it, and the unnamed actions column in the tables is flagged by axe as a minor issue.
- Larger text sizes, zoom, and the Increase Contrast setting are untested.
- Marking an invoice paid plays a short sound from a shared package; whether it respects a quiet setting has not been checked.
- The automated scans cannot judge reading order, focus order, or how a screen reader announces a table.
How this site is built and checked
This site targets WCAG 2.2 level AA. That is a target we build and test toward, not a certification, and no one has audited it for conformance.
Structure
A skip link, labeled landmarks (header, navigation, main, footer), one h1 per page, and headings that do not skip levels.
Keyboard and focus
Links and buttons are native elements, so they work from the keyboard. Focus is drawn as a visible ring, and the menu closes with Escape.
Contrast
Text meets 4.5 to 1 in both the light and dark themes, checked against the stylesheet by the test suite.
Motion
Transitions and animation switch off when your system asks for reduced motion.
Small screens and zoom
Layouts hold at 375 pixels wide with no sideways scrolling, text resizes with the browser, and touch targets are at least 44 pixels.
Automated scan
Every page is scanned with axe-core at 375 and 1440 pixels in light and dark, and the checks fail on any serious or critical violation. Automated tools find only part of the problems, so this is a floor, not proof.
Images
Every product screenshot has a text description and comes in a light and a dark version that follows your theme.
Your theme choice
The theme follows your system setting until you pick one with the button in the header.
Tell us what is in your way
If something here or in Meridian does not work for you, write to Renkara Media Group. Say what you were doing, what you used, and what happened, and a person will answer.
Statement last reviewed 10/29/2026.