Accessibility at Beacon

• Partly supported

  Keyboard operation

  Every control in the sidebar and header can be reached with Tab in reading order, starting with a skip link, and each one shows a focus indicator.

  Evidence

  • renkara-tools/screenshots/captures/beacon.spec.ts: a Tab walk of 24 stops on the dashboard (the skip link, 13 sidebar links, the collapse button, the search box, the theme toggle, the user menu, the quick actions, the About button, and the bug reporter), with no stop missing a visible focus indicator
  • A keyboard-only walkthrough of every flow has not been recorded, and the campaign and segment builders are prototypes that are not yet wired.

• Partly supported

  Screen reader landmarks and labels

  The app has a skip link, landmarks, and labeled controls, and axe-core finds no serious or critical problems other than contrast and one name mismatch. It has not been tested with a screen reader.

  Evidence

  • beacon.spec.ts runs axe-core on eight views in both themes: the only serious findings are color-contrast and label-content-name-mismatch (the six campaign cards on the campaigns view, whose accessible names differ from their visible text)
  • frontend/src/__tests__/accessibility.test.tsx in the Beacon repo runs vitest-axe on the app and ten routes

• Not supported

  Contrast in light and dark

  axe-core reports low-contrast text on all eight main views in both themes: muted text drawn at 70 percent opacity, accent-colored text on pale accent pills, and white on the accent button when hovered. This is not fixed yet.

• Not yet tested

  Reduced motion

  The Renkara design system's styles honor the reduced-motion setting, but Beacon's own tests do not check it, and the charts and animated outreach screens have not been tried with it on.

• Not yet tested

  Text resize and zoom

  Resizing text to 200 percent has not been tested.

• Partly supported

  Mobile and touch

  Eight main views fit a 375 by 667 phone screen with no sideways scrolling. Tap-target size and touch use have not been measured.

  Evidence

  • beacon.spec.ts: the dashboard, content, campaigns, contacts, social, analytics, landing pages, and experiments views each measure 0 pixels of horizontal overflow at 375 by 667

No WCAG conformance level is claimed for Beacon. We ran automated checks only (axe-core on eight views in both themes), and the app fails the color-contrast check on every one of them. No one has audited it against WCAG or tested it with assistive technology.

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