Accessibility at Courier

• Partly supported

  Keyboard operation

  A skip link and a visible focus ring are in place, every message row is a focusable control that opens on Enter or Space, and go-to chords (G then I, S, D, T, A, P, or R) and a shortcut sheet work. Courier defines more single-key shortcuts than the web client connects, so those do nothing. The scan reports no nested controls in the message rows.

  Evidence

  • frontend/src/components/layout/Layout.tsx: a Skip to main content link to the main landmark
  • frontend/src/global.css: a two-pixel focus-visible outline in the accent color on every control
  • frontend/src/components/mailbox/MessageRow.tsx: each row is role button with tabIndex 0 and an Enter and Space handler
  • frontend/src/hooks/useKeyboardShortcuts.ts: the go-to chords and the shortcut sheet
  • app-axe-scan.json: no nested-interactive finding in any of the 56 scans
  • A keyboard-only walkthrough of every flow has not been recorded.

• Partly supported

  Screen reader landmarks and labels

  The page has landmarks (header, sidebar navigation, main), the Live indicator announces its state, the star buttons and message headers have accessible names, and axe-core's name and role checks pass apart from one button on the contacts page and one unfocusable scrolling pane in the reply window. Courier has not been tested with a screen reader.

  Evidence

  • frontend/src/components/layout/Header.tsx: the connection indicator is a status region with aria-live polite
  • frontend/src/components/layout/Sidebar.tsx: the sidebar is an aside holding a nav
  • frontend/src/components/reading/MessageBubble.tsx: the message header reports aria-expanded and is named by its visible text
  • frontend/src/__tests__/axe-findings.test.tsx: tests for each name and target finding the scan led to
  • app-axe-scan.json: 14 page states at two widths in two themes; the serious findings open on these checks are label-content-name-mismatch on the contacts page and scrollable-region-focusable on the reply window's editor

• Partly supported

  Contrast in light and dark

  After fixes, text and controls pass axe-core's contrast rule in light and dark on every scanned state except one, the name of the open smart folder in the sidebar. The scan found white text on the dark theme's light-teal accent, gray text on a hard-coded fallback color, and red text on the dark surface, and each was fixed in Courier. Only the scanned states were checked, and no one has reviewed contrast by hand.

  Evidence

  • app-axe-scan.json: color-contrast reports one serious failure, the current smart folder's name in the sidebar, in the two 1440 pixel smart-folder scans; the other 54 scans have none
  • frontend/src/__tests__/axe-findings.test.tsx: fails if white text returns on the accent fill, or an undefined color variable with a gray or red fallback returns to the rules screens

• Partly supported

  Reduced motion

  The header checks the reduced-motion setting before animating, and the design system's global styles switch motion off when it is set. The rest of the app's transitions have not been audited and no test covers it.

  Evidence

  • frontend/src/components/layout/Header.tsx: uses the reduced-motion hook before animating
  • frontend/src/global.css: the reduced-motion rule is owned by the design system's tokens, as its own comment says

• Not yet tested

  Text resize and zoom

  Resizing text to 200 percent has not been tested, and several components set text in fixed pixel sizes.

• Partly supported

  Mobile and touch

  Below 768 pixels wide the sidebar folds into a menu drawer, the list fills the screen, and opening a conversation replaces it with the reading pane. No scanned state scrolls sideways at 375 pixels. Tap-target size was not measured.

  Evidence

  • app-axe-scan.json: no horizontal overflow in any of the 28 scans at 375 pixels
  • frontend/src/hooks/useMediaQuery.ts and the Sidebar drawer: the phone layout
  • screenshots/output/courier/inbox-phone_light.png and thread-phone_light.png: the phone views, captured at 375 by 812

No WCAG conformance level is claimed for Courier. Its README names WCAG 2.1 Level AA as a goal and says VoiceOver, NVDA, and JAWS were used; we found no record of any of that, so this site does not repeat it. The evidence is an automated axe-core scan run on 10/29/2026 (scripts/app-axe-scan.mjs, results in AVIAN/records/fleet-showcase/courier/app-axe-scan.json), unit tests for the fixes it led to, and reading the code. The app's own accessibility test only checks that landmarks and headings render; it never calls axe. No one has audited Courier against WCAG or tested it with a screen reader.

• 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.