SwiftUI 中的辅助功能

SwiftUI中的辅助功能 为每个人建立新一代的app 大家早上好 我是 Michael Gorbach 同我一起演示的是我同事 John Nefulda 我们都来自 Apple的辅助功能团队

我相信大家都很兴奋 对于 SwiftUI及它如何能让你创建 更好 更快 更易操作的app

我对SwiftUI也很兴奋 更让我兴奋的是 它的辅助能力

今天我们向大家演示SwiftUI 是如何帮助你构建新一代 面向所有用户的app

首先我们来快速了解一下 什么是辅助功能 以及我们的辅助功能技术 在我们的平台

然后我们讲述SwiftUI 如何能让你的app以默认方式 更易操作

John会完整地讲解辅助API 就是今天的主题 他还会带大家了解辅助树 是SwiftUI在app中生成的

那么首先开始介绍

今天我们讲到辅助功能时 究竟在讲什么

各位都在app上投入了大量精力 为了将它们变得有趣 实用 有益 且令人愉悦

做了这么多你一定希望 你的app可以服务于所有 潜在客户 而不是其中一部分

这就是辅助功能的意义 它是为了让身患残障的客户 也能完全 享受你app的价值

你也会收获更多开心的客户

辅助功能特别有用 尤其是客户中有残障人士时

在我们的各种设备上 如Mac、 iPhone、Watch、HomePod Apple的辅助技术 让残障者的生活更加完整

它们为残障人士打通了更多可能 而几年前这根本不存在

这样的结果很大程度上 要归功于你的app 没错 你的app能改变人们的生活 但为了实现它 你还需要更努力地让这些功能 更好用

在残障人士与app交互时 他们通常使用 Apple内置的辅助功能 我们有太多这样的功能 用于我们的各个平台 这里我们只讲其中一个旁白

旁白是屏幕阅读器 所有平台都可用 它是为了让低视力和失明的人 在使用Apple设备时 不再需要看到屏幕

它的工作就是读给你听 旁白会带你逐个了解 屏幕上的元素 每次就一个元素 播放相关的信息 比如按键名称 图片名称 以及文本字段值

它还允许在iOS上用手势 或者在Mac上用热键 完成交互并触发相应动作 现在演示的就是旁白 在Mac上与计算器互动 旁白正读到这里 并将阅读的内容显示在 右下角

在这个长长的名单上 今年多了两个酷炫的新东西 第一个是 Voice Control 我相信你们都已经 看过那些惊人的演示了

第二 对 它很酷

第二个是全键盘访问 这是今年全新的iOS功能 在Mac上也有极大提升 全键盘访问让你 能完全使用Mac或iOS设备 只用一个键盘

它能让你迅速灵活地 在Apple设备上完成交互

我们相信这个功能 能被真正地使用 不仅仅作为辅助功能 而且能够满足对Apple 设备生产力有更多要求的用户 在屏幕上移动 触发命令

这是全键盘访问功能 在iOS上与计算器的交互 注意这个高亮的8键显示了 键盘关注的点

这两个优秀的功能完美地 诠释了我们团队 不断在学习的东西 辅助功能服务于所有人 不仅是残障人士 这就是为什么你多做一点 在app的辅助功能上 就会有广泛的影响

我们的平台最好的一点 就是许多功能 大屏上显示的 包括我们刚刚讨论过的 都用同一套 底层技术 如果你的app能很好运行辅助功能 其他的也可以

所有这些功能最终都基于 你的app提供的信息 给我们平台 信息越完整 这些功能就越好用 我们称之为 app的辅助功能UI

究竟需要哪些信息呢 就以这个计算器 快速做一个简单的例子 然后把它拆开

app中的辅助功能UI 包含多个辅助功能元素 计算器中的每个视图 构成一个辅助功能元素

这里的辅助功能元素 大部分是按键 现在我们单看其中一个

这里有个X键在左边 它的辅助功能元素 在右边 注意它有一个标签 要旁白读出 所有元素都要配一个类似的标签 以便旁白的用户 知道他们正在app里做什么

