提供出色的辅助功能体验

［ 音乐 ］

［ 掌声 ］ 大家好 周五好 我叫 Skylar Peterson 我是 Apple iOS 辅助功能团队的工程师 今天我的搭档是 Bhavya Apple Mac 辅助功能团队的工程师 我们将一起探究 当说起辅助功能时 用你的 App 创造出色 体验是什么意思

快速回顾一下 我们倾向于认为 辅助功能的作用是 人人皆可使用科技 在 Apple 我们将研发这种科技的方式 分为四大类 认知 活动 视觉和听觉 现在 我们在这些所有的方面 创造了很多很棒的特色 但是总而言之 是你的贡献 和我们的辅助技术一起 共同使我们 为残障人士建立的平台 变得更加出色 让你创造的内容 适用于每一个人 可以使我们的世界 更美好 更包容 而且可以从根本上 提升全世界数百万人的 生活质量

在今天的介绍中 我们会省略 很多基础辅助功能的介绍 但是 如果这是你第一次 接触辅助功能 或者你之前从未了解过 我们的辅助功能 API 那么我强烈推荐 看一下去年的一些 WWDC 视频 了解一下基础部分 但是现在你依旧能够 从我们的讨论会中 了解很多内容 只是你可能会觉得 进度有点快 因为今天我们 会略过基础部分 我想以一个词开场 “可用的”

能够做到可用 很棒 关键一步是 确保你 App 上所有的内容 甚至对于辅助科技都是可见的 但是话说回来 我们并不仅仅满足于 让 App 是可用的 没有人会吹嘘 他们的 App 是可用的 他们希望自己的 App 是出色的 我们希望用户在使用的时候 感到开心 说起辅助功能 你可能不是很清楚 它到底指什么 所以今天我们会讨论它 并且我希望能够 针对怎样处理辅助功能 给大家提供一些有用的指导

我将集中介绍两个部分 以及当评价 你的 App 的 辅助功能时 你对每个部分的 不同想法 首先是视觉设计 然后是辅助科技用户 会用什么方式 体验你的 App

我们先说视觉设计 首先我想先谈一下 透明和模糊效果

我们在 iOS 的很多部分 都使用了二者 它可以让你的 操作系统鲜活 独特 但是对于一些人来说 尤其是对于视力不好的人 这两种效果 可能会让他们 看不清楚 从而对眼部造成压力 所有我们提供了一种辅助功能设置 可以减弱这两种效果 这个设置非常有效 就像这样 我们没有使背景模糊 而是使其变暗 所以你依旧可以看到 系统的执行环境 但是视觉噪点减少了 而且控件之前混有 后面屏幕的颜色 在现在的不透明背景下变清晰了许多

文件夹和高亮 也是这样

这是一个很好的例子 因为我们是用 用户的墙纸作样本 我们可以使背景变色 让用户觉得的自己设备是 定制的 应景的 同时我们还做到了 在一个不透明的背景上 对比更强 屏幕更清晰

作为一名开发人员 你可以通过检查 降低透明度设置是否可用 而且能否对应地适合你的 UI 来满足自己 对于这两种效果的需要 在 iOS 上你可以使用代码 isReduceTransparencyEnabled 在 macOS 上 要在 NSWorkspace 上 使用代码 accessibilityDisplayShould ReduceTransparency

接下来我想谈谈 对比问题 内容 和它背景的对比 对于可感知性来说 非常重要 当颜色相近时 它们会变得更难辨认

而且一些特定颜色 放大时很清楚 但是内容缩小时就不清楚了 例如在文本中 小号字母的字体颜色 更容易混在一起

现在你可以计算 一个特定颜色组合之间的对比度 看看它是否 会是清晰的 然后我们会采纳 网页内容辅助功能指导 上面的建议 它的建议是 你能设定的最小对比度是 4.5 : 1 当然你能得到的 最高对比度是 黑色和白色的对比度 数值为 21 : 1 不论文本字体大小 都很清楚 现在看一种灰色 这种特殊的灰色 在文本字体较大时 看起来很清楚 但是字体较小时就不行了 因为你的眼睛看不清楚字母的形状 4.5 : 1 的对比度 刚算得上勉强看清楚 再来看一下 最后一个灰色

