Accessibility at Trellis

• Partly supported

  Keyboard operation

  Every control is a native link or button, so Tab reaches it and Enter or Space works it. A "Skip to main content" link is the first stop on every page, appears on focus, and jumps to the main region. Focus shows a 2 pixel outline in the accent color. Trellis has no keyboard shortcuts of its own. The profile menu in the header closes only when you click elsewhere, not when you press Escape, and the phone menu closes only by clicking its backdrop or a link. Nobody has walked every flow with only a keyboard.

  Evidence

  • frontend/src/ui/layout/Layout.tsx: the skip link as the first element, targeting main id main-content
  • frontend/src/index.css: .skip-link shown on :focus, and a global :focus-visible 2px outline
  • frontend/src/ui/layout/Header.tsx: the profile menu closes on a mousedown outside it, with no Escape handler
  • A keyboard-only walkthrough of every flow has not been recorded.

• Partly supported

  Screen reader landmarks and labels

  The page has a header, a sidebar, a navigation, and a main region. The header's icon buttons carry text labels (Toggle menu, the theme switch, User menu), the logo has alt text, the dashboard chart has a visually hidden table as its text alternative, and table headers declare column scope in 41 places. An automated axe-core scan of the whole app and ten routes finds no violations. But the sidebar's icons are plain symbol characters that are not hidden from assistive technology, so they are likely to be read aloud before each label, the navigation has no label of its own, and Trellis has not been tested with VoiceOver, NVDA, or any other screen reader.

  Evidence

  • frontend/src/accessibility.test.tsx: vitest-axe on the whole app and on the Dashboard, Invoices, Customers, Vendors, Bills, Expenses, Banking, Chart of Accounts, Balance Sheet, and Settings routes (11 tests, passing on 10/29/2026)
  • frontend/src/ui/layout/Header.tsx: aria-label on the menu, theme, and profile buttons; frontend/src/ui/layout/Sidebar.tsx: nav icons rendered as unhidden glyph characters
  • scope="col" on table headers in 41 places under frontend/src/ui, counted by search on 10/29/2026
  • frontend/src/ui/dashboard/Dashboard.tsx: a table with the sr-only class beside the income and expenses chart
  • No screen-reader run is on record.

• Partly supported

  Contrast in light and dark

  Trellis's emerald accent measures 6.33 to 1 against white in light mode and 6.48 to 1 against the dark card color in dark mode, both above 4.5 to 1. On 10/29/2026 an axe-core scan in a real browser found 84 serious color-contrast violations (accent buttons, the active sidebar link, status badges, and empty states); they were fixed the same day and a re-scan of 25 routes at 375 and 1440 pixels in both themes found no violation of any severity. Axe checks the text it can compute, so text over images, hover and focus states, and the Increase Contrast setting are unmeasured.

  Evidence

  • Computed on 10/29/2026 from frontend/src/index.css (--brand-accent 162 78% 24% light, 162 78% 40% dark) against white and the design system's dark card color
  • Fleet screenshot harness axe-core run (TRELLIS_A11Y=1 ./run.sh trellis), 10/29/2026: 100 scans, 0 violations of any severity after commits 02b524d and 06c4b9f (last run 7:13 PM CDT), 84 serious color-contrast before them
  • frontend/src/contrast.test.ts: the accent, badge, and empty-state color pairs are asserted at 4.5 to 1 or better

• Partly supported

  Reduced motion

  The design system's global stylesheet, which the app loads, shortens every animation and transition to almost nothing when the system asks for reduced motion. The app's own stylesheet adds no rule of its own and leans on that one. This was read from the stylesheet and not checked in a browser with the setting turned on.

  Evidence

  • frontend/node_modules/@renkara/design-system/dist/tokens.css: a prefers-reduced-motion rule setting animation and transition durations to 0.01 milliseconds
  • frontend/src/index.css: imports that stylesheet and notes that it owns the reduced-motion block

• Not yet tested

  Text resize and zoom

  Nobody has tested Trellis at larger text sizes or browser zoom. The page does not block zoom: its viewport tag sets no maximum scale. The sidebar is a fixed width and the tables are wide, so large text may crowd or scroll them.

• Partly supported

  Mobile and touch

  Below a tablet width the sidebar slides out of view, a menu button opens it over the page, and tapping the backdrop closes it. The tables have no mobile layout of their own, so how each page fits a phone has only been checked by an automated scan, and that scan found the Bank Transactions page wider than a 375 pixel screen, so it scrolls sideways.

  Evidence

  • frontend/src/ui/layout/Layout.tsx and Sidebar.tsx: the menu button, the off-canvas sidebar below the md breakpoint, and the backdrop
  • Fleet screenshot harness axe-core run, 10/29/2026: 25 routes at 375 pixels in light and dark: no violation of any severity, and sideways scrolling on one route, Bank Transactions (440 pixels wider than the screen); nobody has used the app on a phone

No WCAG conformance level is claimed for the Trellis app. The only accessibility tests on record are an automated axe-core scan in jsdom of the whole app and ten routes, and an axe-core scan in a real browser of 25 routes at 375 and 1440 pixels in light and dark (100 scans, run on 10/29/2026 at 7:13 PM CDT, after the app's contrast and heading fixes, against the seeded StrataForge books), which cannot judge real keyboard and screen-reader use. The claims below were read from the code and tests on 10/29/2026. This site's own pages are scanned by the kit's axe-core run in a real browser at 375 and 1440 pixels in light and dark.

• Trellis has not been tested with a screen reader, and its sidebar icons are not hidden from assistive technology.
• No one has walked the app using only a keyboard; the profile menu does not close on Escape.
• The Bank Transactions page is wider than a 375 pixel screen and scrolls sideways; the other 24 routes fit.
• Larger text sizes and the Increase Contrast setting are untested, and the app was not used on a phone.
• The automated tests are axe in jsdom and axe in a browser, which cannot check focus order or real screen-reader output.

Statement last reviewed 10/29/2026.