Adaptive Cards 的无障碍使用提示

Copilot Studio 智能体在 Windows 系统上与屏幕阅读器（如 NonVisual Desktop Access (NVDA) 和 Job Access with Speech (JAWS)）配合良好。 若要优化无障碍功能，请考虑以下提示。

屏幕阅读器

对于自适应卡片的屏幕阅读器和键盘导航无障碍支持，以下几点至关重要。

  • 始终包括“label”属性：当用户聚焦于输入框时，屏幕阅读器会提示“label”属性。 如果没有它，屏幕阅读器可能只说“编辑字段”，没有上下文。 屏幕阅读器通常不会读取占位符，一旦用户开始键入，它们就会消失。 因此，请避免依赖它们来辅助无障碍功能。

    {
  "type": "Input.Text",
  "id": "middleName",
  "label": "Middle name (optional)",
  "placeholder": "Enter your middle name"
}

  • 深思熟虑地使用“inputStyle”和“style”：避免删除焦点指示器的自定义样式。 默认焦点环是键盘用户了解自己在卡片上所在位置的依据。

  • 对读者使用“isRequired”和“errorMessage”：即使对于可选字段，清晰的“errorMessage”也有助于屏幕阅读器传达验证反馈。

    {
  "type": "Input.Text",
  "id": "middleName",
  "label": "Middle name (optional)",
  "isRequired": false,
  "errorMessage": "Please enter a valid middle name"
}

  • 逻辑选项卡顺序：自适应卡遵循“文档对象模型”（DOM）的顺序进行选项卡导航，因此，请根据希望用户按顺序导航的方式设计卡片的 JSON 表示形式。 避免使用“ColumnSet”布局，这种布局在视觉上虽有逻辑顺序，但会让键盘用户的选项卡顺序变得令人困惑。

  • 操作按钮默认情况下可以通过键盘访问：“Action.Submit”和“Action.OpenUrl”等属性自然地可聚焦。 确保你的标题具有描述性，而不是像“单击此处”这样的模糊内容，因为屏幕阅读器大声朗读标题。

  • 添加“type”： “TextBlock”以获取说明：如果可选字段的一部分需要上下文，请在这些字段之前将“type”设置为“TextBlock”。 屏幕阅读器按顺序读取字段，为用户提供在到达输入之前所需的上下文。

    {
  "type": "TextBlock",
  "text": "The following fields are optional. You can skip them if not applicable.",
  "wrap": true
}

  • 在无障碍场景中避免使用 "isVisible": "false"：屏幕阅读器会完全跳过隐藏的元素。 如果无障碍功能是优先级，请保持可选字段可见。 如果必须隐藏它们，请确保切换具有清晰的描述性标签。

  • Microsoft Teams 中测试专业提示：由于Microsoft Teams 对自适应卡片的支持略有不同，我们建议你使用内置的 Windows 讲述人或 NVDA 来验证选项卡顺序，并且通知按预期工作。

特定架构属性

以下是自适应卡片架构中一些有助于提升无障碍性的具体属性。

“label”属性

“label”属性对于屏幕阅读器至关重要。 通过在标签和输入之间建立连接，呈现器库可以设置必要的属性，以允许用户使用辅助技术（如屏幕阅读器）与自适应卡片内的输入正确交互。

在 Input.Text 中了解详细信息。

为什么“label”在无障碍性方面优于“placeholder”？

建议使用“label”属性来标记自适应卡片输入参数，而不是“占位符”属性。 这是为卡片作者标记信息的简洁方法。

将“TextBlock”属性用作标签会阻止您强制要求输入框与标签之间保持邻近。 通过使用“label”属性，可以确保两个视觉元素彼此相邻呈现，这有助于需要屏幕放大镜的用户。

在 输入验证中了解详细信息。

使用“errorMessage”进行验证反馈

“errorMessage”属性可用于所有输入类型，以指定当用户输入无效值时要显示的消息。

在 输入验证中了解详细信息。

为无障碍结构设置 "style": "heading" 的 TextBlock

使用“style”：“heading”应用默认标题样式，并将 TextBlock 元素标记为可访问性标题。

在 TextBlock 元素中了解详细信息。

操作按钮 - 用于旁白的“工具提示”

“Action.ToggleVisibility”操作支持一个“工具提示”属性，该属性定义当用户将鼠标悬停在操作上时显示的文本。 旁白软件读取此文本。

在 Action.ToggleVisibility 中了解详细信息。

对于 Input 元素，请谨慎使用“isVisible”：“false”

保持输入元素的验证状态可见。 当隐藏的输入参数无效时，使用 "Action.ToggleVisibility" 进行验证的输入元素可能会造成混淆。

在 Action.ToggleVisibility 中了解详细信息。

Input.ChoiceSet 的"labelPosition"属性

对于“Input.ChoiceSet”，“labelPosition”属性确定标签的位置，可以是内联或者在上方（默认）。

在 Input.ChoiceSet 中了解详细信息。

  • Last updated on