在这个大屏幕上 可能没那么明显 但是在小型设备上 即便字体调的很大 看起来也真的很费劲 它的对比度是 2.9 : 1 真是太低了 你也可以使用 Xcode 内置的 Accessibility Inspector (辅助功能检查器) 里面的工具查看 一组特定颜色之间的 对比度是多少 而且这些颜色适合 多大的文本 在这个工具里 我们同样遵循 我之前提起过的指南

然而即便是对比度 超过了推荐对比度 4.5 : 1 对于视力不好的人 当字体出现在各种栏上时 他们依旧因为颜色问题 看不清楚

所以我们有一个设置 可以增强整个系统的对比度 iOS 之前的版本中 这个设置被成为 加深颜色 所以你可以使用代码 isDarkerSystemColorsEnabled 检查一下 如果你用的是标准 UIKit 控件 并开启了 tintColor 那你将免费得到这项功能

在 macOS 上 你可以使用代码 accessibility DisplayShouldIncreaseContrast 接下来要说的是字号 改变设备内容的字号 会对内容的 显示和理解 带来显著影响 这对视力不好的用户来说 是很有帮助的 拿日历举个例子 左侧 视图是默认字号 右侧 我调大了几号 成了更大的辅助功能大小 如果我们模拟出 在视力不好的用户眼中 这个界面是什么样子的 效果立刻就会变得很明显 右侧的文本依旧很清晰

在 iOS 上 你可以看看用户将他们的设备 设置成多大字号 一共有 7 种字号 大号是默认字号 甚至还有更大的辅助功能字号 一共又多了 5 种字号 关于动态字体 我还有很多想说的 但是我不打算再介绍了 而是把这个留给大家 希望大家去看看 我们很棒的资源 找到动态字体 让自己的 App 中应用的 最好的方法 对于一些人来说 调整字号有点小题大做 但是默认字号和图标 又有点看不清楚 所以 iOS 有一项设置 可以加粗文本 也可以加粗图标的线条

如果你使用的是内置标准 UI 控件和系统字体 那你可能什么都不用做 就可以使这个功能 应用于你的 App 如果你用的是自己的文本处理方式 或者个性化字体 或者你只是想 比如说 开启加粗功能 加粗你 App 里的分隔线 你可以看一看 这个设置是否能用 并根据需求进行调整 接下来要说的是动态效果

动画很有意思 可以让内容感觉更生动 它能将用户互动 和他们动作带来的效果 直接联系起来 然而在一些情况下 尤其在内耳会影响 大脑平衡中心的情况下 动态效果和动画就成了问题 经常导致眩晕 失去平衡 甚至恶心

现在我将举几个例子 介绍几种 可能会出问题的动画种类 如果观众中有人 不适应动态效果 请在我播放默认动画时 暂时看向别处 我将以这个为引子 开始讲起

首先是缩放 左侧是打开一个 App 时的默认动画 我将给大家展示时钟 App

我们放大 App 的图标 它的 UI 放大 出现在我们眼前右侧 我们做同样的交互动作 但是使用减少动态效果 就变成了交叉淡入效果

接下来是旋转涡流效果 我们看一下全屏状态下 iMessage 信息的回声效果 我将向大家展示这个效果 可以看到内容 正沿着 z 轴旋转 而且大小也发生了变化 但是这两种动态效果用在一起 会引发问题 在这种信息效果的情况下 如果我们启用减弱动画功能 我们给用户提供了 一个播放动画效果的提示 而不是让动画自动播放 这样用户就能选择 是否想要看到这个效果

接下来要介绍的是 平面漂移动画 我在这儿展示的是 Safari 浏览器标签页动画 按下标签页显示按钮 你可以看到 网页卡片的平面转换成了 模拟 3D 效果 右侧是减少动态效果 再一次 变成了交叉淡入效果 当前页卡片还闪动了一下 这样你就知道 你来自哪个界面 就像在初始动画里一样

多方向和多速度动态 也是一个动画问题的诱因 我接下来展示的是 在对话中 消息气泡的运动 在这个视频中不是很明显 但是在设备上 这个效果非常明显 当我滚动消息时 消息气泡在弹动 气泡之间的距离 不断压缩然后扩大 如果我们减少动态效果 这个效果就禁用了 只是普通的滚动页面

最后是外围运动

