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

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

有意义的屏幕名称

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

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

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

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

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

逻辑控件顺序

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

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

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

备注

  • 预览 模式下,当编辑应用时,出于性能原因不更新控件顺序。 发布并运行应用后,顺序将是正确的。
  • 控件顺序与在 Power Apps Studio 中的控件树视图中所示的顺序不同。 树视图根据控件添加到应用的时间进行排序。 它不会影响应用运行时控件的顺序。

分组控件

默认顺序适用于独立的内容,但不适用于分组内容。 考虑使用 矩形 控件绘制的两个并排磁贴。 每个磁贴都有一个标题。 在标题下方是垂直堆积的两个按钮:用于第一个磁贴的 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 键导航。 它不会更改屏幕阅读器用户如何线性导航应用。 一些屏幕阅读器用户甚至不使用键盘。

在少数键盘导航顺序应不同于控件顺序的情况下,您可以自定义 TabIndex

后续步骤

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

另请参阅