跳到主要内容

语义(Semantics)

运行时支持正在开发中,或已作为实验性功能发布。参见功能支持中的语义。

语义(Semantics)描述了一个元素"是什么"以及"应如何被理解"。添加语义使你的交互体验具备可访问性(accessibility),让屏幕阅读器能够正确描述和导航你的内容。

架构:角色(Role)/ 特征(Trait)/ 状态(State)/ 操作(Actions)

运行时的语义

在运行时,语义会被转换为各平台的无障碍系统。

在 Web 上,这会创建可访问的 DOM 元素(例如带有 role 和属性的 div)。在 iOS 和 Android 上,会生成语义树(semantic tree)并暴露给系统的无障碍 API。

Rive 会自动处理语义到各平台的映射。关于哪些运行时目前支持语义,请参见功能支持。

添加语义(Adding semantics)​

添加语义

  1. 添加语义

    在场景中选择一个元素。在右侧边栏中,点击 语义(Semantics) 面板中的 + 按钮为该元素启用语义。

  2. 选择角色

    使用下拉菜单分配语义角色,如按钮、图像或标题。

  3. 配置属性

    更新元素的语义属性、特征和状态。

语义角色(Semantic role)​

语义角色定义了元素"是什么"(例如按钮或图像)。屏幕阅读器使用它来描述元素并决定其行为方式。

每个角色有不同的可用属性。

如果你的元素不匹配任何特定角色,可以将其设置为 None。

某些元素(如文本)会自动推断其语义角色。详见语义推断。

语义属性(Semantic properties)​

语义属性提供有关元素的附加信息,例如其标签、值或提示。

可用属性因所选语义角色而异。

标签(Label)​

标签描述元素是什么或做什么。这是屏幕阅读器播报的内容。

例如,控制音量的滑块可能有标签: 音量

文本元素会自动将其文本内容用作标签。详见语义推断。

标题(Heading,仅文本)​

文本元素可以标记为标题以定义结构和层级。

选项包括 None 和 Heading 1 到 Heading 6。

标题帮助屏幕阅读器用户更轻松地导航内容。

在 Web 上,Heading 1 映射为 <h1> 元素,Heading 2 映射为 <h2>,以此类推。

值(Value,仅输入元素)​

某些元素(如滑块和开关)具有反映其当前状态的 Value 属性。

例如,音量滑块的值可能是 70%。

使用数据绑定保持语义值与视觉状态同步。


特征(Traits)​

特征定义元素"可以做什么",而状态描述它"正在做什么"。

某些语义角色包含特征,例如 expandable(可展开)或 selectable(可选中)。启用特征后,其对应的状态即变为可用。

锁图标表示该语义角色必须包含的特征。例如,复选框始终包含 selectable 特征。


状态(State)​

状态表示节点的当前值。

例如,具有 selectable 特征的元素将具有 selected(已选中)状态。

某些状态标志仅在其对应特征被设置时才有意义。没有特征时,平台会将该属性视为不适用。

保持语义状态与你的 Rive 文件同步。例如,将视图模型中的布尔值绑定到开关的 toggled 状态。你也可以在时间线中为 toggled 状态设置关键帧。

隐藏(Hidden)​

将元素从无障碍树中隐藏。

不可见的元素(例如被布局或 Solo 隐藏的元素)会自动从无障碍树中移除,无需设置此属性。

当元素仍然存在于场景中(例如 opacity 设为 0)但不应对辅助技术暴露时,使用 Hidden。

禁用(Disabled)​

将元素标记为禁用且不可交互。

实时区域(Live Region)​

表示元素内容可能会动态更新,应由屏幕阅读器播报。

操作(Actions)​

语义操作是由辅助技术触发的交互事件。你可以监听这些操作并相应地更新你的交互体验。

添加操作​

  1. 创建监听器

    选择你的对象并创建新的监听器。

  2. 监听语义操作

    选中监听器后,在右侧边栏的 Listen to 下拉菜单中选择 Semantic Action。

  3. 设置操作类型

    选择要监听的操作类型。

操作类型(Types of actions)​

操作包括 tap(点击)、increase(增加)和 decrease(减少)。未来版本可能会添加更多操作。

Tap(点击)​

表示激活一个元素(类似于点击)。

当用户通过屏幕阅读器激活元素时,会触发 tap 操作。你应监听此操作并以与标准点击或指针交互相同的方式处理。

通常建议为同一元素同时添加 Click 和 Semantic Tap 监听器,以同时支持指针和辅助交互。

Increase / decrease(增加/减少)​

用于可调节元素,如滑块。

用户通过辅助技术触发这些操作——例如,用屏幕阅读器聚焦滑块并上下滑动,或使用键盘方向键。

你应监听 increase 和 decrease 并相应更新你的值。

语义推断(Semantic inference)​

某些角色和属性会根据其所应用的元素自动推断。

例如,当为文本元素添加语义时,角色会设置为 Text,值会自动从元素的文本内容派生。


测试语义(Testing semantics)​

添加语义只是第一步。你应始终在运行时测试你的交互体验,确保其行为符合预期。

小问题——如缺少标签或状态不正确——可能使屏幕阅读器用户感到困惑或无法使用元素。

运行时测试​

测试语义的最佳方式是使用屏幕阅读器。

  • macOS / iOS:VoiceOver
  • Android:TalkBack
  • Windows:Narrator 或 NVDA

打开屏幕阅读器并导航你的交互体验:

  • 在元素之间移动
  • 听取每个元素的播报方式
  • 与按钮、滑块和输入元素交互

检查要点​

测试时,请注意:

  • 标签 — 每个元素是否清楚地描述了它是什么或做什么?
  • 角色 — 是否播报了正确的角色(按钮、标题等)?
  • 值 — 动态元素(如滑块)是否报告了正确的值?
  • 状态 — 诸如已选中、已禁用或已展开等状态是否准确?
  • 顺序 — 导航是否遵循逻辑流程?
看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群