iOS 的天气 App 背景上会播放一些小动画 用来显示 当前天气状况 你可以看到左边云彩 像在天空中飘动 日光闪闪 但是如果你浏览 下方的天气预报 这个动画就会在你的外围视图 这可能也会带来同样的问题 当你边开车边刷天气预报时 你可能会觉得恶心 你关注的区域上方 如果出现水平运动的话 会引发大脑的一个反应 开启减少动态效果 就可以禁用背景动画 现在我们不想 简单地去掉所有动画 当然 我们还有一个设置 你可以查看动态 是否需要减少 或者相应地改变 iOS 里要用的代码是 isReducedMotionEnabled macOS 里要用的代码是 accessibilityDisplayShouldReduceMotion 需要注意的是 简单地去除动画 经常不是一个很好的体验 你并不会想让体验打折扣 你想做的是 加入同样有趣的 吸引人的 但是不同的 用户可以使用的效果

最后我想介绍 UI 复杂性 作为设计讨论的结尾 App 现在在我们的生活中起着重要作用 科技简单 易于操作 对于所有人来说 是至关重要的 它会提高我们的生活质量 而不是带来不必要的麻烦 单就美国来说 6 个孩子里就有 1 个孩子 有发育障碍 轻则是言语障碍 重则是严重的发育障碍 比如自闭症 对于有认知障碍的人 甚至是有慢性疾病的人 在使用 App 的时候 会比发育正常的人 花费更多精力 那我们应该如何确保 App 是简单的 至少是不会增加负担的

定义要简单 要使用类似的结构 和清晰的 合理的因果关系

上手使用 App 和完成大部分 普通任务时 不能遇到任何阻碍

最后我们的 App 整体要是一致的 我在某处学到一点以后 这一点也适用在其他地方 使用这个标准的 UIKit 视图 是非常好的 因为人们熟悉它的操作方式 UIKit 还是 iOS 的设计语言 如果你想自定义 那么与 UIKit 中的并行控件 保持一致 会帮助人们直观地了解 如何使用你的 App 这一切都归结为用户体验 App 的方式 对于使用辅助科技 比如旁白 或是“切换控制” 的用户来说 一样重要 所以我想花更多时间 谈一谈如何提高 辅助功能用户的 使用体验

使用辅助科技的用户 比如使用旁白或是“切换 控制”的用户 他们的体验 和普通用户的体验是不同的 旁白 使用了很多手势 比如滑动或者多点触控

切换控制可以扫描项目 并提供合理的 快速的动作 这两个功能都有 和标准手势或交互动作 相对应的操作 但是这使得辅助科技 变得出色了吗

我们想从最基础 的工作做到出色 尽管 辅助科技使用者 体验 App 的方法和普通人不同 能给不使用辅助功能的人 带来好的使用体验的理念 在这里也同样试用 大家都想让操作简单 行为可预测 我们的行动优先 还有保持一致

需要注意的是 如果一些信息在传递时 它的元素是独立的 上下文是分离的 那么我们的辅助功能用户 也会得到同样支离破碎的上下文 现在让我们有请 Bhavya 上台 快速评审 对一个 App 的 辅助功能的体验 Bhavya 大家早上好 我叫 Bhavya 我是 Apple 辅助功能团队的 一名软件工程师 今天我想和大家探讨一下 如何提高 App 辅助功能的使用体验 以我和 Skyler 一直都在做的 App 为例 这个 App 的名字是 Exceptional Dogs 它的目标是 用户可以直接浏览狗的合集 从而让收养流程变得简单 这些狗需要一个温馨的家 看一下这个 App 这就是 Exceptional Dogs 最上面是一个像是 UI 的轮播界面 本质上就是一个 我能浏览到的不同狗的图集

在左下角 有一个收藏按钮 可以收藏自己喜欢的某一种狗 右下角 有一个图册按钮 点击它可以得到 狗狗其他照片的模态视图

但是并不是所有的狗都有图册按钮 当我滑向 Layla 时 注意图册按钮淡出了 因为它没有其他照片

轮播界面下面是统计视图 上面有狗的信息 比如名字和品种 当我滑向轮播界面里的 下一只狗时 注意信息更新了

最后在下面是救助站的名字 有两个按钮 一个可以查看救助站在地图上的位置 另一个可以给救助站打电话

