让您的应用具有无障碍功能

“应用制作工具”应用应该让所有人(包括残障人士)都能使用。影响人们使用应用的常见残障包括失明或弱视、色盲、耳聋或听力受损以及运动技能受限。

在开发具有无障碍功能的应用时,您不仅可以改善残障人士的用户体验,而且还可以改善所有用户的用户体验。

无障碍功能设计

无障碍功能设计包括应用的布局、大小、颜色、导航,以及应用与自适应技术和辅助技术的交互。

如需让各种能力的用户都能顺利使用您的应用,请遵循 Material Design 的无障碍功能最佳做法。下表介绍了思考和设计无障碍功能的主要原则。

无障碍功能设计的最佳做法
清晰、适应性强的布局和设计 通过使用简单、清晰、整洁的布局,让用户易于使用您的应用。特别是:
  • 即使在较高的放大倍数下,元素也应清晰可见。
  • 如需让布局适应不同的屏幕尺寸,请使用自适应设计
  • 文本、按钮和其他元素应足够大并且具有足够高的对比度。颜色不应该是传达信息或区分内容的唯一方法。
  • 如果您的应用中有一些元素会在超时后淡出,请勿对完成任务所需的元素设置超时。
  • 完善并纠正标题、列表和表格的标记。正确的标记有助于自适应技术朗读和放大您的内容、更改对比度或者对您的内容进行其他形式的调整。
易于遵循的导航
  • 导航应具有清晰、简短的任务流程。
  • 导航应易于查找并且在各个页面之间保持一致。例如,在每个页面中使用提供相同菜单导航和搜索框的标题模板。
  • 按逻辑顺序组织页面元素。
  • 将相关的项汇集在具有描述性的标题下面。
具有描述性的界面元素标签 提供一些有用的、独特的、具有描述性的标签,用于向用户说明每个交互式元素的用途。借助这些标签,屏幕阅读器可以向依赖其服务的用户正确说明特定控件的功能。
媒体的替代文本或说明 对于不包含信息的图片或视频,请提供简短描述内容的替代文本。

如果图片包含用户需要知道的信息(例如图表或图),请包含数据描述。

对于提供信息的视频,请添加字幕或提供全文转录。
声音和视频控制 用户应该能够暂停或停止、调整音量,以及打开和关闭字幕(如果有相应功能)。
键盘控制 组织您的应用,以便用户仅通过键盘(通常使用 Tab 键或箭头键)浏览和使用您的应用。

键盘焦点应该是可见的,并按照以操作为中心的直观顺序贯穿页面。用户关闭对话框或提交表单后,请勿丢失焦点。

例如,请打开 [应用制作工具](https://appmaker.google.com/){:.external target="_blank"},然后仅使用键盘在您的应用中移动。
针对错误的帮助 为错误消息提供具有描述性的文本,包括如何解决问题(如果可能的话)。

让用户撤消重要操作或者要求确认后才能继续。例如,要求用户确认要删除数据,然后再继续。
自动收集数据 您可以使用客户端脚本自动获取会话信息(如用户名、用户的电子邮件地址或创建记录的日期)。例如,以下脚本可获取用户的电子邮件地址,并将其保存到“user”字段。该脚本还能获取日期,并将其保存到“date”字段。

    record.user = Session.getActiveUser().getEmail();
    record.date = new Date();
    

应用制作工具的无障碍功能工具

借助应用制作工具,您可以通过多种方式设计具有无障碍功能的应用:

  • 内置的 Material Design 主题背景符合对比度和尺寸建议。
  • 应用制作工具元素具有 ariaLabel 属性。如果您需要替换默认的屏幕阅读器行为或者为自定义微件添加 ARIA(具有无障碍功能的丰富互联网应用)标签,请将该属性用于 WAI-ARIA 语义。
  • 如果屏幕阅读器不会自动朗读用户操作的结果(例如成功删除了表格中的一行),您可以使用 app.accessibility.announce() 客户端 API 函数向屏幕阅读器提供文本。如需了解详情,请转到无障碍功能

使用 ARIA 标签自定义界面描述

应用制作工具页面中的每个元素都有一个 ARIA 标签属性。ariaLabel 属性设置 ARIA 标签的 HTML 特性,辅助技术使用该特性将微件的用途传达给视力受损的用户。

屏幕阅读器旨在直接从 HTML 标记获取上下文和标签。大多数时候,您不需要明确输入 ARIA 标签。

在以下情况下,请设置 ARIA 标签:

  • 您想要替换元素的默认名称,例如,当您想要为屏幕阅读器用户提供更具描述性的按钮名称时
  • 您使用屏幕阅读器无法检测到的操作创建自定义微件。例如,您创建了一个具有显示/隐藏切换开关的可折叠面板。您应提供描述该面板状态的文本,并指定键盘焦点应如何在该面板中导航、如何进入该面板、如何离开该面板。

如需为微件设置 ariaLabel 属性,请执行以下操作:

  1. 选择微件,然后转到其属性编辑器标签页。
  2. 点击 Other
  3. 输入文本值或绑定该值:

    • 如需输入文本,请点击 ariaLabel 框。
    • 如需绑定该值,请点击向下箭头,然后选择来源。

向屏幕阅读器提供文本

屏幕阅读器会通过语音提示应用界面的多种变化,例如对话框、弹出式窗口或菜单打开时的变化。如果您的应用界面由于用户的某个操作(例如创建了表格中的一行或者打开了旋转进度条微件)而发生变化,则视力受损的用户可能不会觉察到这一变化。

如需让用户知道这一变化,您可以添加一个脚本,该脚本使用 app.accessibility.announce 函数告知屏幕阅读器在相关操作中发出语音提示。

例如,您可能创建了一个应用,其中有一个表。为了删除该表中的一条记录,该应用的用户点击了一个用于删除一行的按钮。如需让屏幕阅读器通过语音提示该行已消失(或者如果该操作不起作用,则没有消失),您可以将该按钮的 onClick 操作设置为以下代码:

widget.datasource.deleteItem({
      success: function (record) {
        app.accessibility.announce(‘Record was deleted and removed from the table.');
        console.info('Record with ID ' + record.id + ' was deleted from the database.);
      },
      failure: function (error) {
        app.accessibility.announce("The record wasn't deleted. Please try again");
        console.info('Record with ID ' + record.id + ' couldn't be deleted.');
      }
    });
    

该示例使用异步回调函数提醒用户该操作成功或失败。