Accessibility Inspector

（辅助检查器）

大家早上好 我是Gary 是辅助功能团队的 一名工程师 今天很高兴向大家介绍一款 叫辅助检查器的工具

辅助检查器 能够让你轻松查找 诊断并修复app内的辅助功能问题 在此次演讲中 我们将用我们的 示例app来实现这一点 让我们直接开始

这是我的花生酱追踪app 它可以帮助花生酱爱好者们 追踪他们喜欢的品牌 还可以评价和记录详细信息 点击相应栏 就能看到关于该品牌的详情 在这里我可以给我喜欢的花生酱拍照 我可以点赞 也可以进行再次购买或与朋友分享 现在 我想来测试详情界面的 辅助功能问题 但我不知道应该从何处下手 辅助检查器 就可以将这项艰巨的任务变简单 我们先打开 辅助检查器 首先 我转到Xcode

在Xcode下面 你会看到打开开发者工具 （打开开发者工具） 在这里 就可以找到 辅助检查器 你可能看到了一个大提示框 这其实是一项新的功能 这是我们为低视力Mac用户添加的 叫Hover Text 它可以使鼠标下的内容 更大更清晰 在我们今天的示例中会用这项功能

现在我们打开检测器 我要使用目标选择下拉列表 来选择我的iOS设备 （Gary的MacBook Pro - iPhone） 该检测器分为三部分 首先是检测器选项

其次是审核选项 最后是设置选项 我们现在重点来看审核选项

这是帮助我找到app中 辅助功能问题的最简单的方法之一 点击运行审核按钮 你就会得到潜在的辅助功能问题列表 现在我们来试试 （运行审核）

立马就可以找到许多问题

点击这些问题 就会以黄色突出显示问题元素

让我们从中间的 图片名称在描述中已使用问题开始

这个问题好像影响到了所有三个按钮

旁白等辅助技术 运用标签等 辅助信息 来帮助用户与视图中的 UI进行交互和定位 但是 我们要如何像辅助技术 提供此类信息呢

你可以点击右侧的帮助按钮 它会给你提供建议

所以 在这里 它说 设置一个可读的本地化辅助标签

现在我们回到检测器选项 （检测器）

现在 我要检查自定义按钮 为此 点击顶部点测按钮 （点测）

现在我的手指在屏幕上 可以随意移动 可以专注任一辅助元素 让我们从自定义按钮开始

在基本部分的下方 你可以看到标签属性 设置为图片文件名

这样用户的体验感就会很差 为了帮助你了解这种体验 我们增加了一个新的功能 按下扬声器按钮 就可以读出这些内容 （说） Camera.on.rectangle按钮 我可以点击下一按钮 即可切换至下一元素 Sue.heart按钮 Cart.badge.plus 按钮 当我们浏览这些按钮时 我们听到的都是无用的描述

这些描述并没有告诉我们 这些按钮有什么用 所以我们来看看代码 并为自定义按钮 添加一些有意义的标签

想要添加标签 我们只需在页面下设置辅助功能的 标签属性 对于收藏按钮 我就把它设置为收藏状态

对于相机按钮 就简单将它设置为拍照

对于立即购买按钮

就设置为购买 记住 要正确将字符串本地化

现在我们回到检测器 （活动监测 辅助检查器） 来继续查看其他问题

这里似乎有一个无法访问的文本 （潜在无法访问文本） 如果你使用的是UIKit发送者 或app键控件 那么就可以自由访问 但是 在这个例子中 我们用的是 CATextLayer绘制品牌名称 所以我们就要自己解决访问性问题

让我们看看代码 看看要如何访问这个自定义文本 （潜在无法访问文本） （最小化）

我要做的第一件事 是要让辅助技术知道 这是一个辅助元素 为此 我将isAccessibilityElement 设为真

接下来我就要给它一个有意义的标签 在这个例子中 我将它设为brandName 好了

让我们回到检测器 看看最后一个问题 （辅助检查器）

这里有一个品牌名称的 对比度问题 我们点击这个小三角形 来获取关于这个问题的详细描述 （对比度未达到预期 文本对比度为2.32） （文本色#AAAAAA 背景色#FEFFFE） 这里显示了对比度 及我们用来计算的颜色

以清晰易读的方式显示信息 是至关重要的

但是我们品牌名称的对比度 让用户看不清楚里面的文字

让我们点击帮助按钮 （修改建议：保证对比度易于阅读） （将文字或背景颜色 调至高于3.0） 这里显示了推荐对比度 应该高于3.0 但是要如何实现呢 辅助检查器 有一个很有用的功能 叫颜色对比度计算器 它可以让文本和背景颜色 达到推荐对比度 我们可以从菜单 窗口找到这个工具 （最小化 - 放大 - 显示主窗口 - 显示通知） 显示颜色对比度计算器

点击拾色器 点击品牌名称的亮灰色

你可以看到对比度是2.3 低于推荐对比度3.0 所以 现在我使用滑块 来选取既满足对比度需要 又不破坏我原有设计的颜色

这个深灰色看起来不错 我们就用这个

现在我要做的第一件事情 就是添加深灰色

接下来 我再设置文本图层的前景色

为我们刚刚添加的颜色

接下来就是见证真相的时刻 让我们再次运行app 看看是什么情况

当我运行app时 我也同时打开探测器

为了验证我们的所有更改是否有效 我将再一次运行审核测试

好 所有警告都没有了

让我们转到检测器选项 看看阅读功能在该页面能否正常运作 点击自动导航按钮

Nutter Buddy按钮 Patty的奶油标题 Patty的花生酱罐子图片 拍照按钮 收藏按钮 立即购买按钮 奶油 非搅拌 非常好吃

这样体验感就好多了

这只是辅助检查器 帮助你创造良好的 app体验感的几种方式 这是一款能够帮助你查找 和解决辅助功能问题的强大工具 也是开始编写辅助功能的简便方法 我建议你花一些时间 审核你自己的app 让每个人能够使用你的app