我们针对视觉上的复杂性 对这个软件做了一些处理 但是我和 Skyler 通过严格审查 又穿插了一些辅助功能 确保旁白恰好能够 涵盖屏幕上的每一个元素 现在我们打开旁白 看一下失明的人 或者视力不好的人 能不能应对这个 App 的复杂性

打开旁白 Exceptional Dogs Pinky 旁白找到了图片 并且正确地 说出了狗的名字 非常好 我现在将从左向右 滑动轮播界面 Layla Bro Pudding 收藏按钮 Pudding Bro 旁白可以 正确滑动轮播界面 但是只有到 轮播界面的最后 才轮到收藏按钮 当然我可以 像这样把手放上去 这样就可以直接点击收藏按钮 收藏按钮 但是重点是 一个典型的旁白用户 不会这样直接按按钮 它们会滑动 到下一个元素 但是目前 我们没办法直接到 收藏或者图册按钮 只能滑到轮播界面的 最后 这不是一个很好的 或者出色的体验 因为它会影响我 收藏或者查看图册 图册里可以看到轮播界面中 所有狗的照片

现在我把手指放在 模态视图上 启用图册按钮 显示图册 显示图册 Bro 的第一张照片图像 现在滑动浏览图册 Bro 的第二张照片 Bro 的第三张照片 Pinky

Layla

我们刚才可以 通过旁白 滑动浏览 但是旁白不仅聚焦在模态视图上 还夹带了背景上的内容 这次体验还算可以 因为它可以使用户 了解自己需要的内容 但它算不上很好或者出色的 因为模态视图 下面的内容 会让用户困惑或者分心 选择模态视图 双击关闭按钮 关闭 Layla

现在开始滑动统计 视图

名字 品种 Layla 拉布拉多

当我听到“名字”后 我希望紧接着听到的是 狗的名字 但是我听到的却是“品种”

这些布局 看起来都很清楚明了 但是这些结构 让旁白出现了混乱 对于用户来说 缺少上下文联系 给他们增加了认知负担

现在我把手指放在 救助站的名字上 让它向旁边的按钮滑动 Skyler 的动物救助站

在地图中打开地址按钮 拨打 按钮 同样 这些按钮 和统计视图的标签一样 都是可用的 但是缺少上下文 当我听到“拨打”时 我不清楚 具体是要做什么 但是看着屏幕的时候很清楚 因为这个按钮 就在救助站名字的旁边

关闭旁白 我们发现这里 有几个问题

这些问题不会导致 App 完全不可用 但是它们确实会给用户 增加认知负担

记住 我们的目标是创造一种 出色的辅助功能体验 现在请 Skyler 回到台上 谈一谈如何提升 Exceptional Dogs 的使用体验 使其出色

［ 掌声 ］ 我们已经找到了 App 的 一些问题 所以现在一起来看一下 我们可以操控的辅助功能 API 来解决这些问题

从 Bhavya 的审查中 我们找到了轮播界面存在的问题 我们可以使用收藏和图册按钮 但是要滑到列表的最后才能使用 而不是对每一只狗都能使用 同样 只有到达列表的最后 我们才能得到下方的显示数据 我们需要快速获得 对每只狗的操作和以及狗的数据

我们能做的是使用 UIAccessibiliyElement 在图集视图中 创造一个新的元素 UIAccessibiliyElement 是用来创建元素的类 经常用来代表 UI 中 难以到达的部分 比如说你在核心图标中画的东西 但我们可以用它 创造一个自定义体验 我们将用这个例子 给大家展示一下

我们要从 accessibilityElements 属性 返回每一个的自定义元素 为了包含他们的视图 这会告诉我们的辅助科技 一个给定视图的 子元素是什么 并且给它们一个指令 这些元素是可定义的

自定义元素到位之后 我们就可以轻易地滑动 浏览每只狗的内容 很好 但是我们怎么换狗呢

我们可以使用 accessibilityIncrement 和 accessibilityDecrement 通过向自定义元素 添加 adjustableTrait 我们可以让辅助科技知道 元素要响应这些回调函数 所以就旁白来说 当用户用他们的手指 上下滑动时 图集视图 会滚动到下一项 或上一项

现在看一下 这些信息标签 Bhavya 滑动它们的时候 它们的顺序混乱了 而且变量值标签 提供的信息 缺少上下文联系

