Accessibility at Vigil

• Partly supported

  Keyboard operation

  A skip link jumps to the main content, focus shows a 2 pixel outline, Escape closes the add-site, scan, page-detail, site-detail, and incident dialogs, and cards are focusable buttons. List rows, incident rows, and sortable column headers can only be used with a mouse.

  Evidence

  • the Vigil repo's frontend/src/index.css (skip link and :focus-visible rule) and frontend/src/App.tsx (skip link, main landmark)
  • frontend/src/components/SiteDetailModal/__tests__/IncidentDetailModal.test.tsx: Escape closes the incident dialog and only that dialog
  • Not yet walked end to end with a keyboard alone.

• Partly supported

  Screen reader landmarks and labels

  Pages use a main landmark, a labeled region for each group of sites, and live regions (role alert on the alarm banner and on errors, role status on loading and scan progress). The incident dialog used to sit inside an element hidden from assistive technology; that is fixed and tested. The site panel is not announced as a dialog, the latency chart has no text alternative, and the sparkline is decorative.

  Evidence

  • frontend/src/accessibility.test.tsx: vitest-axe finds no violations on the dashboard route with no sites loaded
  • frontend/src/components/SiteDetailModal/__tests__/IncidentDetailModal.test.tsx: the dialog has no aria-hidden ancestor
  • No screen reader (VoiceOver, NVDA, or JAWS) has been run against Vigil, and axe has not been run on the screens with data.

• Not yet tested

  Contrast in light and dark

  Contrast was not measured on the screens with data in either theme.

• Partly supported

  Reduced motion

  The design system's stylesheet shortens CSS animation and transition durations when the reduced-motion setting is on. Motion done in JavaScript (cards and panels sliding in) does not follow that setting yet.

  Evidence

  • the Renkara design system's tokens.css, imported by Vigil's index.css: a prefers-reduced-motion rule
  • Vigil's frontend source has no reduced-motion setting for its Framer Motion animations.

• Not yet tested

  Text resize and zoom

  Zoom and larger default text sizes were not tested.

• Not yet tested

  Mobile and touch

  The layouts have mobile rules, but a phone-sized pass has not been done on the screens with data. Many controls are smaller than 44 pixels (the header icon buttons are about 28).

No WCAG conformance level is claimed for Vigil. The evidence is one automated axe-core test of the dashboard in its empty state, unit tests for the fixed dialog, and a read of the code. The product README states a WCAG 2.1 Level AA target; that is a goal, and several lines in it (screen reader testing, 44-pixel touch targets, animations disabled under reduced motion) are not backed by anything we found.

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