这里 计算器的开发者 已经客户化了 默认标签 将符号X对应文本 乘以

元素也分类型 在iOS上的描述是trait 在MacOS上是role 类型是按键 最后 这个按键元素设有默认动作 MacOS上为按键 iOS上为轻触 旁白用户可以使用这些动作 与元素进行交互

再来看另外一个 这是上方显示计算结果的地方

开发者已经给它配了一个标签 命名为display

它还显示了另一个重要信息 叫做value 就是现在显示的文本

它没有默认动作 因为你不能立刻与 这个元素互动

默认动作不是唯一方法 让辅助功能用户 与app和其中的元素进行交互 你可以添加自定义动作 给app中的辅助功能元素 比如你可以给它添加 一个自定义动作clear 就是清除显示

以上就是计算器的辅助功能UI 你的app也有 许多辅助都是自动创建 但你可以多做一点 让它更好用

你会不断完善app的可视用户界面 同样你也会 完善你的辅助功能 用户界面

这里有三个关键点 就是我们将要 展示的内容

首先你的辅助功能元素 一定要 易于理解 它们要有合理的 标签 值 和其他 描述信息 举个例子 计算器更改了标签 将X键对应乘以 就更易于理解 元素还应该 可交互 也就是说适当的默认 动作和自定义动作 要在需要时出现 添加清楚的动作 给主屏幕 如之前所说 就是这样一个例子

最后 元素应该 可引导 慎重考虑 如何排序辅助功能 元素并将它们按需分团 会让你的app 更好的使用 辅助功能 如果你有兴趣了解 如何完成这些有趣的工作 用AppKit或UIKit 我们有一些 很棒的讲座给你 但不包括 本场 今天的主题是 SwiftUI 在Apple我们始终深信 辅助的重要性 和辅助的力量 因此我们所有人都 十分努力地打造 各种框架 让你们 更轻松地使用app 甚至自动化某些 地方

今天因为有高水平的 描述性SwiftUI 而且它能理解 你的陈述 所以我们能 将辅助功能自动化 进入新的境界 用新的 框架 SwiftUI可以让app的 默认设置更好用 并为我们打下坚实的 基础 让我们完成更多的 辅助功能 帮助你 进步

SwiftUI会生成 辅助功能元素 就像它会生成 NSView和UIViews 来看一个简单的 SwiftUI代码

它创建了一个垂直叠层 这个层是一个按键 它的前后是一些 文本

SwiftUI会创建三个 辅助功能元素 在这里 两个文本各对应一个 当然还有一个对应 按键 记住 辅助功能 元素 在SwiftUI里 不是UIViews 或NSViews 而是SwiftUI自己的 辅助功能元素

我们所有人都努力确保 SwiftUI的标准 控件也尽可能 默认可用 注意 尽管这些 元素很简单 但包含了所有重要的 必要信息 它们好理解 是因为 有标签 可交互 是因为按键 有动作 可引导 是因为 排序正确

如我所说 SwiftUI 有一个辅助功能API 自定义元素 给你 在讲这个之前 我想聊一聊 一个优秀的辅助功能 来自SwiftUI 然后你再去写 具体的辅助功能代码

你有个免费的工具 在SwiftUI 就是通知 它让辅助功能 比如旁白 在你的app 对所发生的一切 给出最新消息 记住 辅助功能 如我之前所讲 都是基于 辅助功能元素 由app提供

运行时 旁白会 向app请求一个列表 关于辅助功能元素 例如 当用户打开 计算器时 它会要求计算器 给出屏幕上的元素 计算器就会回复 这些按键 如前所述

它也会发送 元素给主显示屏 同时它还发送一个值 此时这个值为5

那么想象一下如果 信息变了呢 假设一下 计算器识别了 等号键被按下 更新这个值到 主显示屏 假设这个值现在为10