上下文非常重要 如果我只是触摸变量值标签 查看狗是否已被领养 我将听到旁白说“是” “是”是什么 这是什么意思 什么和它对应

同样 我们遇到了导航问题 为了找到我们需要的东西 要浏览 14 个不同的标签 但是给它们加一个组框 不仅会使数量减半 还可以使导航快很多

把这些标签 归类分组 会便于用户理解 标签和变量值之间的关系 我们可以再一次使用 UIAccessibiliyElement 来完成这个操作 通过为每组标签创建元素 然后从 containing ViewsAccessibilityElements 属性里 返回他们

刚才 Bhavya 在 App 里 滑动元素时 救助站信息视图 分裂成三个单独的元素 救助站名字 定位按钮 和拨号按钮

和标签一样 按钮也缺少上下文 如果你不是先获取的救助站名字 而是先获取的其他按钮 那么这些按钮对应的是什么 就变得不清楚了

让这三个元素 单独存在 增加了用户在寻找 所需内容时 导航的元素数量 所以将它们组合 更便于理解 使导航更快

我们也要思考一下 这里的属性是什么 最相关的一条信息是 狗被安置在哪一个救助站 所以我们会把这条放在最前面 然后加上其他动作 定位和给救助站打电话

为了完成这个操作 可以使用 accessibilityCustomActions API 这样可以让我们 给元素加上动作 用户可以循环 直到找到想要的 然后激活 你可以返回 给定视图的自定义动作数组 每一个动作 都有一个名字 告诉用户接下来会发生什么 当他们激活这个动作时 在你的代码中 还有一个 “目标” 和 “选择器” 关系 用来执行这个动作 我们会让整个救助站界面 变得易于使用 并且添加 定位和拨号动作 最后是图册 视图 Bhavya 把这个视图拉出来时 我们可以滑动背景里的 所有元素 尽管这个视图看起来时模态的 但是情况并非如此 因为我们不是把此视图 嵌入视图控制器 然后模态呈现出来 而是把它放在图层视图上 因为背景上的内容 依旧是可见的 旁白不知道 要把它们排除出去

尽管旁白 可以获取图册中的一切 但是它会使用户感到迷惑 因为用户并不知道上下文 不知道他们到哪一步了 也不知道他们的动作会带来什么结果

为了解决这个问题 我们可以在显示视图中 重写 accessibilityViewIsModal 这可以告诉我们的辅助科技 现在只有那个视图中的元素是 可用的

我们还可以 发布通知 让辅助科技知道 屏幕上的内容已经发生了改变 它应该尝试重新聚焦

我们可以使用 screenChanged 的通知 来达到这个效果 现在我将把所有的都交给 Bhavya 他将给大家展示 如何使用我们刚才说到的 API 来应用这些解决方法 Bhavya

［ 掌声 ］ 谢谢你 Skyler 让我们把 App 的辅助功能体验 从很好变成出色 我将直接跳到 Xcode

从优化 上方轮播界面的体验开始 这里有一个类 命名为 DogCarouselContainerView 它包括狗的图集 收藏按钮 和图册按钮 Skyler 说起过 我们想要执行 递增和递减功能 这样就可以上下滑动 滚动浏览轮播界面了 为了实现这个操作 我们可以在这个类里创建一个属性 carouselAccessibilityElement 它将是一个 UIAccessibiliyElement 可以支持所有的这些手势 实现 carouselAccessibilityElement

它是 UIAccessibiliyElementlement 的子类 它还需要知道 所代表的狗 所以我们要创建一个属性

还要给它一个初始化程序 一些基础的 辅助功能 标签和变量值 标签是 “Dog Picker” 变量值是 “currentDog” 和它的 "Favorited" 的组合 好了 现在开始递增和递减功能 首先重写 accessibilityTraits 返回到 adjustableTrait 我们先运行 accessibilityIncrement()

我们想让递增功能 达到向前滚动 图集视图的效果 所以让我们创建一个功能 可以精确地做到这一点

现在有一个函数 accessibilityScrollCollectionView 它以布尔值表示 决定了图集视图 是向前滚动 还是向后滚动 在这个函数里

给容器视图加上引用 —— 当前狗 和所有狗的列表

如果我向前滚动 我能够得到当前狗的索引 然后验证它有没有越界 如果没有 我会让图集视图 向前滚动一个索引 然后我将在向后滚动 做类似的操作 不同的是先确定我的索引不会为负值 然后让图集 向后滚动一个索引

