设计可访问应用指南

在设计应用时,请始终牢记,这些应用的用户各自的能力不同,偏好也不相同,还有一些可能为残疾人士。遵循这些辅助设计原则以确保尽可能多的受众能访问你的应用,并有助于将更多的客户吸引到 Windows 应用商店中你的应用。

为何规划辅助功能?

在设计应用时考虑辅助功能有助于确保你的应用适用于以下方案。

  • 屏幕阅读: 盲人或视觉受损的用户依赖屏幕阅读器帮助他们建立并保持你应用的 UI 的一个合理模型。听到有关 UI 的信息,包括 UI 元素的名称,帮助用户理解 UI 内容并与你的应用交互。

    若要支持屏幕阅读,你的应用需提供足够且准确的元素相关信息,包括名称、角色、描述、状态、值等。了解有关下列内容的详细信息:显示有关适用于 HTMLXAML 的 UI 元素的基本信息。

    还必须提供包含动态内容的 UI 元素的其他可访问信息,例如使用 JavaScript 的 Windows 运行时应用中 HTML 的活动区域。屏幕阅读器可通过其他辅助功能信息来公告对内容所做的更改。若要为某活动区域提供 HTML 格式的辅助功能信息,请在包含动态内容的所有元素上设置 aria-live 属性。 有关详细信息,请参阅使实时区域成为辅助区域。要为实时区域(使用适用于 XAML 实时内容的 ARIA 隐喻)提供辅助功能信息,请使用附加属性 AutomationProperties.LiveSetting

  • 键盘辅助功能: 键盘在使用屏幕阅读器时不可或缺,同时对于喜欢使用键盘作为与应用交互的更有效方式的用户来说,它也至关重要的。使用辅助功能应用,用户可以仅通过键盘访问所有交互式 UI 元素,它支持用户:

    • 使用 Tab 和箭头键导航应用。
    • 用空格键和 Enter 键激活 UI 元素。
    • 使用键盘快捷方式访问命令和控件。

    屏幕键盘是在没有物理键盘的系统上使用的,或者是为行动有障碍而无法使用传统物理输入设备的用户提供使用。

    了解有关适用于 HTMLXAML 的键盘辅助功能的详细信息。

  • 辅助视觉体验:视觉受损的用户需要以高对比度比率显示文字。他们还需要在高对比度模式下能显示很好的 UI,并可在“轻松使用”控制面板中更改设置后正确放大。在使用颜色传递信息之处,色盲用户需借助颜色替代物(如文本、形状和图标)才能阅读信息。了解有关支持适用于 HTMLXAML 的高对比度主题的详细信息。或是,了解有关下列内容的详细信息:满足适用于 HTMLXAML 的辅助文本的要求。

应做事项和禁止事项

  • 通过提供关于应用的 UI 元素的信息(包括名称、角色、描述、状态和值)支持屏幕阅读。
  • 让用户可以使用 Tab 键和箭头键导航你的应用。
  • 用空格键和 Enter 键激活 UI 元素。
  • 使用键盘快捷方式访问命令和控件。
  • 设计文本和 UI 以支持高对比度主题。
  • 确保文本和 UI 可在“轻松访问”设置更改时进行适当的缩放调整。
  • 请勿将颜色用作传递信息的唯一方式。 色盲用户无法接收仅通过颜色传递的信息,例如颜色状态指示器。包括其他视觉提示(最好是文本),以确保信息为辅助信息。
  • 请勿使用每秒钟闪烁次数超过 3 次的 UI 元素。 元素闪烁会致使一些人癫痫发作。最好是避免使用闪烁的 UI 元素。
  • 请勿自动更改用户上下文或激活功能。 仅当用户对具有焦点的 UI 元素直接操作时才会出现上下文或激活更改。 用户上下文更改包括更改焦点,显示新内容以及导航至其他页面。在无需用户干预的情况下进行上下文更改会使残疾用户不知所措。 此要求的例外情况包括:显示子菜单、验证表单、显示其他控件中的帮助文本以及更改上下文以响应异步事件。
  • 如果你使用的是 Windows 运行时应用随附的默认控件,或者是 Microsoft UI 自动化支持中已经实现的控件,应避免构建自定义 UI 元素。标准 Windows 运行时控件在默认情况下可以作为辅助功能应用,而且通常只需添加几个特定于应用的辅助功能属性即可。与之相反,为真正的自定义控件实现 AutomationPeer 支持会更为复杂(请参阅自定义自动化对等)。
  • 不要在 Tab 键顺序中放置静态文本或其他非交互元素(例如,通过为非交互元素设置 TabIndex 属性)。如果非交互元素在 Tab 键顺序中,这将违背键盘辅助功能指南,因为它会降低用户进行键盘导航的效率。许多辅助技术使用 Tab 键顺序和功能来聚焦某个元素,以此作为它们向辅助技术用户呈现应用界面的一部分逻辑。Tab 键顺序中的纯文本元素会给期望 Tab 键顺序中只有交互元素(例如按钮、复选框、文本输入字段、组合框、列表等)的用户造成困扰。
  • 避免使用 UI 元素的绝对定位(例如在 Canvas 元素中),因为表示顺序通常与子元素的声明顺序(即实际逻辑顺序)不同。 尽可能以文档或逻辑顺序排列 UI 元素以确保屏幕阅读器能够以正确顺序阅读这些元素。如果 UI 元素的可见顺序可以不同于文档顺序或逻辑顺序,请使用明确的 Tab 键索引值(设置 TabIndex)来定义正确的阅读顺序。
  • 除非应用功能的确需要,否则不要自动刷新整个应用画布。 如果需要自动刷新页面内容,请仅更新页面的某些区域。辅助技术通常必须假设已刷新的应用画布是全新的结构,即使有效的更改非常小也是如此。对于辅助技术用户来说,这样做的代价是已刷新的应用的任何文档视图或说明现在必须重新创建并再次提供给用户。

    注意  如果你确实刷新某个区域中的内容,请考虑将该元素上的 AccessibilityProperties.LiveSetting 辅助功能属性设置为非默认设置 PoliteAssertive 之一。某些辅助技术可以将此设置映射到活动区域的可访问富 Internet 应用程序 (ARIA) 概念,并因此通知用户某个内容区域已经发生更改。
    注意  用户有意启动页面导航是刷新应用结构的合法情况。但是,请确保启动导航的 UI 项已正确标识或命名,从而指示调用它将导致上下文更改和页面重新加载。

