Share via

在可访问画布应用中组织控件

  • 项目

应组织应用中的控件，以帮助屏幕阅读器用户按顺序导航。 逻辑顺序还可减少键盘用户的混乱，并帮助他们提高效率。

有意义的屏幕名称

加载屏幕时，屏幕阅读器将指出其名称。 选择一个有意义的名称来定位用户。

您可以在 Power Apps Studio 的控件树或属性面板中更改屏幕名称。 选择屏幕，然后选择 选择笔图标以编辑名称。 以重命名此屏幕。

可从控件树或属性面板中更改屏幕名称，如图片中突出显示的内容所示。

屏幕上的第一个元素是名称。 它在视觉上处于隐藏状态，仅供屏幕阅读器用户可访问。

加载新屏幕时，Power Apps 聚焦在屏幕名称上。 如果在加载屏幕后立即使用 SetFocus，将不会读取屏幕名称。 考虑创建可见标题，使其位于活动区域以声明上下文中的更改。

逻辑控件顺序

屏幕阅读器用户可以按顺序导航内容。 该顺序由控件的位置决定，首先从上到下，然后从左到右。 控件的大小并不重要，重要的只是其 X 和 Y 属性。

在此示例中，按顺序首先显示 A，因为它最靠近顶部。 B 和 C 的垂直位置相同，但是因为 B 更靠近左侧，因此，它显示在 C 之前。D 显示在最后，因为它离顶部最远。

定位如何影响 4 个控件的顺序。

备注

  • 在预览模式下，当编辑应用时，出于性能原因不更新控件顺序。 发布并运行应用后，顺序将是正确的。
  • 控件顺序与在 Power Apps Studio 中的控件树视图中所示的顺序不同。 树视图根据控件添加到应用的时间进行排序。 它不会影响应用运行时控件的顺序。
  • 当控件的 X 或 Y 值设置为表达式时，如果表达式的结果发生更改，不会更新控件顺序。 在保存应用时，使用应用的初始状态评估表达式，从而计算和固定顺序。
    • 如果您因为要隐藏或显示其他控件而更改其位置，可以使用自动布局容器来帮助您管理 X 和 Y。
    • 您也可以按逻辑方式放置所有控件，而不管表达式值如何。 例如，如果控件 A 应始终位于控件 B 下方，并且 B 有时可能处于隐藏状态，则将 A 的 Y 设置为 If(B.Visible, B.Y + B.Height, B.Y + 1)。 添加 1 可确保 A 始终位于 B 下方，即使 B 处于隐藏状态也是如此。

分组控件

默认顺序适用于独立的内容，但不适用于分组内容。 考虑使用**矩形** 控件绘制的两个并排磁贴。 每个磁贴都有一个标题。 在标题下方是垂直堆积的两个按钮：用于第一个磁贴的 A 和 B，以及用于另一个磁贴的 C 和 D。

错误做法的示例：在平面结构中组织控件。

默认顺序是从上到下，然后从左到右。 因此，控件的顺序是：

  1. 左矩形
  2. 右矩形
  3. 左标题
  4. 右标题
  5. A
  6. C
  7. B
  8. D

此结构并不表示 A 和 B 分组在一起，同样，C 和 D 也没有分组在一起。

使用**容器** 对相关内容进行分组。 容器中的所有控件将按顺序一起显示。 在容器内，控件按同一规则排序：从上到下，然后从左到右。

使用上一示例中的矩形替换容器，现在对于屏幕阅读器用户按逻辑顺序显示控件：

  1. 左容器
  2. 左标题
  3. A
  4. B
  5. 右容器
  6. 右标题
  7. C
  8. D

建议做法的示例：使用容器在层次结构中组织控件。

窗体卡 和**库** 中的所有控件将自动分组，因此不必使用容器。 但是，如果存在子组，您仍应该针对它们使用容器。

在此示例中，库行左侧有一个缩略图和两段文本。 右侧有两个按钮。 在视觉上和逻辑上，应对两组控件进行分组。 这将确保屏幕阅读器用户先看到左侧组，然后再看到右侧组。

建议做法的示例：在容器内对库中的相关控件进行分组。

逻辑键盘导航顺序

