Motion and WebGL carry real accessibility hazards: vestibular triggers, unlabelled controls, keyboard traps. VV components are built to avoid them, and each component's page flags exactly what it supports.
Reduced motion
Components that animate respect the visitor's prefers-reduced-motion setting automatically. When reduced motion is on, the heavy movement is disabled while the component stays functional. VideoCard's 3D tilt switches off, for instance, but the video still plays.
Look for the Reduced Motion badge on a component's page.
Tip: test it by turning on reduce-motion in your OS, or in Chrome DevTools under Rendering → "Emulate CSS prefers-reduced-motion".
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-labelwhen 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-cardandcinematic-textautoplay muted (which browsers allow); keep clips short and non-distracting. - Don't rely on color alone to convey state when you re-theme.
Next step
See Theming & customization to re-skin components safely, or browse the components.