信息无障碍产品联盟技术专家刘彪:借助新兴技术缩小信息障碍

发表于 2017-12-06 15:54:00   阅读量(4562)



2017年12月01-02日,由51CTO主办的WOTD 2017全球软件开发技术峰会在深圳中洲万豪酒店召开。自2012年以来,WOT品牌大会成功举办了十四届,积累了大量的技术专家资源,成为了业界重要的技术分享交流平台以及人脉拓展平台。


12月01日上午的WOTD 2017主会场,信息无障碍产品联盟秘书处、深圳市信息无障碍研究会技术专家刘彪发表了主题为《前端信息无障碍技术与框架》的精彩演讲,从技术角度对中国信息无障碍的发展现状和互联网实现方式进行解读与分享。刘彪的分享内容主要包括以下三方面:一是实现前端信息无障碍的应用技术;二是优秀框架里信息无障碍的实现方案;三是前端框架集成信息无障碍的注意事项。


 

图:刘彪,深圳市信息无障碍研究会技术主管


下面就让我们通过现场回顾,跟着刘彪一起来学习吧!


一、信息无障碍的概念和受益群体


信息无障碍,一般解释为任何人(无论是健全人还是残疾人,无论是年轻人还是老年人)在任何情况下都能平等地、方便地、无障碍地获取信息、利用信息。首先大家想到的可能就是障碍人士,比如视觉残障、听力残障的朋友,在信息获取上肯定有一定障碍。而刚才提到的是任何人,这怎么理解呢?比如大家开车的时候需要看地图,这时候看地图肯定不方便,所以需要有语音导航,这个场景下大家没有办法用眼睛看,只能听,实际上就相当于是视觉障碍了。还有一种场景,比如你现在在嘈杂的环境中,或者正在开会,这时候有人给你发了一条微信语音消息,你怎么听?实际上微信里面有一个语音转文字的功能,可以将语音消息转为文字消息。这种场景下,实际上你就相当于是听障者,没有办法听取消息了。所以说,信息无障碍不仅解决残障用户的信息获取问题,同时让普通人、健全人也能够更好地使用互联网获取信息。因为每个人在特定的场景下都会某种身体功能受限。


据统计,各类障碍人群数量都是过千万,去掉重复人口合计也是过亿。实际上障碍人群使用互联网的意义特别大,互联网是障碍人群融入主流社会很重要的渠道。现在通过互联网,他们有做翻译的、有做律师的、还有做程序员的,各行各业……正是互联网的出现,缩小了障碍人士与健全人之间的差距,这个改变主要改善了信息获取的障碍和身体功能的障碍。拿打车举例,在过去,如果视力障碍,想打车,就只能在路旁边打车,但是你不知道过去的哪辆是出租车,有的人很厉害听得出来哪辆是出租车,说是听汽车的引擎来判断的,很厉害,我是听不出来。另外,你即使听出来,也不知道上面有没有人。以前打车是你找车,现在通过滴滴软件,把这个过程反转过来了,变成车找人,只要你能描述出自己的位置,司机就可以找到你了。这种情况的改善使得障碍人士出行有了比较大的变化。


一、信息无障碍的商业价值


对于一家公司,信息无障碍能不能在商业领域产生效益呢?这里我们列了几条针对商业方面的:



1、为现有用户着想。你原本有大量用户。很多产品在第一次听我们说信息无障碍时,才知道自己的产品原来有这么多障碍用户在使用!这是第一点,信息无障碍可以改善用户的体验。


2、增加产品的可用性、易用性。因为产品越是便捷,使用的效率就越高,对用户体验的提升、改善帮助也就越大。


3、新的蓝海市场数量。目前我国障碍用户过亿,这个数量是很可观的,而且这些用户会成为产品的重度用户。比如出行这件事,视障用户必须得依靠软件解决,出行就得用软件,这就是重度用户。比如支付,使用纸币支付要知道这个货币的面值,很麻烦,所以视障用户一定会用支付宝、微信这样的软件。所以这些障碍用户将成为你产品的高质量的黏性用户,高黏性的。



4、同业竞争。信息无障碍的产品能有差异化优势。


5、是互联网必然的发展趋势,BAT都已经开始做信息无障碍很多年了;马化腾也在2015年“两会”对信息无障碍进行提案。


6、是国际化的必须。很多国家对此有严格法律强制,像美国有508法案。很多产品如果说要进入海外市场,如果这个产品不能被障碍人士顺利使用,一旦障碍人士对你进行起诉,你将面临高额的赔偿。这是对于商业公司的意义。


7、还有更多美好的故事。比如信息无障碍可以帮助企业去实现CSR、品牌等。


 

