通过

辅助文本要求

  • 项目

本主题介绍通过确保颜色和背景满足必要的对比度来实现应用中的文本辅助功能的最佳做法。 本主题还讨论了通用 Windows 平台（UWP）应用中文本元素可以具有的Microsoft UI 自动化角色，以及图形中文本的最佳做法。

对比度

尽管用户始终可以选择切换到高对比度模式，但文本的应用设计应将此选项视为最后手段。 更好的做法是确保应用文本满足文本与其背景之间的对比度水平的某些既定准则。 对比度级别的评估基于不考虑颜色色调的确定性技术。 例如，如果在绿色背景上有红色文本，该文本可能无法读给有色盲障碍的人。 检查和更正对比度可能会阻止这些类型的辅助功能问题。

此处记录的文本对比度建议基于 Web 辅助功能标准 G18：确保文本（文本图像）与文本背景之间存在至少 4.5：1 的对比度。 本指南存在于 WCAG 2.0 规范的 W3C 技术中。

若要被视为可访问，可见文本必须具有最小亮度对比度为 4.5：1，而背景则为 4.5：1。 异常包括徽标和附带文本，例如属于非活动 UI 组件的一部分的文本。

装饰性文本，不会排除任何信息。 例如，如果使用随机字词创建背景，并且这些字词可以重新排列或替换而不改变含义，则这些单词被视为装饰性字词，并且不需要满足此标准。

使用颜色对比度工具验证可见文本对比度是否可接受。 有关可以测试对比度的工具，请参阅 WCAG 2.0 G18（资源部分） 的技术。

注意

WCAG 2.0 G18 技术列出的某些工具无法与 UWP 应用交互使用。 可能需要在工具中手动输入前景色和背景色值，或者对应用 UI 进行屏幕捕获，然后通过屏幕捕获图像运行对比度工具。

文本元素角色

UWP 应用可以使用这些默认元素（通常称为 文本元素 或 textedit 控件）：

当控件报表具有“编辑”角色时，辅助技术假定用户可以通过多种方式更改值。 因此，如果将静态文本放在 TextBox 中，则表示你正在错误地报告角色，从而将应用的结构错误地报告给辅助功能用户。

在 XAML 的文本模型中，有两个元素主要用于静态文本、TextBlock 和 RichTextBlock。 这两个 子类都不是控件 子类，因此它们既不能以键盘为焦点，也不能按 Tab 键顺序显示。 但这并不意味着辅助技术不能或不会阅读它们。 屏幕阅读器通常设计为支持在应用中读取内容的多种模式，包括专用阅读模式或导航模式，这些模式超出了焦点和选项卡顺序，例如“虚拟光标”。 因此，不要将静态文本放入可聚焦容器中，以便按 Tab 键顺序将用户置于该容器中。 辅助技术用户期望选项卡顺序中的任何内容都是交互式的，如果他们遇到静态文本，这比有帮助更令人困惑。 使用屏幕阅读器检查应用的静态文本时，应使用讲述人自行测试这一点，以便了解应用的用户体验。

自动建议辅助功能

当用户键入输入字段并显示潜在建议列表时，此类型的方案称为自动建议。 这在 “To：” 行、Windows 中的 Cortana 搜索框、Microsoft Edge 中的 URL 输入字段、天气应用中的位置输入字段等中很常见。 如果使用 XAML 自动建议框 或 HTML 内部控件，则默认情况下，此体验已关联到你。 若要使此体验易于访问，必须关联条目字段和列表。 这在 “实现自动建议 ”部分中进行了说明。

已更新讲述人，使这种类型的体验可通过特殊建议模式进行访问。 在高级别上，当编辑字段和列表正确连接时，最终用户将：

  • 知道列表存在且列表关闭时间
  • 了解可用的建议数
  • 了解所选项（如果有）
  • 能够将讲述人焦点移动到列表
  • 能够使用所有其他阅读模式浏览建议

建议列表
建议列表示例

实现自动建议

若要使此体验易于访问，条目字段和列表必须在 UIA 树中关联。 此关联与 桌面应用中的 UIA_ControllerForPropertyId 属性或 UWP 应用中的 ControlledPeers 属性相关联。

概括而言，有 2 种类型的自动建议体验。

默认选择
如果在列表中进行了默认选择，讲述人会在桌面应用中查找UIA_SelectionItem_ElementSelectedEventId事件，或者在 UWP 应用中触发 AutomationEvents.SelectionItemPatternOnElementSelected 事件。 每次选择更改时，当用户键入另一个字母和建议或用户浏览列表时， 应触发 ElementSelected 事件。

具有默认选择的列表
默认选择的示例

无默认选择
如果没有默认选择（例如在天气应用的位置框中），则讲述人会在每次更新列表时查找桌面UIA_LayoutInvalidatedEventId事件或 UWP LayoutInvalidated 事件。

