Skip to content

Accessibility

Novus is a free browser tool for making audio-reactive video with 13 engines. This page says what has actually been built for keyboard, screen-reader and reduced-motion users, what an automated test keeps from regressing, and (just as importantly) what has not been done.

What is implemented

Skip link on every route

The first thing the Tab key reaches on any page is a “Skip to content” link that jumps past the whole top navigation and moves focus into the page body. It is hidden visually until it takes focus, so it costs sighted mouse users nothing.

src/components/layout/AppShell.tsx

Exactly one main landmark per page

The app shell renders a single main landmark and no page adds a second one, so “jump to main content” in a screen reader is unambiguous. This is not a convention we hope holds: an automated test walks every file under src/app and src/components and fails the build if a second one appears.

src/components/layout/landmarks.test.ts

Ambient animation is off unless you ask for it, canvases included

Ambient page animation (drifting gradients, shimmer, pulse glows) is written so its static first frame is the default, and the keyframes are enabled only inside a prefers-reduced-motion: no-preference query. The animated canvases obey the same preference: the homepage hero paints one composed frame and stops, and every engine preview loads paused with a play control instead of starting itself. Setting the preference in your operating system stops all of it.

src/app/globals.css, src/lib/hooks/useReducedMotion.ts

A motion setting on the site itself, applied before the page paints

The control further down this page sets motion for this site: follow your system (the default), full motion, reduced motion, or no animation at all. Your choice overrides the operating system in both directions and is applied before the first frame, so there is no flash of the motion you asked not to see. “Reduced” and “off” are deliberately different: reduced keeps the short fades that tell you a control responded and keeps phone haptics, because reducing motion is a request about motion sickness, not a request to lose feedback.

src/lib/shared/motion.ts, src/lib/motion/preference.ts, src/components/motion/MotionPreferenceControl.tsx

Motion previews can be stopped by hand

Every live engine preview carries its own play/pause button, so motion can be stopped whether or not you have set a system preference, and previews already stop on their own when scrolled out of view or when the tab is hidden.

src/components/visualizers/V3LivePreview.tsx

Light and dark themes, applied before first paint

Your saved theme is applied by an inline script in the document head, so there is no flash of the wrong theme on load, which matters most to people who chose dark mode for light sensitivity.

src/app/layout.tsx

Named controls and dialog semantics

Icon-only buttons carry accessible names, decorative marks are hidden from assistive technology, navigation exposes the current page, and modal dialogs declare their role and expanded state so focus and announcement behave correctly.

aria-label / aria-hidden / aria-current / aria-modal across src/components

An automated audit runs against the real site

A browser test drives the axe-core rule set over fifteen representative pages of a real production build and fails on the WCAG 2.0/2.1 A and AA rules, colour contrast included. It is a ratchet: the outstanding findings are recorded per page and the test fails both when a new one appears and when a recorded one is fixed without being removed from the list, so the debt below cannot quietly grow and cannot be quietly forgotten.

scripts/browser/axe.spec.mts

Pages keep working without the network

A service worker caches visited pages and falls back to a dedicated offline page, so a dropped connection does not leave you on a browser error screen mid-task.

src/app/sw.ts, src/app/offline/page.tsx

Not done yet

These are real gaps, listed so you can decide whether Novus works for you rather than finding out halfway through a project.

  • No formal WCAG 2.1 audit and no VPAT. Nothing on this page should be read as a conformance claim; it is a description of what is implemented, verified against the source.
  • Focus-visible rings are applied through the shared button component and on the navigation, auth forms, cookie banner and template cards, but they are not yet enforced site-wide by a single global style. Some bespoke controls fall back to browser defaults.
  • The editor and Studio canvases are direct-manipulation visual tools. Core actions are reachable by keyboard through the surrounding panels, but the canvas itself has no non-visual equivalent, and building one is not a small change.
  • Exported video carries no caption or audio-description track. If you publish an export, add captions on the platform you publish to.
  • Visualizer output is motion by definition and some modes flash on the beat. There is no global “reduce output motion” switch yet; until there is, preview at a low reactivity setting before rendering a long export. Your motion preference stops the marketing previews, but it deliberately does not alter a composition you are editing or exporting. That is your document, not our decoration.
  • Most sliders and dropdowns in the Classic editor have no accessible name: their captions are plain text beside the control rather than labels attached to it, so a screen reader announces the control but not what it adjusts. The automated sweep records this and fails the build if it spreads, but the fix itself is not done.

Settings that help today

Motion on this site

Saved in this browser and applied before the page paints, so it takes effect on the first frame rather than after one. It changes the interface and the marketing previews only — a composition you are editing or exporting is your document and is never altered by it.

In force now: full. Everything animates, including engine previews.

  • Turn on “Reduce motion” in your operating system if you would rather set it once for every site. Novus reads it, and it is what the “Follow my system” option above uses.
  • Use the theme toggle in the top navigation to switch between light and dark. The choice persists and is applied before the page paints.
  • Browser zoom and OS text scaling work normally, because the layout is fluid rather than fixed-width.

Report a barrier

If something here blocks you, tell us what you were trying to do, the page you were on, and the assistive technology and browser you use. Accessibility reports are treated as defects, not feature requests. Email visualizers@novusstreamsolutions.com or use the contact page.

Related: Help Centre · System status · Privacy