现场演讲PPT截图:信息无障碍的商业价值


三、信息无障碍的应用技术


讲两个比较重要的技术:


1、WCAG技术。这是一个方法论,一个产品要满足哪些点、对比度要达到什么样的要求、错误提示应该给出一种什么样的提示,这里面分四块:可感知、可操作、可理解、鲁棒性。这个方法论,可以用来检查产品在信息无障碍上做得怎么样。


2、WAI-ARIA技术它提供的是一个针对网页内容增强的无障碍体验,HTML里面有很多无障碍属性,比如IMG元素的Alt属性,除了能够被搜索引擎识取图片是什么样的图片,对于使用屏幕阅读器的用户,可以把里面的值作为图片描述播报给用户。Web发展的交互能力很强,比如说一些局部的刷新、动态的变化,这些在现在HTML里面还没有实现,所以有了WAI-ARIA。ARIA在交互性比较强的前端是非常重要的。

 

四、前端框架中的信息无障碍举例


1、React Native。编代码可以在后端以Native呈现,一个文本有两块,一是原价,二199.00元,一条信息用两个text展示,这种情况很常见。用户访问的时候会访问到两点,一个是原价、一个是199.00元,这对用户的体验就不好,因为从语义来讲是一条消息但是拆分为两个点,浏览效率低,也不容易理解。但在它后面加上新内容(红色部分),它就会把这整个作为一个点,用户再看的时候就会变成“原价199.00”,这个容器就具有焦点,而这两个元素就没有点,对用户来讲就是很好的体验。这种框架的特点是,采用自己的属性,然后影射成为对应平台上无障碍相关的属性实践。如果没有提供Accessible,就没有办法实现。


 

现场演讲PPT截图:React Native举例


2、Razor这是微软的一个前端框架,它有一个语法:Html.ActionLink,是创建一个链接,Html.ActionLink最后一个参数是可以设置的,就是A标签的属性,我们可以设置class是什么,也可以设置role=“button”,用来告诉用户这是什么样的东西。很多人喜欢用A标签来模拟一个按钮,对于用户来讲,语义也要调整。按钮用链接来提示显然不合适,所以用role=“button”实现。可以在这里面使用原生属性,把这个属性放到最终生成的元素,也就是这个A标签里面,Actionlink。


 

现场演讲PPT截图:Razor举例


3、BootstrapBootstrap更多是通过css的方法来控制展示效果的框架,所以更加开放,html代码里面就可以使用aria的属性,使用更灵活。比如用屏幕阅读器在这里读取不到,它是装饰性元素,没有实际信息传递,像分隔符或图标这种没有交互、只是好看的装饰性元素,我们应该忽略。aria-label是一个标签,指出到这个元素的时候可以播报出来。它的播报只是针对辅助技术如屏幕阅读器这样的软件起作用,从屏幕上看加aria-label没有任何变化。


 

现场演讲PPT截图:Bootstrap举例

 

五、前端框架集成信息无障碍的挑战与应对


前端框架集成信息无障碍,和普通做框架大同小异,只不过使用的技术不同而已。


挑战1:框架无障碍设计缺失渲染引擎中无障碍属性映射缺失、插件组件接口未考虑无障碍、展示内容缺乏无障碍支持等。


挑战2:开发未按规范实现做一个框架,经常会遇到一些规范化的东西。比如做一个插件,可能接口的设计是要传入图片的地址和图片的尺寸信息,还有一些响应等。作为一张图片,需要有刚才讲的Alt属性,来指明这张图片到底表达什么信息。像很多广告是滚动的,用户只知道在上面不断有信息,广告内容是什么,对用户来讲是未知。所以设计框架的时候,就应该考虑在读图片的时候,提供一个接口来提供图片的文本。如果没有留这样的接口,想实现就很困难,就得修改源码或者通过Js改变元素的属性才能实现,会变得很乱。


挑战3:用户代理的兼容性问题无障碍也存在兼容性问题,相同信息Android/iOS、不同浏览器呈现的效果可能不一样。比如,社交评论:如果role=“button”,它可能写的评论3,里面就只有3,当用户聚焦到3这个数字时,它可以读出“评论3人”,单独写个3,旁边用图标表示,它就是评论数,这里补充一个信息“评论3人”。在iOS上面,如果没有role=“button”,就只会读“3”,因为它认为没必要有标签,而直接读取块里面的内容,但在Android上面又可以读取,这是它们的差异,在不同的环境显示上有差异,需要兼容一样的。 


现场演讲PPT截图:用户代理的兼容性问题举例


