iOS UIAccessibility旁白、无障碍

背景:

国内出台了政策要求适配老年版、盲人版App。手机系统已自带 旁白(iOS)、无障碍(安卓) 功能,可打开设置-辅助功能-旁白体验相关功能。

1、在国内各级部门陆续出台了多项法规、政策、标准等要求适配无障碍。

2、在国外,许多国家和地区对信息无障碍均有相关立法,要进入当地市场,必须要符合信息无障碍相关的法律法规。

3、目前,中国有8500多万残障人士,2亿多60岁以上的老年人,都是目标群体,潜在用户量很大。

无障碍各端说明:

IOS就是适配VoiceOver服务,Android就是适配TalkBack(盲人模式)的服务,H5就是W3C WAI 规范,具体效果就是 老年人、视障人士 在手机系统设置中开启旁白辅助模式后,用户触摸到App页面控件后就语音播报出对应的内容。


一、UIAccessibility:


辅助功能属性有4种,系统播报的顺序为:(默认情况下,标准的UIKit控件和视图已经实现了UIAccessibility功能)

accessibilityLabel:描述内容“是什么”,例如 “产品名称”

accessibilityValue:描述“值是多少”,例如“年化利率5%”

accessibilityTraits:描述"特性、状态、行为、用法"。控件的特性可以是按钮(Button),控件的状态可以是已选中(Selected)

accessibilityHint:  描述行动“做什么”,例如“点击两下可跳转购买页面”

1、Label、Value、Hint配置的字符串,会以语音的形式念出来,配置什么,念什么。

2、配置的Traits各个类型,也会以语音的形式念出。例如:UIAccessibilityTraitSelected、UIAccessibilityTraitImage、UIAccessibilityTraitButton分别播报"已选定”、”图片”、”按钮”。

Traits类型:

按钮(Button)

链接(Link)

搜索域(Search Field)

键盘按键(Keyboard Key)

静态文本(Static Text)

图像(Image)

播放声音(Plays Sound)

已选中(Selected)

总结元素(Summary Element)

常态更新(Updates Frequently)

不可用(Not Enabled)

空(None)


二、示例:


给控件添加如下属性,就可以按照你预期的文案去播报了:

button.accessibilityLabel = @"交易明细";

//button.accessibilityValue = @"年化利率5%";

button.accessibilityTraits = UIAccessibilityTraitButton;

button.accessibilityHint = @"点击两下可跳转交易明细页面";

button.isAccessibilityElement = YES;


小技巧:

1、在界面上单指左右扫动可以切换焦点,可以通过这种方式查看整个页面有哪些焦点、也可以查看各个焦点的顺序。

2、三只手指双击屏幕,可以开启、关闭语音。

3、四只手指侧滑屏幕可以切换到上一个app。


三:填坑:


1、当整个View作为VoiceOver的访问元素,View中的子控件都会变为不可访问,那如何使父控件、子控件都支持VoiceOver?

处理:

改变他们的层级关系(把子控件移到上一个层级),且都开启isAccessibilityElement = YES。

2、cell是默认可整块选中的,设置过isAccessibilityElement = YES的子控件只有选中当前控件才会播报;其他控件在选中cell的时候会全部依次播报。如何使cell不可选中?(即使cell设置了isAccessibilityElement = NO 也没用)

处理:

cell中的所有控件都设置isAccessibilityElement = YES 或 NO后,点击cell无法选中且没有播报内容了。

3、我给cell加了一个字符串变量:@property (nonatomic, copy) NSString *account: 结果选中整个cell的时候会播报account的值。

处理:

我改成NSInteger来处理就没有播报了。。。

4、手势登录播报:我给9个按钮依次做了1-9的编号,点击按钮的时候会播报对应的数字,但是连不起来。

处理:

点击按钮两次,点第二次的时候长按两秒钟,这时候就可以滑动手指来录入手势了。

5、弹出自定义弹窗后,可以浏览到底层元素的bug。

处理:

view.accessibilityViewIsModal = YES;//当前view才能响应无障碍播报\

UIAccessibilityPostNotification(UIAccessibilityScreenChangeNotification, view.accessibilityElements.firstObject);

6、调整页面焦点顺序:

view.shouldGroupAccessibilityChildren = YES; //借助层级关系调整 \

self.accessibilityElements = @[label1, label2]; // 调整返回顺序,数组前面的对象优先级最高(如果数组中的对象为nil,会导致闪退)

注意:

调整层级时不要漏掉控件,否则旁白模式下这个被遗漏的控件会无法选中也无法播报

7、banner图是做的无限轮播图,如果用普通右滑操作切换到下一个焦点,旁白模式下会出现一直在轮播图内循环的现象

