iOS 无障碍化(适老化)适配总结

VoiceOver 和 Accessibility

iOS 开发中主要讨论的是 UIAccessibility 的 API 在 VoiceOver 上的运用.

重要: 使用旁白过程中遇到不明白的可以参考这个文档
旁白使用手册-在 iPhone 上学习旁白手势
比如下面这些情况

页面滚动, 旁白操作是 “三指轻扫”
激活项目, 旁白操作是 “轻点两下”
“幕帘屏”功能, 屏幕会关闭, 但是屏幕依旧可以操作(不是 bug) 开关这个功能操作是”三指轻点三下”
UISlider 的操作是 “轻点以选择滑块，然后单指上下轻扫”

检测当前是否开启无障碍模式

系统通知：UIAccessibilityVoiceOverStatusDidChangeNotification

系统方法：UIAccessibilityIsVoiceOverRunning()

iOS代码适配示例

UILabel *titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 100, 100)];
// 描述控件是什么 第一个播放
titleLabel.accessibilityLabel = @"标签";
// 元素的特征 如按钮、链接等 第二个播放
titleLabel.accessibilityTraits = UIAccessibilityTraitStaticText;
// 附加说明 第三个播放, 只在真机播放, 且有一秒延迟
titleLabel.accessibilityHint = @"提示";
// 元素的frame(基于屏幕坐标系, 一般不用填设置), 当系统聚焦到当前元素时, 会有一个黑色的外框, 该值就是聚焦框的大小. 当元素过小时可以通过设置该 frame 使得容易点击, 这个不会改变 app 的 UI. 默认为 CGRectZero.
titleLabel.accessibilityFrame = CGRectMake(0, 0, 100, 100);
// 元素的值 用在UISlider,UITextField等组件上 用来描述元素的值
titleLabel.accessibilityValue = @"60%";
// VoiceOver会把这几个属性连接起来, 朗读顺序为label→value(可选)→traits→hint.

需要适配的场景

由于系统控件是默认处理好的,而且VoiceOver的默认阅读顺序通常也没什么大问题,因此需要开发者专门去兼容的场景有如下

自定义 View 组件无障碍化

当子元素需要配置成 accessible, 而你的视图容器不需要配置成 accessible, 下面两个方法可以解决

直接设置 accessibilityElements 属性 (iOS8+), 使用在代码里搜下吧, 很简单.
(很老的 API 了, 不推荐使用)视图需要实现 UIAccessibilityContainer , 示例如下

点击查看 "UIAccessibilityContainer" 实现代码


// 这里我们假定这些子元素都没有默认实现UIAccessibility协议,这时就需要用到UIAccessibilityElement
@implementation ContainerView

(NSArray *)accessibleElements {
 if ( _accessibleElements != nil ) {
return _accessibleElements;
 }
 _accessibleElements = [[NSMutableArray alloc] init];
 // 每一个子元素都是一个UIAccessibilityElement,将他们全都添加到_accessibleElements中
 UIAccessibilityElement *element1 = [[[UIAccessibilityElement alloc] initWithAccessibilityContainer:self] autorelease];
 [_accessibleElements addObject:element1];
 UIAccessibilityElement *element2 = [[[UIAccessibilityElement alloc] initWithAccessibilityContainer:self] autorelease];
 [_accessibleElements addObject:element2];
 return _accessibleElements;
}
// 这个ContainerView是不支持Accessibility的
(BOOL)isAccessibilityElement {
 return NO;
}
// UIAccessibilityContainer协议方法
(NSInteger)accessibilityElementCount {
 return [[self accessibleElements] count];
}
(id)accessibilityElementAtIndex:(NSInteger)index {
 return [[self accessibleElements] objectAtIndex:index];
}
(NSInteger)indexOfAccessibilityElement:(id)element {
 return [[self accessibleElements] indexOfObject:element];
}
@end

只有背景图片无文字的控件

需要给出描述和对应控件的属性, 例如返回按钮/关闭按钮

1
2
3

self.backButton.accessibilityLabel = @"返回";
self.closeButton.accessibilityLabel = @"关闭";
self.closeButton.accessibilityTraits = UIAccessibilityTraitButton;

读取时间的无障碍

24 小时制的时刻系统无障碍会按字符一个个读出,需要转化成 12 小时制的写法,才会正常读取时间,例如 22:58 要写成 10.58PM.