接着往下 在递增功能中 使用这个函数

将 Forwards 置为 true 表明我想要向前滚动

类似地 我可以实现 accessibilityDecrement() 唯一的不同点是 置为 false 因为我想向后滚动 这就是 carouselAccessibilityElement 部分 让我们滚动回上面的 ContainerView

这里我们需要暴露 carouselAccessibilityElement 要做到这样 我们可以重写 accessibilityElements

在这个函数里 加一个当前狗的引用 在继续创建我的元素之前 确保它是有效的 现在我们开始实例化 carouselAccessibilityElement

首先给 carouselAccessibilityElement 一个引用 如果早就已经有一个的话 如果没有 在这里实例化一个 把 accessibilityFrame 设置成 dogCollectionView.frame 然后我会在这里 给它保存一个引用 最后我将返回 元素数组

在做这个之前 我想给我的数组添加一些元素

先看看当前狗的照片 有没有超过一张 如果超过了 我希望我的数组包括 carouselAccessibilityElement favoriteButton 和 galleryButton 但是如果狗的照片 只有一张 那就把 galleryButton 删除 我要记得做一件事是 如果对应的属性 在我的 containerView 中 更新了的话 在 carouselAccessibilityElement 上 也要更新当前狗的属性

马上就做好了 回忆一下当我划向轮播界面时 信息统计视图的内容改变了 但是当我通过旁白滑动时 我需要让 App 让旁白知道 它需要更新 对屏幕上 accessibilityElements 的理解 要做到这一点 我可以在每次滑动时 发送一个布局变化的通知 找到视图控制文件 在 scrollViewDidScrollView 里 在最后面 发送 LayoutChanged 的通知 就像这样 这就是对 carouselContainerView 做出的处理 这个方法的核心部分是 使用和创建 accessibilityElements 而且我可以使用 同样的概念来解决 统计视图中的另一个问题 回忆一下统计视图 所有的信息 都是分开的 缺少上下文 我可以使用同样的概念 给统计视图中的信息 归类分组 添加上下文 找到 docStatsView 这些所有的统计视图 都在这里进行布局 首先重写 accessibilityElements 创建我的元素

我想缓存 从这个函数创建的元素 这样我就不需要 每次都重新计算它们了 要做到这一点 我可以创建一个私有属性值 名为 _accessibilityElements 起到缓存的作用 保存这些元素 继续函数

先看一下我的缓存是不是空白的 如果是的话 就继续填充我的元素

重申所有的 titleLabel 给 titleLabel 一个引用 像是品种 它对应的变量值 比如说 拉布拉多 加上标题 和它对应的变量值 我就可以创建一个 accessibilityElements 它包含这两种信息

首先在这里创建 accessibilityElements 把 label 和 accessibilityFrame 设置成 一个对应的变量值的组合 包括标题和变量值 把这个元素 添加到我的数组元素 当我循环了每组标题和变量值时 最后我会把缓存 设置成等同于这个数组 返回这些元素 要记住 每次狗的对象更新时 都要重置缓存 这样我们可以 为新的狗计算新的元素

要做到这一点 只需在这里把它置为 nil 这就是对狗的统计视图的操作

接下来 为拨号和打开定位按钮 添加一些内容 找到 shelterInfoView 里面引用了 救助站的名字 地图按钮和拨号按钮

我们希望在它们的内容视图上 这两个按钮 是自定义动作 要实现这一点 我们可以先把内容视图 暴露为 accessibilityElement

继续给它一个 命名标签 就是救助站的名字

最后重写 accessibilityCustomActions

在这个函数里 我们可以创建两个自定义动作 地图动作和拨号动作 旁白会把它们描述为 "Open address in Maps" 和 "Call" 但是要确保 正确定位这些字符串

每一个动作都要响应 对应的函数 然后激活那个按钮 比如说地图动作 会响应激活地图按钮 然后就会激活地图按钮 我已经在这里 顺手定义了函数 确保返回 以表明你的方式是成功的

这就是对救助站视图的操作

最后 改变模态视图 提升使用体验 我已经在 DogModalView 中 定义了模态视图 正如 Skyler 所说 为了帮助旁白将其识别为模态视图 我需要重写 accessibilityViewIsModal

