Accessibility

Motion and WebGL carry real accessibility hazards: vestibular triggers, unlabelled controls, and keyboard traps. Vector Vesper components are built to avoid them, and each component's page flags exactly what it supports.

Reduced motion

Most components that animate respect the visitor's prefers-reduced-motion setting automatically. When reduced motion is on, heavy movement and parallax are disabled while the component stays fully functional. For example, VideoCard's 3D tilt switches off, but the video still plays.

Each component that does says so on its page, under Usage.

Implementing reduced motion in custom code

When authoring custom animations on top of Vector Vesper, you can check the user's preference in CSS or React:

/* In CSS */
@media (prefers-reduced-motion: reduce) {
  .custom-animated-element {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}

// In React, with Framer Motion
import { useReducedMotion } from "framer-motion";

export function CustomCard() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <div
      style={{
        transform: shouldReduceMotion ? "none" : "translateY(var(--card-y))",
        transition: shouldReduceMotion ? "none" : "transform 0.3s ease",
      }}
    >
      Accessible motion card
    </div>
  );
}

Keyboard & labelled controls

Interactive components ship with real semantics, not click-only divs. VideoCard, for example, has labelled play and mute buttons, a volume slider, and a seek control you can move with the arrow keys. Focus rings are visible by default.

Roles & ARIA

Decorative video and WebGL surfaces are marked aria-hidden so screen readers skip them. Components with a meaningful role carry the matching ARIA, and per-instance SVG filter IDs mean you can place several copies on one page without ID collisions.

What's still on you

• Pass an aria-label when you use an interactive component in an icon-only or ambiguous context; most accept one.
• Provide real alt text for any images you feed into gallery components.
• Mind autoplay — video-card and cinematic-text autoplay muted (which browsers allow); keep clips short and non-distracting.
• Don't rely on colour alone to convey state when you re-theme.

Next step

See Theming & customization to re-skin components safely, or browse the components.