旁白需要知道 这个元素的值 变了 因此我们的框架 要支持辅助功能 通知 这样app就能告诉旁白 嘿 值变了哦

整场会议我们一直在讲 SwiftUI是如何 被陈述驱动 正是这些方面 将优势带给了 辅助功能 因为SwiftUI能 理解你的陈述 并跟踪变化 你无须再担心 辅助功能 通知 甚至是自定义控件

对 就是这样

SwiftUI会跟踪陈述 你正使用的 辅助功能 并发送给你 究竟如何 做到？ 这里有个触发和一个 按键 都链接到一个 单一陈述 这是个布尔值 叫做 Enabled

可见这里有两个 辅助功能元素 被创建 其中一个 元素对应的是触发 正确的标签和 类别 它的值一开始 为0 当你点击按键 enabled的布尔值 就会更改 它会从0变为1 或从1变为0 所以我们称这个 按键为Flip 它会如何影响 辅助功能？ 辅助功能的 触发值变了 这要让旁白 知道 因为当它理解到 那个值变了 SwiftUI就会 自动发送一个 通知给旁白 告诉它准确的 变化 记住 不需要辅助功能 具体的代码 你无需担心 通知是否发到了 SwiftUI 因为我们会替你 发送

SwiftUI的另一个 提升 是自定义控件 通常在设计app时 你需要自定义 UI的外观和感觉 你也许需要 独特的视觉风格 或者 要适应公司 主题 如果你做过辅助功能 在以前的工作 你就知道 自定义控件越多 就有越多的 辅助功能需要 加入 SwiftUI的控制风格 是让你完全掌控 UI的外观和感觉 同时又能拥有良好的 即时辅助功能 因此最终你能 轻松的制作自定义控件 它美丽又独特 还随时可用 就像系统元素一样 这个例子 是要自定义 按键样式 使用 SwiftUI

这个API显示了按键的 样式 包括 标签和按键状态 于是我们需要 告诉style如何 绘制这个按键 那么首先将这个 标签放入圆角矩形 然后设置背景和 前景的颜色 代表我们是否 按了键 还要添加一点 填充并设置漂亮的 大号字体和颜色

最终的形态 在右边 现在我们已经定义了 这个漂亮的自定义绘制 当然也要用它

我们要创建一个 正常的按键 然后用 按键样式修改器函数 设置我们想要的 按键样式

这会创建一个 辅助功能元素 你可以在顶部看到 这里 注意尽管有这些 自定义的绘制 辅助功能元素还是很值得尝试 它有标签 正确的类别 还有一个 动作

还是一样 完成这些时 不需要编写任何的 辅助功能具体代码

SwiftUI还能提供更好的 更多的直观辅助功能 给图片 具体我要讲 图解 还有 字形 它们是 UI的重要组成

假设你的app带有 注册功能 完成时会有 绿色对勾 如图 这是简单的SwiftUI 代码 你可以用来 创建这样的视图 这里它只是个 带图片的 垂直叠层

完成注册后 没有视力障碍的用户会看到 然后说 太好了 完成了 真棒 而用户如果使用 旁白 就会听到 对勾字形

这个没有什么用处 这是开发者创建的 图片名称 我不知道什么是字形 或者它意味什么 作为旁白用户 我会困惑 我完成了吗 出问题了吗

我不能 理解 原因在于 图片的标签不明确 这个辅助功能元素 由SwiftUI创建 你能看到它有正确的 类别 但没有标签

SwiftUI要做的 是将标签拖过来 从图片的文件名或 资源名上 这并不是我们 想依赖的 因为这个名字是给你们 开发者 而不是用户

有了SwiftUI 你可以 给图片做标签 用本地化的 辅助功能信息 在创建时就能用 我们要做的是用 基于标签的初始化器 画图 这样我们就不需要 总是记得后面还要再做 一些单独的代码

这会创建一个 辅助功能UI 易于理解