马上就做好了 需要记住一点 当我按下图册按钮时 我们需要让 App 知道 屏幕上内容的布局 已经发生变了 这样旁白就可以选中正确焦点 为了做到这一点 可以每当图册按钮被按下时 发布一个屏幕改变通知

现在找到 视图控制器文件 在 galleryButtonPressed 函数里

如果我在模态视图创建动画 那么我会发布一个 screenChanged 的通知 就像这样 这就完了

我已经用这些新的辅助功能操作 预编译了 App 现在让我们看看新的 提升了的体验 是什么样的

打开旁白

打开旁白 Exceptional Dogs 选择狗 Pinky 可调整

用一只手指上下滑动 调整值 旁白告诉我 我可以像这样上下滑动 继续 上下滑动 滚动浏览轮播界面 Layla 向下滚动 对不起 是向下滑 Pinky 我也可以从左向右 滑动到收藏按钮和图册按钮 就像这样 收藏 按钮 显示图册 按钮

现在 我不仅可以 看到轮播界面里的每一只狗 而且还可以使用轮播界面里 每一只狗下面的收藏按钮 和图册按钮

再一次从左向右滑 跳过轮播界面 到统计视图 就像这样 名字 Pinky 这样我就不需要 导航整个轮播界面 现在体验感觉好了很多

继续浏览统计视图 看看会有什么样的体验 从左向右滑动 来导航这个界面 品种 杂交 年龄 7 岁

因为这个信息 现在已经归类分组了 可以给我更多的上下文联系 导航也变快了 因为我不需要浏览 每一个单独的标签

现在我把手放在 救助站的名字上 Skyler 的动物救助站

可用动作 旁白提示我 这里有可用动作 所以我们向上滑动 看看是什么 在地图中打开地址

拨号 这样我就清楚了 这些动作 是关于救助站名字的 而且可以在这里被执行 这给了我更多上下文

最后 双击图册按钮 激活模态视图 显示图册 按钮 Pinky 的第一张照片 图像 从左向右滑动 浏览图册 第二张照片 第三张照片 关闭 关闭 关闭按钮 聚焦不会超过 模态视图区域了 现在体验好多了 关闭旁白

［ 掌声 ］ 刚才把我们 App 的 辅助功能体验 从仅仅是可用 变成了出色的效果 我们是通过 围绕用户塑造体验 和模拟这个体验的交互 来实现这种转变的 通过这种改变 我们减少了用户的认知负担 你的用户会喜欢 你为 App 的辅助功能 多付出的这点努力 他们可以像其他人一样 享用这个软件 现在 我把剩下的时间交给 Skyler

［ 掌声 ］ 谢谢你 Bhavya 希望 Bhavya 的演示 能够向大家示范 一些小的改变 如何使辅助功能体验 变得更好 要注意的是 为你的 App 的辅助功能 创建一些个性化交互 并不总是好的选择 有时就简单的办法就是最好的 但是要让 App 可以无障碍使用 你真正要做的是 不仅仅考虑表层问题 而是要深入思考 对于那些通过科技 使用你 App 的用户来说 意味着什么 总结一下 我想回到今天开头所说的东西 可用性 是让 App 无障碍的第一步 但是我们能做得更好

我们能够也应该 为用户提供 出色的 愉悦的体验 满足他们的特殊需求

有很多方法 可以让一个无障碍 App 从有用的变成出色的

预先设计辅助功能 可以给你带来很多好处 比如确保 颜色达到 最低推荐对比度 或者布局可以充分适应 字体大小的改变 这将对所有的用户都是有益的 但是你也要 扩充你的默认设计 使它包含用户授权的设置

最后 在优化辅助科技的 辅助功能体验时 有目的地来做这件事 内容优先 在需要的时候 让导航和内容提示 变得简单直观

如果对于现在看到的 App 样本 一个简化的完成版 你想了解更多的信息和方法 你可以点击开发人员门户网站上的会议链接 而且在这场讨论会之后 我们会去 9 号科技实验室 届时会有辅助功能实验室 你可以询问关于 App 无障碍化 或者关于在辅助功能方面 如何优化体验的任何问题 所以如果你有任何问题 欢迎前来咨询

谢谢大家 希望大家能够 享受 WWDC 的其他内容 ［ 掌声 ］