其他使用指南

使 HTML 自定义控件成为辅助控件

如果你要使用 HTML 自定义控件,则需提供该控件的所有基本辅助功能信息,包括辅助名称、角色、状态、值,等等。你还需要确保控件可完全通过键盘访问,而且 UI 符合视觉访问的要求。

例如,假设你拥有一个表示自定义交互式元素的 div 元素;则意味着该元素可以处理 onclick 事件。 你必须:

  • div 元素设置辅助名称。
  • role 属性设置为相应的交互式 ARIA 角色,如“按钮”。
  • tabindex 属性设置为按选项卡顺序包含元素。
  • 添加键盘事件处理程序以支持键盘激活;即,相当于键盘的 onclick 事件处理程序。

要了解有关为辅助功能显示自定义 HTML UI 元素的详细信息,请参阅可访问富 Internet 应用程序 (ARIA)

注意  

HTML5 canvas 元素不支持辅助功能。由于无法显示内容的辅助功能信息,因此若非必要,请避免使用 canvas。如若确定使用 canvas,将它作为自定义 UI 元素处理。

使 XAML 自定义控件成为辅助控件

如果你要使用 XAML 自定义控件,则可能需调整该控件的部分基本辅助功能信息,包括辅助名称、角色、状态、值,等等。你还需要验证该控件可完全通过键盘访问,而且 UI 符合视觉访问的要求。在创建适用于 XAML 的自定义控件时,凡可供特定控件(用作自定义控件的基类)使用的 UI 自动化支持,均会全部继承。在某些情况下,此功能已足够有用。但根据你对控件的自定义程度,还可能想要创建对默认 UI 自动化支持进行修改或运用的自定义 UI 自动化对等类。此功能可由 Windows.UI.Xaml.AutomationWindows.UI.Xaml.Automation.Peers 命名空间中的 API 启用。有关详细信息,请参阅自定义的自动化对等

开发平台中的辅助功能支持

Windows 运行时开发平台在开发周期的所有阶段中都支持辅助功能:

  • 创建:从 Microsoft Visual Studio 应用模板生成的代码包括辅助功能信息。
  • 编码: 该开发平台在编码阶段包含以下辅助功能支持。
    • Visual Studio 中的 Microsoft IntelliSense 包含辅助功能信息。
    • Windows 8 平台中包含的控件具有对辅助功能的内置支持。通过使用标准 HTML 控件和平台控件,可将辅助功能支持作为默认的平台行为加以充分利用。例如,无需任何其他操作,即可完全访问分级控件,而 ListView 控件也只需主列表元素的可访问名称—已内置所有其他辅助功能支持。有关平台控件的列表,请参阅控件列表 (HTML)控件列表 (XAML)
    • Windows 开发人员中心文档包含辅助功能指南和示例应用。
  • 测试:Windows 软件开发工具包 (SDK) 包含辅助功能测试工具。了解有关测试适用于 HTMLXAML 的应用辅助功能的详细信息。
  • 销售:当你在 Windows 应用商店中发布你的应用时,你可以将你的应用标记为辅助应用,从而用户在浏览应用商店时能够使用“辅助功能”筛选器来发现你的应用。 了解有关下列内容的详细信息:在适用于 HTMLXAML 的 Windows 应用商店中声明你的应用为辅助应用。

相关主题

对于开发人员 (HTML)
采用 JavaScript 的 Windows 运行时应用中的辅助功能
测试应用的辅助功能
可访问的丰富 Internet 应用程序 (ARIA)
ARIA 示例
对于开发人员 (XAML)
使用 C++、C# 或 Visual Basic 的 Windows 运行时应用的辅助功能
测试应用的辅助功能
Windows.UI.Xaml.Automation
XAML 辅助功能示例

 

 

显示:
© 2015 Microsoft