原文地址: iOS 无障碍化(适老化)适配总结
VoiceOver 和 Accessibility
iOS 开发中主要讨论的是 UIAccessibility 的 API 在 VoiceOver 上的运用.
检测当前是否开启无障碍模式
系统通知：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.
只有背景图片无文字的控件
需要给出描述和对应控件的属性, 例如返回按钮/关闭按钮
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
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仍然可以读到.
此时可以使用
UIAccessibilityPostNotification(UIAccessibilityLayoutChangedNotification, nil)
强制更新VoiceOver的表现.
主动播报
toast 弹出或者刷新成功等场景需要主动播报, 如下:
UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, voiceText);
弹窗
弹窗后屏蔽弹窗下面的元素
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 提前预加载了, 不在这些方法中执行关键逻辑即可, 目前已知下面两个回调会有异常
- (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;