记住 这个更新过的 辅助功能元素现在 有了正确的标签 当我看到这个图片 旁白会说 注册 完成 另一方面 有时候 旁白用户不需要 以图片结尾 例如这个 对勾其实仅仅是 一个装饰 而且你已经 下面有文字说明 注册完成

SwiftUI代码 大概是这样 一个带图片的垂直叠层 和两行文本

这里的图片 真的只是装饰 其实你可以这样做 通知SwiftUI 通过 正确的初始化程序

现在 旁白用户不会 再看到这个图片 这时辅助功能中 两个元素对应文本 但没有元素对应图片

这样就更好操控了 因为旁白用户 不会再遇到无用的 元素

SwiftUI最后一个 用辅助让生活 更轻松的地方 就是标签 我们看到 这个控件实际就是 系统偏好 目的是让你选择一个 声音 这个辅助功能的 元素在右上角 它没有标签 只有一个值 Alex 这个不好理解 作为旁白用户 因为旁白 只会读出Alex 谁是Alex 我为什么要 知道他？ 如果我用旁白 就不懂 我得到处搜寻 屏幕上的其他内容 找点线索 这是SwiftUI代码 编写的控件 这里是一个标准的 SwiftUI选择器 显示为弹窗按钮

SwiftUI的选择器 有内置标签可以使用 这里我们设置了系统 声音 许多SwiftUI控件都有 类似的标签 其他也很快 会有 现在我们来看 这个辅助功能 元素 这时它有一个标签 旁白 读的是 Alex 系统声音 弹窗按钮 在更新的SwiftUI中 你能做更多的 事情 如果你只想用一个 标签显示给所有 用户 无论他们 是否使用辅助功能

那么你可以 设置这个标签为 类似左边的内容 如果你这样做 我们就会 为你设置辅助 比如一个连接 连接左边标签 和右边的弹窗 按钮 它们本身都是 辅助功能元素 但旁白知道 其中联系 旁白就会 读出 Alex 系统声音 弹窗 按钮

这就是SwiftUI可以 自动为你做的事 这里有两点 要强调 关于所有 元素 首先 它们始终保持一致 在所有的SwiftUI平台 第二 实现这一切 不需要编写任何 辅助功能代码

即便有时候无论 自动化辅助功能有多好 它可能还是 不够 因此我们提供一个 辅助功能API给你 使用 现在我要将舞台交给 John 他会讲解 更多 John

谢谢Michael

我们已经展示了 优秀的内置辅助功能 来自SwiftUI 它的设计是为所有人提供 即时的 良好体验 但我们知道 仅靠它并不能带来 完整体验

SwiftUI辅助功能API 让你可以修改并 最终创建更好的 体验给所有人

那么首先我要 演示几个简单的 API实例 回到之前的 计算器 如Michael 刚才所示 首先是 乘号 默认是 读出X 要修改这个标签 我使用 辅助功能修改器 函数 和标签 参数 修改以后 这个按钮 现在读作 乘以 我们还想让 旁白有特定的 按键状态 在视觉上 按键 被选择后 变成白色 辅助功能trait 可以帮助我们 如果你还不熟悉 trait是为了 描述元素 和方法

例如 按键会 自动带有isButton 默认的trait

旁白会读出 按键 在读取元素标签 之后 这里我们就要添加 isSelected状态 使用 辅助功能函数 并加上 参数trait

旁白会读出 已选 当按键处于 当前状态 再来讲如何提升 结果视图的 辅助功能

将标签改为结果 并添加辅助功能的值 这个值可以用来 给旁白提供 可读的描述

你也许要添加 单位或其他 文本 但在这里 数字就可以

最后要添加的是 自定义动作 使用 动作函数

通过姓名参数 创建一个自定义动作 清除 旁白会播放 发生的动作 对应的元素

以上只是简单 学习了如何添加 辅助功能在SwiftUI 辅助功能函数 添加信息 辅助功能动作函数 则添加动作 我想多讲一点 关于何时使用这个API 以及如何定义 app中需要它的地方 这就要回到客户 需要怎样的app 易于理解 可以交互 并能够操控

