Accessibility at Docent

• Partly supported

  Keyboard operation

  Every control is a native link, button, or form field, and a skip link comes first. In a scripted run, Tab walked 40 stops on the episode list and 60 on a script review, and every stop inside the page showed an outline or a ring in its computed style. At phone width the strip of stages scrolls sideways and takes keyboard focus, with a ring inside the strip, so a keyboard visitor can scroll it. We have not walked every flow with a keyboard alone.

  Evidence

  • captures/docent-a11y.spec.ts in the fleet screenshot harness: a 40-stop Tab walk of the episode list and a 60-stop walk of a script review, 11/05/2026, after the fixes; no stop inside the page lacked an outline or box shadow (the walk's wrap-around to the browser's own controls is not counted)
  • The same run's axe-core scan reports no scrollable-region-focusable violation on any view at 375 pixels; the earlier run reported 12 serious nodes there
  • frontend/src/__tests__/a11y.test.tsx in the Docent repo fails if the stage strip stops taking focus or the focus rule is removed
  • No one has walked every flow with a keyboard alone.

• Partly supported

  Screen reader landmarks and labels

  axe-core, which checks names, labels, roles, and landmark structure, found no violation on seven views in light and dark at phone and desktop width. An earlier run found a heading level that skipped on the Cut view; the review panel's headings are now level 2 under the page's level-1 heading. Docent has not been tested with a screen reader.

  Evidence

  • captures/docent-a11y.spec.ts runs axe-core 4.14.0 on seven views in light and dark at 1440 and 375 pixels, 28 scans on the fixed app: no violations. The earlier run, before the fixes, found 12 serious nodes (scrollable-region-focusable, at 375 pixels) and 4 moderate nodes (heading-order, on the Cut view).
  • frontend/src/__tests__/a11y.test.tsx in the Docent repo checks that heading levels never skip on the Cut, Script, and Package views
  • captures/docent.spec.ts fails a capture on a serious or critical axe-core violation at 1440 pixels in each captured view; none was found there

• Supported

  Contrast in light and dark

  Text and controls are checked for contrast in both the light and dark themes, and the amber brand color is held to 4.5 to 1 on the card colors by a test.

  Evidence

  • axe-core color-contrast rule on seven views in both themes and at both widths (captures/docent-a11y.spec.ts): no violations
  • frontend/src/__tests__/brand.test.ts in the Docent repo recomputes the accent's contrast ratio from the stylesheet on the card background in both themes

• Not yet tested

  Reduced motion

  The design system's stylesheet shortens animation when a visitor asks for reduced motion, and Docent adds none of its own. The scripted run found no running animation on the episode list with or without the setting, so it could not tell the two apart, and a running episode's status icon and the film player were not exercised.

  Evidence

  • captures/docent-a11y.spec.ts counts running animations on the episode list with and without the preference: 0 and 0

• Not yet tested

  Text resize and zoom

  Resizing text to 200 percent has not been tested.

• Partly supported

  Mobile and touch

  All seven views fit a 375 pixel and a 320 pixel wide screen with no sideways scrolling of the page. At 375 pixels every control is at least 44 pixels tall except the skip link, which is hidden until it takes focus, and one 20 pixel checkbox on the script review.

  Evidence

  • captures/docent-a11y.spec.ts: horizontal overflow of the page at 375 and 320 pixels on seven views, none (14 checks)
  • The same scan counts interactive targets under 24 and 44 pixels and lists the smallest.

No WCAG conformance level is claimed for Docent. Its checks are automated and scripted only; no one has audited it against WCAG or tested it with a screen reader or other 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.

Statement last reviewed 11/05/2026.