挑战的应对,其实也就是几个方面:一是遵循标准。遵循标准开发出来的东西才是便于使用的,才是项目完善的。二是测试相关的,要有对无障碍的专项测试,还有对代码进行无障碍走查。兼容性方面,要在不同环境里去测试,然后要收集这些特点,在框架里面做的时候要考虑这些问题,尽可能使用一些成熟的方案或者说传统的方案,比如 html 的东西,不同品牌对 ARA 支持的能力不同,能不用就不用,因为它在实现上、解析上还是有差异的。再就是使用成熟的实现方案,你已经了解了它的平台化差异的时候,你有经验了,就可以集成到你的框架里面,取一个成熟的方案,这就是它的挑战和应对。


现场演讲PPT截图:挑战应对的建议



演讲结束后,刘彪还接受了现场记者的专访。结合国内移动互联网交互方式不断更新、使用环境越来越复杂,对信息无障碍的挑战越来越大的情况,刘彪分享,如何让这些变化多端的交互方式能够被不同人群顺畅地使用,可以借助更多新兴技术来缩小信息获取的障碍。


让我们通过刘彪接受采访的部分实录,来了解更多吧:


1、随着智能终端越来越丰富,人们获取信息的方式也越来越多,您认为这对于信息获取无障碍而言,是好事还是坏事?

刘彪我觉得这是一件好事。因为之所以有新的信息获取方式产生,就意味着对现在信息获取方式中某种障碍的改善或消除。例如语音交互技术,包括语音的文字录入、语音识别,它解决的就是过去人们使用上的不便。当人们通过语音去操控设备的时候,视力障碍者和普通人操作的效率是几乎一致的,这对于障碍人士来说是在消除障碍,对于健全人士来说是效率的提升。当然,在新出现的交互模式里,很有可能产生新的障碍,也需要不断地去改善和解决。


2、您在以往的工作过程,您认为信息无障碍获取,目前最主要的难点是什么?您觉得它提供服务最主要的价值在什么地方?

刘彪信息无障碍的工作的确存在不少难点,最大的问题在于很多产品设计之初并没有考虑信息无障碍群体的数量,往往到了使用环节才收到用户大量反馈,被提醒信息获取困难;其次是国内移动互联网的交互方式不断地在变化、更新,使用环境越来越复杂,这对信息无障碍也提出了比较大的挑战——如何让这些变化多端的交互方式能够被不同的人群所顺畅地使用。价值则在于,无障碍优化是方法论与经验的结合,有效解决障碍用户的实际需求。


3、现阶段前端信息无障碍技术主要有哪些?

刘彪第一个是WCAG,它是一个方法论,分四部分内容:可感知、可操作、可理解、鲁棒性,通过它可以用来检查自己的产品在信息无障碍这部分做得怎么样。

另外一个技术,WAI-ARIA这个技术,它提供的是一个针对网页内容增强的无障碍的体验,HTML里面有很多无障碍属性,比如IMG元素的Alt属性,它实际上除了能够被搜索引擎识取图片是什么样的图片,对于使用屏幕阅读器的用户,可以把里面的值作为图片描述播报给用户。Web发展的交互能力很强,比如说一些局部的刷新、动态的变化,这些在现在HTML里面还没有实现,所以有了WAI-ARIA。ARIA在交互性比较强的前端是非常重要的。

而对于框架设计而言,信息无障碍只是这个框架其中的一个能力,它并不因为信息无障碍的能力而改变它框架本身的属性,不论它是一个比较底层的还是比较开放的,都不会受到影响。


4、未来对于信息无障碍,您有哪些规划?或者你自己有没有一些新的想法正在规划当中,或者也是现在测试当中?

刘彪我们最大的愿望就是让更多的产品能够考虑到信息无障碍。此外我们也在关注一些新技术例如物联网、人工智能。以物联网为例,在智能家居中,障碍群体的障碍并不仅仅是上网获取信息,而更多地扩展到智能设备的使用,例如空调能不能无障碍操作、洗衣机能不能无障碍地选择洗衣模式等,这些都需要去突破。


5、人工智能会是无障碍信息获取的一个重要方向吗?

刘彪我们可以预见未来人工智能一定会出现多感官的交互,比如通过眼神来读取大脑的思维,通过表情来判断人的内心情感等等。但是这个时候,针对不同的障碍人士,比如视障人士,又会产生新的障碍。

当然,我们也必须承认,不论是物联网还是人工智能,都在不断地缩小障碍,只是在缩小障碍的过程中,又会有新的障碍产生,新的障碍既然产生,就还是需要我们不断地去发现它、探索它,然后解决它。但从总的趋势来讲,它的障碍实际上是越来越小的。