> ## Documentation Index
> Fetch the complete documentation index at: https://rive.app/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Semantics

> Make your Rive graphics accessible to screen readers by enabling semantics with useRive.

<Note>
  Semantics is currently only available in [Early Access](https://rive.app/downloads?utm_source=docs\&utm_medium=content). Runtime support is in development or released as experimental.

  Have feedback? Join the [Early Access community](https://community.rive.app/c/early-access/) to share your thoughts and help shape the feature.
</Note>

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](/docs/runtimes/web/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.

<Note>
  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](/docs/feature-support) for which runtimes currently support semantics.
</Note>

## Usage

Pass `semanticsMode` to `useRive` like any other [Rive parameter](/docs/runtimes/react/parameters-and-return-values). `SemanticMode` is re-exported from your React package, so you can import both from the same place.

```jsx highlight={1,9} theme={null}
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.

```jsx highlight={8-10} theme={null}
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`.

```jsx highlight={14} theme={null}
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](/docs/runtimes/web/semantics#semantic-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`.

```jsx theme={null}
<RiveComponent className="rive-container" />
```

```css theme={null}
.rive-container {
  position: relative;
  width: 100%;
  height: 100%;
}
```