下面这几个问题 帮助你评估

显示的字符串是否提供了 足够的信息

自定义动作会简化 交互吗

能否加快引导

下面这段视频 旁白在app中的 应用 观看中请时刻谨记 这三个问题

这个app用来 计算对比度 文本对背景 颜色 顶部显示的是 当前对比度的值 底部是两个 区域 用于调整 红 绿 蓝的值 给背景颜色和 文本颜色 我还增加了双击手势 在顶部视图切换 两种颜色

那么旁白如何 操作呢

11.7 1.

11.7 1

11.7 1

重置颜色 按键 背景 红色 76 30% 可调节 绿色 217 85% 可调节 蓝色 100 39% 可调节 39…100%

视频中引起我 注意的是 顶部的标签

首先有一个符号 没有读出来 旁白一般不读 标点 根据app的 设置 但在这里 当标点代表 比率时 我们就要 将信息传达给 旁白 所以 11.7 1应读作 11.7比 1 第二 读数字时 没有任何上下文

有个办法是 给它合适的标签 描述它的值 这里就是 对比度

所以我们要调用 两次辅助功能函数 给一个对比度视图 一次是加标签 一次是 添加值 另外我注意到 这个信息的 滑块 滑块的值是 百分比 但在这里 实际是指色彩 分量值 从0到255 这个标签可以隐藏 不显示在滑块上方 而是跟随滑动 显示 这样就能集合 信息给一个元素

首先讲隐藏标签 先调用函数 将可见度设为 参数 写入.hidden来隐藏 元素及其所有 子元素

然后添加信息 给滑块标签 这个标签是 要调整的颜色和 0到255之间的一个值

我们还加了双击 手势在这里 iOS中的手势 很难操作 对于客户使用 辅助功能产品

部分产品自带 手势菜单 以帮助 完成较为复杂的 手势 其实可以更好 最简单的就是 创建自定义动作 给手势 它有两个好处 第一 动作名称 能够描述 触发的任务 第二 动作在 iOS中随时可用 它们存在于 所有辅助功能中

现在将颜色转换动作 添加到对比度视图 通过调用 动作修改器 函数 最后 如何加快 导航？

这个视图可以 分为三大块 对比度 背景颜色和文本 颜色 它们都是组成 isHeader的 trait 它被旁白用来 快速切换 不同的标题 在app里

将trait加给 对比度视图和这两个 文本颜色的 选择区域

现在看下 修改的结果 首先是顶部 视图

对比度11.7比1 标题 现在既有上下文 也有适当的描述 关于这个值 接下来是滑块 调整蓝色的 值 重置颜色 按钮

背景 标题 红色 76 可调节

用手指上下滑动 调节数值

绿色 217 可调节 蓝色 100 可调节

滑动 100 140…250…255

最后我们来使用 旁白拨盘切换 标题和颜色 通过自定义动作 之前的 调节数值 标题 文字 标题 背景 标题 对比度13.0比1 标题 动作 颜色转换

只要动动手指 就能大幅提升 app辅助功能的 体验 这都是API的基础 下面我要讲 一些更为 抽象的 辅助功能树

你看过了 辅助功能元素的 创建过程 接下来我们 进一步讨论 元素的树结构 以及你如何使用 树结构 创造更好的 体验 首先是如何 创建树

先看视图树 直接由代码创建

左边是SwiftUI代码 表格视图 一个标签 一个空层 两个按钮 横向排列在一个 平叠层

它直接翻译成 右边的视图树 平叠层是父节点 而标签 空层 按钮 是子节点

因为自带 辅助 树结构 会创建三个辅助功能 元素 一个来自文本 两个来自 按钮

它们会成为 子元素 构成平台的 主视图 并传递给 辅助功能 产品 这个子节点树也可能属于 更大的辅助功能树 通过UiKit或AppKit连接 元素 SwiftUI树甚至可以是 其他平台的父节点 元素搭桥用UI或 NSViewRepresentable 如果你注意到 树的阶层 你也许会想到 它很快就会变得复杂 我来告诉你如何创建 树的阶层 从而 改善引导体验