TabIndex 指定键盘用户如何访问控件。 TabIndex 应该为 0 或 -1。 通过如上所述的逻辑控件顺序，几乎没有理由将 TabIndex 设置为大于 0。

键盘导航顺序应遵循控件的可视流。 如果导航顺序出现意外，应该首先检查应用结构是否为逻辑结构。

备注

键盘导航顺序与控件顺序不同。 TabIndex 仅影响 Tab 键导航。 它不会更改屏幕阅读器用户如何线性导航应用。 一些屏幕阅读器用户甚至不使用键盘。

避免自定义选项卡索引

自定义选项卡索引是大于零的索引。 它们几乎一直是糟糕设计的信号。 有一些更好的选择，如创建适当的应用结构或使用 SetFocus 更改焦点。

由于以下原因，请避免使用自定义选项卡索引。

辅助功能

使用自定义选项卡索引是一个严重的辅助功能问题。 屏幕阅读器用户使用阅读器的逻辑结构在应用中导航。 自定义选项卡索引则会忽略该结构。 由于屏幕阅读器用户也可以使用 Tab 键导航，因此当他们得到与其他导航方法不同的顺序时，他们会感到困惑。

可用性

当某些项目似乎被跳过时，用户可能会感到困惑。 当焦点以不可预测的顺序移动时，他们可能会迷失方向。 这对于有认知障碍的用户来说问题更大。

维护

每当插入新控件时，应用制作者都必须手动更新多个控件的 TabIndex。 很容易会错过更新或把顺序搞错。

绩效

为了支持自定义选项卡索引，Power Apps 系统必须检查页面上的所有控件并计算适当的顺序。 此计算是一个密集的过程。 库 这样的容器控件对 TabIndex 如何对子控件起作用有复杂的规则。 系统将应用制作者所需的 TabIndex 映射到不同的值以遵守这些规则。 这就是为什么即使所有控件的 TabIndex 都设置为零，实际的 HTML tabindex 还会是某个正数。

与其他组件集成

自定义选项卡索引仅适用于内置控件。 未集成到 Power Apps 选项卡索引系统的控件将具有意外的导航顺序。 这可能是一个代码组件问题。 这些组件的开发人员必须跟踪交互式元素并对它们设置选项卡索引。 他们可能使用第三方库，甚至可能不提供自定义选项卡索引的方法。 另一方面，当所有选项卡索引都为 0 或 -1 时，则不需要涉及 Power Apps 选项卡索引系统。 应用中嵌入的任何第三方组件都会自动获得正确的选项卡顺序。

另一方面，当画布应用嵌入另一个网页时，自定义选项卡索引将不起作用。 例如，在自定义页面中。 Power Apps 无法控制画布应用之外的元素，因此整体选项卡导航顺序将不合逻辑。

简化的选项卡索引（预览）

为确保选项卡索引为 0 或 -1，从设置 > 即将推出的功能启用应用功能简化的选项卡索引。

启用“简化的选项卡索引”应用功能。

重要

  • 这是一项预览功能。
  • 预览功能不适合生产使用且功能可能受限。 这些功能在正式发布之前已经可用，以便客户可以及早使用并提供反馈。

启用此功能后，所有大于零的 TabIndex 值都将被视为零。 这还会禁用 Power Apps 选项卡索引系统，让它可以更好地与其他组件集成，如上所述。

自定义选项卡序列的解决方法

对于键盘导航顺序应该与视觉对象顺序不同的很少见的情况，您可以小心定位容器控件以实现相同的效果。

在下面的示例中，按钮 A 在按钮 B 上方。自然的选项卡导航顺序是 A，然后是 B。

两个具有相同 TabIndex 的按钮，垂直堆叠。

要反转选项卡导航顺序，将 B 放入一个 容器 控件中。 将容器的 Y 值设置为高于 A。应用结构现在在 A 之前有容器（和 B）。因此，选项卡导航顺序是 B，然后是 A。

B 被放入出现在 A 之前的容器中。

通过此技术，屏幕阅读器用户在不使用 Tab 键进行导航时也会在 A 之前遇到 B。

后续步骤

Power Apps 中具有辅助功能的颜色

另请参见