W3C

无障碍专题交流

2022年9月7日

题目:信息无障碍组件库标准化建设

讲者:蔡勇斌(东莞市一同信息科技有限公司) [演示文稿]

现场纪要

蔡勇斌:

蔡勇斌:谢谢组委会的邀请,有机会来到W3C这个大会和大家一起交流学习信息无障碍相关的知识。

在分享之前我想说说这一次参会的感受,从会议的注册包括通知,包括后续平台的测试,包括今天进入整个会议室的流程,是非常的无障碍,这是我这么多年参与这种线上会议体验最好的一次。

W3C搞这一次大会的包容性非常的强,而且这一次完全独立操作整个会议的软件包括PPT也毫无顾虑的把读屏声音放出来,这才是真实的残障者工作的模式。

今天我分享的是关于信息无障碍组件库标准化建设,这个组件库的概念已经不是什么新鲜的事,但是在信息无障碍我再一次提出来是因为这么多年跟很多大厂的合作,发现了一些问题。我们想说看看有什么流程、措施能够加大信息无障碍体验产品效果的落地,包括整个成本的降低等等。

一句话,就是想让残障者尽快用到所有的功能,这是我们的目标,所以现在也在尝试探索,也在实践。

信息无障碍这个组件库是什么概念呢?现在都知道很多大厂都在做这样的组件库,做这种跨平台的框架,也在做低代码。其实这种技术都离不开各种封装,过去从最底层的汇编到高级编程到现在的低代码,到组件库,都是在不断的封装上菜鸟级别的人低成本的使用到这样技术的成果。

我们也希望信息无障碍往网络这方面靠拢,轻松的使用这个技术,不需要每一个产品重复的给哪个产品独立的设计、开发,这样对视障者的体验是很不友好的,我们希望有一个统一的体验。

过去做无障碍,我们经常说要做品牌,要给自己的产品打造独立的设计,打造这种独立的体验,其实对于视障者来说,对残障者来说,尤其是视障者来说,这个体验我了解到的包括我自己的感觉是很不友好的。

我们都知道现在很多的酒店,它的无障碍洗手间的设计,它里面的方位、高度、各种设施基本上都是一致的,统一的。为什么?它要方便视力障碍的人士凭记忆和感觉来使用这些设备。

现在设计APP和产品也是一样的道理,你非得搞一个特殊化,那我对你产品的学习成本就非常的高,这样的话对产品来说是一个很大的门槛,不是我们希望看到的。我们希望标准化不单单是说体验或者说设计的标准化,而是整个APP的标准化。

首先简单的看一下这些数据,这里面列出的最近发布的一个报告,小程序的产品数量,包括APP,还有网站的数量,1300多万,这个数量非常的庞大。如果说这些产品都要去针对它做无障碍的从0到1的建设工作,很显然是一个很庞大的工程,我们也耗不起,因为我们等不及,我们不希望无障碍的未来让下一代享受,我们这一代就希望体验到。

这些标准简单的列了一下常用的,说实话我们作为行内人对这些标准都有完整的去阅读、理解吗?这里打一个问号,我觉得规范是规范的,但是做事的时候也有可能是按照自己的那一套模式来执行,因为东西多了,规范多了,有一些还有争议性的,像这样的问题标准也是有相冲的。

比如说WCAG要求字体的大小是多少,可能国标又是另外一套要求。所以尽可能的兼容这个事。后来我们也知道国办出了浓缩型的清单,把很多的标准集中起来,很多的设计师执行的时候只看这一套清单来看自己的产品是否达标。

这个标准去推动的时候会有很多的大厂愿意接受,现在这份东西凭我包括很多大公司都在用这个清单。

目前我们接触到的国内做无障碍这些流程,基本上和常规的产品研发流程是类似的。第一步是产品的设计,这一方面要考虑到一些视觉,低视力的老年人,色盲、色弱的,做无障碍方面会考虑这么多,实际上很少。

但是无障碍的流程必须要走的,还有一些交互的设计,很多现在的拼图的验证码很显然是没有考虑全面,它只考虑到明眼人用鼠标的用户,怎么样把这个验证码拼成一个一个完整的图形来进行交付的设计。这样的设计是不符合无障碍人士的交互,所以说这个过程需要产品人员充分的对不同用户人群的行为了解

接下来是研发,我自己也是搞开发的,过去在网上搜很多开发的时候,很多系统平台,包括一些框架,最通俗的一个表达就是,找到一个控件,说不支持语音,或者说那个东西被耽搁了。这种是对信息无障碍的无知才导致了国内信息无障碍的发展远远跟不上西方发达国家的水平。

还有一种问题,国内非常喜欢自定义,各种框架,各种自定义来做这种网页也好,APP也好,会失去很多一些本身的能力,所以在研发的过程中我们需要有这样的工程师来熟读这些规范,来对相应的辅助技术,开放这样的接受,所以说这一部分的工作也是需要注意的。

最后也是测试,现在国内的大厂外包给到具备这样能力的团队来做这样的事,实际上我们自己团队的工程师来做这样的测试是很有必要的,因为外包毕竟不是一个内部的团队,有很多比如说内部的版本或者说一些环境的限制,很难快速有效的发现问题。

团队内部的人员具备这样的无障碍测试的能力也是我们需要的。

我列了几个,这边有阿里、腾讯、蚂蚁的同事都可以看一下,这样的问题挺常见的。无障碍的BUG,一旦遇到一些复杂的就无限期的,永远都是延期解决,有一些问题发现了提出已经很多年了,五六年了,到现在还是延期的状态。

产品的版本永远都是在大版本的改造或者是在等待大版本改造的路上。

