Semantics

Semantics is currently only available in Early Access. Runtime support is in development or released as experimental.Have feedback? Join the Early Access community to share your thoughts and help shape the feature.

In the Rive Editor, you can add semantic meaning to certain elements of your graphic-roles such as button, checkbox, tab, image, list, dialog, and more. Alongside these roles, you can add associated labels, values, states, and actions. These settings vary per role. The React runtimes are thin wrappers around their JavaScript counterparts, so semantics behave identically here. This page covers only how to pass the opt-in parameters through useRive. See Web (JS) Semantics for how editor roles map to ARIA roles and DOM elements, which keyboard interactions fire which semantic actions, overlay positioning, and how to test with a screen reader. That page is the reference for everything on this one.

Semantics must be defined in the editor to have any effect. If an element has no semantics, it is not exposed to screen readers, regardless of the mode you set. See Feature Support for which runtimes currently support semantics.

Usage

Pass semanticsMode to useRive like any other Rive parameter. SemanticMode is re-exported from your React package, so you can import both from the same place.

import { useRive, SemanticMode } from "@rive-app/react-canvas";

export default function Login() {
  const { RiveComponent } = useRive({
    src: "/login.riv",
    stateMachines: "State Machine 1",
    autoplay: true,
    autoBind: true,
    semanticsMode: SemanticMode.Enabled,
  });

  return <RiveComponent />;
}

Labeling the Graphic

Use semanticsOptions.riveCanvasLabel to set an aria-label on the semantic overlay container describing what the graphic is, so screen reader users know what they are entering.

export default function Login() {
  const { RiveComponent } = useRive({
    src: "/login.riv",
    stateMachines: "State Machine 1",
    autoplay: true,
    autoBind: true,
    semanticsMode: SemanticMode.Enabled,
    semanticsOptions: {
      riveCanvasLabel: "Login Experience",
    },
  });

  return <RiveComponent />;
}

Enabling Semantics After Load

To control when semantics turn on, omit semanticsMode and call enableSemantics() on the rive instance returned by useRive.

import { useEffect } from "react";
import { useRive } from "@rive-app/react-canvas";

export default function Login({ accessibilityEnabled }) {
  const { RiveComponent, rive } = useRive({
    src: "/login.riv",
    stateMachines: "State Machine 1",
    autoplay: true,
    autoBind: true,
  });

  useEffect(() => {
    if (rive && accessibilityEnabled) {
      rive.enableSemantics();
    }
  }, [rive, accessibilityEnabled]);

  return <RiveComponent />;
}

Overlay Positioning

RiveComponent renders the <canvas> inside a container <div>. As described in overlay positioning, the overlay aligns best when the canvas has a positioned ancestor. That <div> container is not positioned by default. If your layout has no positioned ancestor above the component, pass a className that sets position: relative.

<RiveComponent className="rive-container" />

.rive-container {
  position: relative;
  width: 100%;
  height: 100%;
}

Runtimes

Integrations

Usage

Labeling the Graphic

Enabling Semantics After Load

Overlay Positioning

​Usage

​Labeling the Graphic

​Enabling Semantics After Load

​Overlay Positioning

Usage

Labeling the Graphic

Enabling Semantics After Load

Overlay Positioning