某些控件的无障碍元素默认是关闭的, 需要开启

UIView/UIImageViewisAccessibilityElement 默认为 NO
而 UILabel/UIButton/UISwitch/UICollectionViewCell/UITableViewCell/UIPageControl 等组件默认为 YES.
其中 UILabel 比较离谱, 偶现 setText, 然后 po isAccessibilityElement 为 YES, 但是不响应的情况, 最好都显式设置 isAccessibilityElement = YES 吧.

父 View 如果为 AccessibilityElement, 子 element 将不响应 VoiceOver

1 2	self.bottomView.isAccessibilityElement = YES; self.bottomView.accessibilityLabel = @"XXX";

比如一个View中有多个Label,那么每一个下面的Label单独访问可能意义不大,那么就可以将这个View设置成可以访问的,然后将其accessibilityLabel设置为所有子Label的 accessibilityLabel的合并值.

无障碍控件点击区域过小

类似下图：图片和文字搭配, 需要扩大无障碍点击范围:设置accessibilityFrame,通过CGRectUnion(frame1,frame2);
需要注意的是 accessibilityFrame 是相对屏幕的坐标系的, 使用 [UIView convertRect:toView:] 来转一次才能设置, 如果用了自动布局会很麻烦.

UI 组件实际功能不符合时

使用 button 只做点击作用的时候(不需要选中态),需要设置对应的控件属性 accessibilityTraits

// 1. 不需要播报"已选中"
button.accessibilityTraits &= ~UIAccessibilityTraitSelected;
// 2. 纯文本
button.accessibilityTraits = UIAccessibilityTraitStaticText;

使用 laber / view / imageView, 实现自定义响应事件时,设置对应控件属性 accessibilityTraits 为 UIAccessibilityTraitButton.

hidden 元素

有时把某个 view 设成 hidden 的时候, UI 上已经不展示了, 但是VoiceOver仍然可以读到.
此时可以使用

1	UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, nil)

强制更新VoiceOver的表现.

主动播报

toast 弹出或者刷新成功等场景需要主动播报, 如下:

1	UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, voiceText);

弹窗

弹窗后屏蔽弹窗下面的元素

1
2

popupView.accessibilityViewIsModal = YES;//当前view才能响应无障碍播报
UIAccessibilityPostNotification(UIAccessibilityScreenChangedNotification, popupView.accessibilityElements.firstObject);

焦点乱跳

焦点乱跳有两个可能

UICollectionView/UITableView reloadData 时候焦点会跳到最后一个 Cell, 解决办法为自行实现 cell 的更新, 减少直接 reloadData 调用; 如果这个 Cell 是满屏的, 可以设置当前 Cell 的 accessibilityViewIsModal 简单解决.
某个 UI 元素被加入到 accessibilityElements 但是又被标记为不可用 isAccessibilityElement = NO, 在手指左划时会出现焦点乱跳(但是右划正常)

UICollectionViewDelegate 异常

在无障碍开启时, UICollectionViewDelegate 部分回调异常, 表现为 Cell 提前预加载了, 不在这些方法中执行关键逻辑即可, 目前已知下面两个回调会有异常

1
2
3

- (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath;

- (void)collectionView:(UICollectionView *)collectionView didEndDisplayingCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath;

Cell 横划删除在无障碍下无法使用

使用自定义操作来代替

UIAccessibilityCustomAction * action = [[UIAccessibilityCustomAction alloc] initWithName:@"测试" target:self selector:@selector(testToast)];
UIAccessibilityCustomAction * action1 = [[UIAccessibilityCustomAction alloc] initWithName:@"测试1" target:self selector:@selector(testToast1)];
UIAccessibilityCustomAction * action2 = [[UIAccessibilityCustomAction alloc] initWithName:@"测试2" target:self selector:@selector(testToast2)];

self.accessibilityCustomActions = @[action, action1, action2];

触发方法:

单击选中该 UI 元素
单指上下划, 第一次播报 “测试”, 再单指上下划第二次播报 “测试2”, 继续划会有第三次播报 “测试3”, 第四次播报”激活” (初始状态).
然后在某一次播报后单指双击, 就可以触发对应的 selector

需要播报”已选中”

// 设置"已选中"播报
view.accessibilityTraits |= UIAccessibilityTraitSelected;
// 移除"已选中"播报
view.accessibilityTraits &= ~UIAccessibilityTraitSelected;