还有人力不足,现在无法过度的投入来做这个事。无障碍的内卷,我感觉也被提上日程了,因为很多大厂,不同的部门中他们做同样的事,这个东西我自己来实现,那个东西你来实现,资源没有做到很好的共享。甚至一些框架的东西都没有做无障碍的改造,在自己的产品上尽快的解决这些问题。这部分也是我们需要尽快解决的。

标注组件库建设是我们现在要做的事,我们把基本的组件做无障碍改造以后,会进一步的封装,后面会逐步的讲到从基本的封装成一个复合型的组件库,让开发者拿来用。

现在的场景很多,小程序就有很多的推荐使用的开发框架,包括跨平台的框架,这些都是经过改造后第三方的开发者实现的时候,无障碍的属性就自动被继承了。

说到最原始的无障碍的能力,微软、IOS、Google平台提供原生的组件他们是支持无障碍的,但是经过国人各种自定义优化,各种性能的优化之后,这些功能就丧失了。我们现在做的事是做过去微软操作系统公司做的事,把它重新的捡起来,让它的组件不管是自定义也好,或者是独立做这样的引擎框架也好,我们把无障碍的能力融入进去。

设计规范VS标准组件库,这个标题是一个疑问的,大家思考一下规范和组件库之间的关系。我当时在一个会议上看到,有一个朋友分享说规范和标准组件库之间的关系,无非就是用一个程序的概念去理解的话,一个是类,一个是实例化之后的实例。

规范有千千万,规范有非常多,你让每一个人都去阅读不现实。如果我把这些规范浓缩以后成为一个基本的组件库,把组件库再次封装成为复合型的组件库,后续开发效率是否会提高非常多。

基本组件库,有一个概念,现在的网页基本上被玩的五花八门,过去一个按纽就是一个标签,现在做的按纽已经不是那样的实现思路了,它会用一个鼠标的标签来响应键盘的事件,但是在键盘接口还没有实现。

我认为这种标准组件不好好用,为了外观、性能去换一种模式来实现。我们现在把这种自定义的东西重新再一次封装成标准的组件库,是我们期望的,这里面列到一些发展,可以完自定义,但是要把无障碍的组件加上。

验证码是去年协助网易做的验证的流程,这种组件库的建设好处是什么呢?现在说实话能够做这样的验证基本上都是一些大厂,这样的组件库做出来开放出去之后,对很多开发者的开发厂商来使用这样的组件库,使用这样的SDK的话,无障碍就会被零成本的继承过去了,这从根源上解决了问题。

在这里我也希望特别是W3C的组织,包括阿里和腾讯能够多区考虑这样的通用型的组件库的无障碍的实现,能够辐射到更多的产品,从而使去服务更多的残障用户。

这个视频是前几年和微信做的一个方案,这里听到各种图片,上面也写了看五条朋友圈,手指需要滑动45次。(VCR播放)

这种设计我们称之为复合型的组件库,现在这种朋友圈的消息流、信息流的设计,很多的产品都类似的,像今日头条的APP,微博,无非都是这样的内容发布人的昵称+头像+日期+文本,再加上图片,这样的格式都差不多,大同小异。

这样的设计就可以继承下来,把头像、昵称、日期等等这些合并成一个大的焦点,然后再把这些图片全部合并起来,再把那些点赞、评论那些合并起来,利用其他的交互模式来呼出。

这样的话操作起来非常的快速有效,现在说实话,微博和头条里面的焦点也是非常的冗余,我每天看头条的时候手都要不停的操作,不利于快速便捷的操作。

有很多用户评价说这样的模式非常的方便视障人群使用

它就是利用苹果手机的特性,双指双击来调出相关的操作。

现在我们和腾讯云合作做组件库的建设,现在很多的建站开发都已经直接可视化了,这里拖一个控件,那里拖一个表单,这里拖一套什么组件,都已经实现了可视化的建站。

我们去优化的是什么呢?一整套的复合型的组件,我们称之为复合型的组件。一个是日期选择的,其实在每一个控件里面会涉及到链接,A标签,有涉及到输入框,甚至还有一些切换式的下拉框等等挺多的。

如果我们把这个组件给标准化的话,那其他的建站,我在腾讯云建站,至少可以确保在腾讯云建站的网站它的无障碍能力是可以被继承的,所以我们现在也在和腾讯云合作,把组件库的无障碍组建起来。

我们自己建这样的组件库,会被真正使用的人非常的少,因为我们的影响力太小了。我们现在更多的是希望联合一些大厂推动这样的比如说腾讯的TDesign Starter,它在小程序中的使用频率非常高的,基本上使用小程序组件库的频率非常的高。

我们可以这样去认为,如果把这个无障碍的能力给实现了,大部分的小程序也就自动的继承了无障碍的特性。我今天分享的就是一个大概的老东西,但是重新改装了一下,再来和大家分享,欢迎大家一起交流,也欢迎大家一起来探讨,看看怎么样把这个事做好,我的目标就是希望视障者尽快的用到信息无障碍所有的产品,谢谢大家!

主持人:谢谢蔡老师,大家有什么要提问的吗?

提问:刚才反复提到组件库现在可以开源使用到还是需要和你们企业合作才能得到使用呢?

蔡老师:朋友圈目前还没有做成一个组件库,这只是一个效果,我们当时做了一个方案给到微信实现,我们自己做的话,无法给到大厂使用的,现在目前只是一个设计方案,还没有形成一个库。

返回会议总结主页


若您对上述内容有任何疑问或需进一步协助,请联系:讲者冉若曦 <ran@w3.org> 或会议主办方 W3C 北航总部 <team-beihang-events@w3.org>。