返回 登录
-199

iOS平台无障碍化利器——VoiceOver

阅读2468

作者:
王哲(debug),腾讯实习生,现就读于吉林大学。2016年实习于腾讯公司,主要从事iPhone手机QQ无障碍化相关的技术预研,包括声纹转换等。
闫石(rockey),腾讯移动客户端开发高级工程师。2013年入职腾讯公司,主要从事iPhone手机QQ基础平台的相关工作,负责领域包括基础关系链、基础公共组件等。
本文为《程序员》原创文章,未经允许不得转载,更多精彩文章请订阅2016年《程序员》

前言

VoiceOver是苹果“读屏”技术的名称,属于辅助功能的一部分。当用户在选择了指定交互元素时,VoiceOver会读出这个元素的信息和使用提示,以帮助盲人进行人机交互。

比如:当你轻点导航栏中的“返回”按钮,VoiceOver会告诉你“返回 按钮”。 图1为VoiceOver的点击响应效果,一目了然。

VoiceOver基本操作

在VoiceOver模式下的手势操作和平常不同,以下列举一些常用的功能,见表1。

图片描述

表1 VoiceOver模式下的手势操作

VoiceOver还有许多为视障人士提供的辅助操作,可以到苹果官网上查看更详细的内容。

VoiceOver开发入门

有了以上的了解,本节将介绍APP应用如何支持VoiceOver。

标准控件进行VoiceOver开发

AccessibilityElement的概念

AccessibilityElement,它是指可以被VoiceOver访问的UI元素,UIKit中的控件基本都支持VoiceOver,但UIView不是,不过也可以通过设置UIView的isAccessibilityElement属性来控制某个View是否是AccessibilityElement,在UIKit的控件中,像UILabel,UIButton这些控件的isAccessibilityElement属性默认就是YES,UIView这个属性默认是NO。

AccessibilityElement的应用

一般的AccessibilityElement系统会自动读出它的内容,所以很多情况下不需要做特殊处理应用也会支持VoiceOver。

扩展应用

但如果想自定义读出的内容就需要用到以下属性:

accessibilityLabel(标签)一个简单的词或短语,它简洁明了地描述控件或者视图,但是不能识别元素类型,UIAccessibilityElement必须要有这个属性。例如“添加”、“播放”。

accessibilityHint(提示)一个简单的词或短语,描述发生在元素上动作的结果。例如“添加标题”或者“打开购物列表”。

accessibilityValue(值)不是由标签定义的元素时的当前值。仅当元素的内容是可改变并且不能使用label描述时,一个无障碍元素才需要为其赋值。例如,一个进度条的标签可以是”播放进度”,但是它当前的值是“50%”。

accessibilityTraits这个element的类型以及状态,就是通过traits来表征这个Element的特质,数据类型是一个枚举类型,可以通过按位或的方式合并多个特性。

VoiceOver会把这几个属性连接起来,朗读顺序为label→value(可选)→traits→hint。但需要注意的是,当某个View的是AccessibilityElement的时候 ,其subviews都会被屏蔽掉,如果想要都读出来,只能改变他们的层次结构,并都设置isAccessibilityElement为YES。这个特性还是挺有用的,比如一个View中有多个Label,那么每一个下面的Label单独访问可能意义不大,那么就可以将这个View设置成可以访问的,然后将其accessibilityLabel设置为所有子Label的 accessibilityLabel的合并值。

图片描述

图1 VoiceOver效果演示

自定义控件进行VoiceOver开发

这里的自定义控件特指UIView的某些子类,默认情况下自定义控件是不支持VoiceOver的。

可以通过两种方式使之支持其功能:
1. 实现isAccessibilityElement协议,在UIView子类中实现此协议返回YES。
2. 直接设置isAccessibilityElement属性,将其设置为YES。

自定义其他属性和标准控件一样

需要注意的是通常情况下控件在使用VoiceOver时touch事件会失效,但是有时候需要让控件处理touch事件,比如画图功能,画布需要处理触摸事件,这时就需要设置画布的accessibilityTraits:

paintCanvas.accessibilityTraits
|= UIAccessibilityTraitAllowsDirectIntera
ction。