依旧是 这个例子

表格本身有三个 辅助功能元素 旁白会 按序切换 它会表现很好 如果只有一个格子 但实际情况是 你的app会有 几百个 你看这个树 有一堆元素 但没有什么帮助 都是重复的 关注和 分享按钮 对于关注按钮 你怎么知道是 第五 还是第六个人 我们只能寻找 其他提示 其实可以 更简单 我们创建一个 辅助功能元素 级别高于视图 树

找到一个视图 作为父节点 然后在这里创建 新元素

这里使用 HStack

使用辅助功能 元素函数在HStack 创建新元素

.combine会整合 子节点的辅助功能 放入一个元素

这里 文本视图会 提供元素标签 两个按钮会 自动转换成 自定义动作

旁白现在只有 一个元素 会读出人名和 可用的动作

通过这些修改 我们减少了大量的 树元素 你可以逐个切换 随你意愿

使用按钮 通过自定义动作 整合相关的UI 是简单又好用的方法 完善app的导航

另外一个重要的 引导和辅助组件是 排序

某些情况下 你会发现默认 排序不能达到 你预期的体验

你也许注意到 之前的视频中 颜色重置按钮实际上是 横向排序的第二个 元素 这两个元素的排列为 ZStack 元素的排列 默认为从后向前

视觉上 按钮 出现在对比度 上方 那么我们就要 转换位置

自定义排序使用 sortPriority

所有元素都默认 sortPriority为0 容器里的元素 从低到高排列 优先级 sortPriority的设置 可调用辅助功能 修改器函数并设置 sortPriority参数

给按钮的 sortPriority为1 由于对比度的优先级为0 扫描时 按钮排 第一 对比度排 第二

辅助功能API可以 让你的app更好 理解

它允许增加上下文 通过加标签 值和线索 用辅助功能 函数 辅助功能动作函数 可以添加动作 让你的app更有 交互性 最后你可以用 辅助功能元素函数 整合元素 完善导航 通过自带辅助功能和 简单地提升 辅助API SwiftUI让 app更普惠 更快 更简便

请Michael回到台上

好的 最后我们 总结一下 还有最后 一点 如果你将所有这些 放入辅助功能 你怎么知道app 一定能成功？ 这里有两条建议 供你参考 首先 没有可代替的工具 使用app 也就是要尝试 真正的辅助功能 比如旁白 全键盘 访问和Voice Control 例如 如果你使用 旁白在你的app 你不能改善 声音方面 但你需要 观察屏幕 做些完善 如果你的app使用 Voice Control 你就不能改变 声音 如果你的app使用 全键盘访问 你就不能改变 键盘 你还有 其他可做的 第二 辅助功能检查器 这个产品由 Xcode完成 帮助你 深入了解app的 辅助性 这个辅助功能检查器 不能代替app测试 实际的辅助功能 但可以作为 强大的工具 去了解 辅助功能树以及解决 问题 推荐一些很棒的 关于检查器的讲座 如图

那么 总结几点 今天的内容

我们十分努力 在Apple 为了打造 SwiftUI 让你的app面向更多客户 从根本上

在设计SwiftUI时 时刻谨记辅助功能 从头至尾 今天讲到了什么是 优秀的辅助功能 界面 虽然讲的很深 但重点是 易于理解 可以交互 便于引导

除了基本内容 SwiftUI有强大的 辅助功能API 可用 这个API现在已经 统一用于所有 平台 因此你只需学习 一次

两份有用的资料 给你 首先我们会公开 本场的样本代码 点击屏幕上方 就可找到 第二 本场演讲过后 我们会举办 辅助功能实验室 来加入我们 聊聊SwiftUI 和辅助功能 我们期待 见到你们

我们十分激动看到 辅助app的新时代 由你用SwiftUI创造 感谢观看