处理:

// 在旁白开启状态下禁用滚屏 

if (UIAccessibilityIsVoiceOverRunning()) { 

    // 禁用滚屏 

8、检测是否开启了无障碍:

 UIAccessibilityIsVoiceOverRunning()

9、播报完一段语音的通知:(处理频繁播报时一句语音未播完就马上播下一条的问题)

[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(announcementFinished:) name:UIAccessibilityAnnouncementDidFinishNotification object:nil];

10、如何在全键盘中用中文播报数字?(选择了英文的全键盘)

使用中文键盘就会自动播报中文,使用英文键盘就会播报英文

11、一段文案中有两个跳转事件:点击隐私政策,只会跳转第一个,第二个一直跳转无效

处理:

a、双击会响应第一个跳转事件,重按会响应第二个跳转事件

b、改成两个控件,每个控件一个点击事件

12、如何取消编辑模式?

点击页面其他控件、点击键盘完成按钮

13、主动播报:

UIAccessibilityPostNotification(UIAccessibilityAnnouncementNotification, @“播报内容”);

14、没有开启旁白模式的情况下语音播报:(这个是用的另外一个播报方式,与“旁白”不相关)

AVSpeechSynthesizer *avSpeaker = [[AVSpeechSynthesizer alloc] init];//(遇到一个bug:iPhoneX上运行release包在这一行会闪退,其他场景都正常)

avSpeaker.delegate = self;

AVSpeechUtterance *utterance = [[AVSpeechUtterance alloc] initWithString:text];

utterance.rate = 0.5;//语速

utterance.pitchMultiplier = 1;//音高 0.5-2

utterance.volume = 1;//音量0-1

utterance.preUtteranceDelay = 0.5;//停顿

utterance.postUtteranceDelay = 0.5;

utterance.voice = [AVSpeechSynthesisVoice voiceWithLanguage:@"zh-CN"];

[avSpeaker speakUtterance:utterance];

15、数字连读处理,比如播报验证码1234的时候,系统会自动播报成“一千两百三十四”。

处理:

在中间加分隔符 1:2:3:4,这样就会一个数字一个数字的读了

16、对比度适配

适配无障碍时,还要求页面样式达到相应的对比度,就是文字和背景颜色不能太相近导致不容易识别。

对比度的要求是,18dp/pt以下的文字,要求4.5:1;18dp/pt以上的文字,要求3:1。

对比度检查网站(输入RGB十六进制格式的前景色和背景色进行对比)


四、拓展


1、UIAccessibilityContainer Protocol:

一些非标准控件或者非UIView子类、通过draw方法画出来的区域,以上两种情况都不能实现无障碍播报,这种情况需要UIAccessibilityContainer Protocol来实现无障碍播报:

@interface TestView ()

@property (nonatomic, strong) NSMutableArray *accessibleElements;

@property (nonatomic, strong) UIImageView *img1;

@end

@implementation TestView

- (NSArray *)accessibleElements {

   if (_accessibleElements) {

      return _accessibleElements;

   }

   _accessibleElements = [[NSMutableArray alloc] init];

   UIAccessibilityElement *element1 = [[UIAccessibilityElement alloc] initWithAccessibilityContainer:self];

   element1.isAccessibilityElement = YES;

   element1.accessibilityFrame = [self convertRect:self.img1.frame toView:nil];

   element1.accessibilityLabel = @"游戏中心";

   element1.accessibilityTraits = UIAccessibilityTraitImage;

   [_accessibleElements addObject:element1];

   return _accessibleElements;

}

// 这个TestView不支持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


2、Accessibility Inspector:

可访问性查看器(Accessibility Inspector):提供了一种访问重要信息的方法,在当前页通过可访问性树的辅助技术可以使重要信息显示出来,从而允许你去检查丢失的或者需要注意的信息。

使用:

Xcode -> Open Developer Tool -> Accessibility Inspector


参考:

Bring accessibility to charts in your app

Deliver an Exceptional Accessibility Experience

Accessibility in SwiftUI

Accessibility Programming Guide for iOS

官方样例代码


iOS Accessibility: Getting Started

iOS Accessibility(辅助功能)超详细讲解

iOS Accessibility指南

带你认识—iOS Accessibility

iOS手机无障碍编程总结

语义化与无障碍树(前端资料)


信息无障碍研究会

信息无障碍产品联盟


如发现遗漏或者错误,请在下方评论区留言。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,242评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,769评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,484评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,133评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,007评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,080评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,496评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,190评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,464评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,549评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,330评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,205评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,567评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,889评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,160评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,475评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,650评论 2 335

推荐阅读更多精彩内容