没有默认选择的列表
没有默认选择的示例

XAML 实现

如果使用默认的 XAML 自动建议框，则所有内容都已为你挂钩。 如果要使用 TextBox 和列表进行自己的自动建议体验，则需要在 TextBox 上将列表设置为 AutomationProperties.ControledPeers。 每次添加或删除此属性时，都必须为 ControlledPeers 属性触发 AutomationPropertyChanged 事件，并触发自己的 SelectionItemPatternOnElementSelected 事件或 LayoutInvalidated 事件，具体取决于你的方案类型，本文前面对此进行了介绍。

HTML 实现

如果在 HTML 中使用内部控件，则已为你映射 UIA 实现。 下面是已为你挂钩的实现示例：

<label>Sites <input id="input1" type="text" list="datalist1" /></label>
<datalist id="datalist1">
        <option value="http://www.google.com/" label="Google"></option>
        <option value="http://www.reddit.com/" label="Reddit"></option>
</datalist>

如果要创建自己的控件，则必须设置自己的 ARIA 控件，这在 W3C 标准中进行了说明。

图形中的文本

尽可能避免在图形中包含文本。 例如，作为图像元素显示在应用中的图像源文件中的任何文本都不会自动被辅助技术访问或可读。 如果必须在图形中使用文本，请确保 所提供的 AutomationProperties.Name 值等效于“替换文字”包括该文本或文本含义摘要。 如果要从矢量创建文本字符作为路径的一部分或使用字形，则类似的注意事项适用。

文本字体大小和字号

当使用的字体太小时，用户可能会在阅读应用中的文本时遇到困难，因此首先要确保应用程序中的任何文本大小合理。

完成显而易见的操作后，Windows 将包含各种辅助功能工具和设置，用户可以利用这些工具和设置，并根据自己阅读文本的需求和偏好进行调整。 这些设置包括：

  • “放大镜”工具，其可以放大 UI 的选定区域。 应确保应用中的文本布局不会让使用放大镜进行阅读变得困难。
  • “设置”->“系统”->“显示”->“缩放和布局”中的全局缩放和分辨率设置。 究竟有哪些大小设置选项可用可能有所不同，因为这取决于显示设备的功能。
  • “设置”->“辅助功能”->“显示”中的文本大小设置。 调整“放大文本”设置，以仅指定所有应用程序和屏幕上支持控件中的文本大小（所有 UWP 文本控件都支持文本缩放体验，无需任何自定义或模板）。

注意

“放大所有内容”设置允许用户仅在其主屏幕上指定其首选的文本和应用大小。

各种文本元素和控件都有 IsTextScaleFactorEnabled 属性。 此属性默认具有 true 值。 为“true”时，可以缩放该元素中文本的大小。 此缩放对 FontSize 较小的文本的影响程度比对 FontSize 较大的文本的影响更大。 可以通过将元素的 IsTextScaleFactorEnabled 属性设置为 false 来禁用自动调整大小。

有关更多详细信息，请参阅文本缩放。

将以下标记添加到应用并运行它。 调整“文本大小”设置，并查看每个 TextBlock 会发生什么情况。

XAML

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been left set to its default value of true."
    Style="{StaticResource BodyTextBlockStyle}"/>

<TextBlock Text="In this case, IsTextScaleFactorEnabled has been set to false."
    Style="{StaticResource BodyTextBlockStyle}" IsTextScaleFactorEnabled="False"/>

不建议禁用文本缩放，因为跨应用缩放 UI 文本是用户的重要辅助功能体验。

还可以使用 TextScaleFactorChanged 事件和 TextScaleFactor 属性来了解对手机上文本大小设置的更改。 方法如下：

C#

{
    ...
    var uiSettings = new Windows.UI.ViewManagement.UISettings();
    uiSettings.TextScaleFactorChanged += UISettings_TextScaleFactorChanged;
    ...
}

private async void UISettings_TextScaleFactorChanged(Windows.UI.ViewManagement.UISettings sender, object args)
{
    var messageDialog = new Windows.UI.Popups.MessageDialog(string.Format("It's now {0}", sender.TextScaleFactor), "The text scale factor has changed");
    await messageDialog.ShowAsync();
}

TextScaleFactor 的值是个双数，范围是 [1,2.25]。 最小文本按此数量纵向扩展。 可以使用值来缩放图形以匹配文本。 但请记住，并非所有文本都按相同的因素进行缩放。 一般来说，较大的文本是首先，它受缩放的影响就越小。

这些类型具有 IsTextScaleFactorEnabled 属性：

示例

提示

打开 WinUI 3 库应用并查看文本辅助功能支持。

WinUI 3 库应用包括大多数 WinUI 3 控件、特性和功能的交互式示例。 通过 Microsoft Store 获取应用，或在 GitHub 上获取源代码