如果想要实现监听焦点是否在当前控件上,可以在子类中实现:
1. accessibilityElementDidLoseFocus方法。
2. accessibilityElementDidBecomeFocused方法。
3. 再利用编写协议回调来实现监听焦点是否在当前控件上并执行特定操作。
例如:

- (void)accessibilityElementDidLoseFocus{
[self.delegate viewDidLoseFocus];
}
- (void)accessibilityElementDidBecomeFocu
sed{
[self.delegate
viewDidBecomeFocused];
}

iOS平台开放的其他VoiceOver关键能力

通知

Accessibility提供了一系列的通知,可以完成一些特定的需求。
你可以监听UIAccessibilityVoiceOverStatusChanged通知,来监控VoiceOver功能开启关闭的实时通知 。也可以使用UIAccessibilityPostNotification方法在App中主动发送一些通知,来让系统做出一些变化,它有两个参数,第一个是通知名,第二个是你想让VoiceOver读出来的字符串或者是新的VoiceOver的焦点对应的元素。

比如:
你想让焦点转移到特定控件:

UIAccessibilityPostNotification(UIAcces
sibilityScreenChangedNotification,self.
element);

或者读出一段语音

UIAccessibilityPostNotification(UIAccessi
bilityAnnouncementNotification, @"需要读出
来的内容");

除此之外还有很多通知,可以去苹果官方文档查找更详细的说明。

模拟器中调试VoiceOver

在模拟器中想要使用VoiceOver也需要在设置里打开,不过打开之后并不会读出声音,而是会出现一个提示框,点击左上角关闭按钮可以关闭VoiceOver,再次点击重新打开,很方便,如图2所示:

图片描述

图2 VoiceOver的模拟器调试

  1. Accessibility Inspector是展示元素的可用性。
  2. Label 对应 accessibilityLabel属性。
  3. Traits 对应 accessibilityTraits属性。
  4. Frame 对应 accessibilityFrame属性 (朗读时在屏幕上显示的聚焦框位置和大小,一般不需改动)。

VoiceOver开发进阶

前面提到过VoiceOver模式下有几种特殊的手势,相关的操作方法在上文有所介绍,这里不再赘述。

这些手势需要重写特定的方法来执行视图或视图控制器的特定任务。最基本的一条原理,即UIKit使用responder链搜索方法,从有VoiceOver焦点的元素开始。如果没有对象实现合适的方法,执行系统默认操作。

需要注意的是,所有的VoiceOver特殊手势方法都返回一个BOOL值,该值决定是否通过responder链传递。暂停传递返回YES,否则返回NO。

双指搓擦(Z字形手势)

使用accessibilityPerformEscape方法处理双指搓擦手势。

双指搓擦的手势像是电脑的ESC键的功能,它关闭一个临时对话框或浮层来回到原本界面。也可以使用双指搓擦手势在自定义导航层级中回到上一级页面。

如果已经使用了UINavigationController对 象 ,那么不 需 要 实 现 该 手 势 , 因 为UINavigationController对象已经处理了该手势。

魔法轻拍(双指双击)

使用accessibilityPerformMagicTap方法来处理魔法轻拍手势。

这个手势没有特定使用场景,它用来快速执行用户常用的或最想要的操作。比如在计时应用中用来开始/停止计时,或者在音乐播放器中用来切换歌曲等。

三指滚动

使用accessibilityScroll:处理三指滚动手势,滚动自定义视图的内容。它接受一个UIAccessibilityScrollDirection类型的参数,表示滚动的方向。

结束语

短暂的VoiceOver入门之旅已经接近终点,希望通过这篇文章能让大家对VoiceOver开发能有比较全面的认识。笔者这里只是介绍了较为基础的部分,还有如UI Accessibility编程接口或者非UIView和其子类的UI元素如何支持VoiceOver等等。学无止境,只有真正用心才能做出真正帮助到视障人群的无障碍化产品。


订阅2016年程序员(含iOS、Android及印刷版)请访问 http://dingyue.programmer.com.cn
图片描述

订阅咨询:

• 在线咨询(QQ):2251809102
• 电话咨询:010-64351436
• 更多消息,欢迎关注“程序员编辑部

评论