【51CTO.com原创稿件】 2017年12月01-02日，由51CTO主办的WOTD 2017全球软件开发技术峰会在深圳中洲万豪酒店召开。秉承专注技术、服务技术人员的理念，自2012年以来，WOT品牌大会成功举办了十四届，积累了大量的技术专家资源，获得了广大IT从业者和技术爱好者的一致认可，成为了业界重要的技术分享交流平台以及人脉拓展平台。
本次会议分为10个技术主题，分别是：编程语言与框架，大数据系统架构设计、微服务与容器技术、前端开发实战、物联网（IOT）技术、软件性能优化、深度学习与智能应用开发、创新运维探索、技术架构遇到业务架构、CTO训练营。51CTO作为本次大会的主办方，将全程图文直播报道与后期视频展示这场盛宴。
12月01日上午WOTD2017主会场，深圳市信息无障碍研究会／ 信息无障碍产品联盟技术专家刘彪进行了主题为《前端信息无障碍技术与框架》的精彩演讲。以下是演讲实录，让我们先睹为快！
我叫刘彪，是来自于深圳市信息无障碍研究会，我是2014年来到这个研究会的，这几年一直专注于信息无障碍领域。信息无障碍大家可能听上去有点陌生，但是听完之后大家就熟悉了。
今天带来的分享主题是“前端信息无障碍技术与框架”，主要有两方面，一是要做到前端信息无障碍所需要使用的技术，这方面的技术分享。还有是相关框架，现在有很多框架，很多框架考虑到信息无障碍，会分享这些框架优秀的实践方案。***再和大家分享一下，如果我们要构建这样的协同框架需要注意的问题。
分享总共四部分：
一、是信息无障碍的概念与意义；
二、是前端信息无障碍所需要使用到的技术；
三、是优秀框架里信息无障碍的实现；
四、是如果我们要在自己的框架集成信息无障碍，遇到的挑战和应对。
信息无障碍的概念
任何人在任何场景下都能便捷、顺畅、无障碍的获取信息。首先大家想到的就是障碍人士，比如视觉残障、听力残障，在信息获取上肯定有障碍。实际上这里提到的是任何人，你怎么理解呢？比如大家开车的时候，要看地图，这时候你看地图肯定不方便，所以这时候有语音导航，这个场景下大家实际上就相当于是视觉障碍，没有办法用眼睛看，只能听。还有一种场景，比如你现在在嘈杂的环境中，或者你正在开会，这时候有人给你发了一条微信的语音消息，你怎么听？实际上微信里面有一个语音转文字，可以转为文字消息。这种场景下，实际上你就相当于是听障者，没有办法听取消息。信息无障碍不仅解决残障用户的信息获取问题，同时让普通人、健全人也能够更好的使用互联网获取信息。因为每个人在特定的场景下就是某种身体功能受限。
据统计，各类障碍人群是过千万，去掉重复人口合计也是过亿。实际上障碍人群使用互联网的意义特别大，是障碍人群融入主流社会很重要的渠道。现在通过互联网，他们有做翻译的，有做律师的，还有做程序员的，各行各业......正是因为互联网，他们与健全人缩小的差距就是信息获取的障碍和克服身体功能的障碍。拿打车举例，在过去，如果视力障碍，想打车，就只能在路旁边打车，但是你不知道过去哪辆是出租车，有的人很厉害听得出来哪辆是出租车，说是听汽车的引擎来判断的，很厉害，我是听不出来。另外的问题，你即使听出来，也不知道上面有没有人。过去你打车是你找车，现在通过滴滴软件，把这个过程反转过来，变成车找人，只要你能描述出你的位置，然后司机就可以找到你。这种情况的改善使得障碍人士出行就有比较大的变化。
对于一家公司，信息无障碍能不能在商业领域产生效益呢？这里我们列了几条针对商业方面的：
1、为现有用户着想，你有了大量用户，很多产品在***次听说信息无障碍，给他们介绍，他说我的产品有这么多障碍用户使用！这是改善用户的体验。
2、增加产品的可用性、易用性，因为这个产品越便捷，使用的效率就越高，对用户的提升、改善帮助越大。
3、新的蓝海市场数量，它是很可观的，而且这些用户会成为产品的重度用户。比如出行这件事，你必须得依靠软件解决，你出行就得用软件，这就是重度用户。比如支付，一定会用支付宝、微信这样的软件，如果你使用纸币支付的时候，你首先要知道这个货币的面值就是比较麻烦的事情。所以这些用户将成为你产品的高质量的黏性用户，高黏性的。
4、它是互联网必然的发展趋势，BAT都已经开始做这件事了，已经做了很多年了。这是国际化的必须，像很多产品，如果说要在海外去服务，这比较重要，像美国有508法案，如果你的产品不能被障碍人士顺利使用，一旦障碍人士对你进行起诉，你将面临高额的赔偿。这是对于商业公司的意义。
信息无障碍的应用技术
信息无障碍所用到的技术，这里面我列的是比较重要的，***个是WCAG，实际上是一个方法论，这个产品要满足哪些点，对比度要达到什么样的要求，错误提示应该给出一种什么样的提示，这里面分四块：可感知、可操作、可理解、鲁棒性，像一个方法论，可以用来检查自己的产品在信息无障碍这块做得怎么样。
另外一个技术，WAI-ARIA这个技术，它提供的是一个针对网页内容增强的无障碍的体验，HTML里面有很多无障碍属性，最常见的是增加ALT属性，它实际上除了能够被搜索引擎识取图片是什么样的图片，对于使用屏幕阅读器的用户，可以把里面的值作为图片描述播报给用户。Web发展交互能力很强，比如说一些局部的刷新、动态的变化，这些在现在HTML里面还没有实践，所以有了WAI-ARIA。ARIA在交互性比较强的前端是非常重要的。
优秀信息无障碍框架案例
再就是优秀前端框架里面的举例，***个是编代码，可以在后端以native呈现，一个文本有两块，一个是原价，一个是人民币，199.00，一条信息用两个text展示，这种情况很常见。用户访问的时候会访问到两点，一个是原价、一个是人民币199.00，这对用户的体验就不好，因为从语义来讲是一条消息但是拆分两个点，浏览起来效率也比较低，不容易理解。所以在它的后面加了新的东西，它会把这个作为一个点，用户再看的时候就会变成原价199.00。这样子这个容器就具有焦点，这两个元素就没有点，对用户来讲是很好的体验。这种框架的特点，它采用自己的属性，然后影射成为对应平台上无障碍相关的属性实践。如果没有提供accessible，就没有办法影，它采用这样的形式实现无障碍。
这是Razor，是微软的一个前端框架。Razor有一个语法，html.actionlink，是创建一个链接，它***一个参数是可以设置的，就是A标签的属性，你可以设置class是什么，也可以设置role=button，***就会出现role=button，这是用来告诉用户这是什么样的东西，很多人喜欢用A标签来模拟一个按钮，对于用户来讲，语义也要调整。按钮，用链接提示显然不合适，所以它用role=button实现。提供原生属性的使用，你可以在这里面使用原生属性，把这个属性会放到最终生成的元素里面，也就是这里面的A标签里面，actionlink。
Bootstrap，更多是通过css的方法来控制展示效果的框架，所以它更加开放，你在hatm代码里面就可以使用aria的属性，你可以更加灵活的使用。比如用屏幕阅读器在这里读取不到，它是装饰性元素，我们应该忽略，没有实际信息传递，只是装饰，分隔符或者图标这种没有交付，只是好看的装饰性元素。aria-labe是一个标签，指出到这个元素的时候可以播报出来。它的播报只是针对屏幕阅读器，从屏幕上看加aria-label没有任何变化，只是针对辅助技术和屏幕阅读器这样的软件而起作用。
信息无障碍集成信息无障碍的挑战与应对
第四部分，信息无障碍集成信息无障碍的挑战与应对，这和普通做框架大同小异，只不过它使用的技术不同而已。像这里面设计的缺失。像组件的设计缺失，有点像刚才说的Razor的情况，如果框架里面没有提供对原生html属性的支持，没有提供直接使用的模式，用户也不会使用的，这是作为框架使用者来讲也是不能使用的。再就是编码规范的问题，你做一个框架，经常会遇到一些规范化的东西，比如说你做一个插件，可能接口的设计是要传入图片的地址和图片的尺寸信息，还有一些响应等。作为一张图片，每个图片都要有刚才讲的ALP属性，指明这张图片到底是什么信息，这样就可以知道。像很多广告滚动的，用户聚焦在上面不断有信息，广告内容是什么，它肯定不知道发生什么事情，对用户来讲这是未知的事情。所以设计框架的时候，就应该考虑在读图片的时候，提供一个接口提供图片的文本。如果没有留这样的接口，如果开发者想实现就很困难，就得修改你的源码或者通过JS改变你的元素的属性才能实现，会变得很乱。
兼容性的问题，无障碍里面也存在兼容性的问题，在不同浏览器上显示效果不一样，其实你的信息在不同的平台，Android和iOS，不同浏览器呈现的结果不一样。例子，评论友人这种，一个是有role=button，它可能写的评论3，里面就只有3。当用户聚焦到3这个数字的时候，它可以读出评论3人，单独写个3，旁边用图标表示，它就是评论数，这里补充一个信息评论3人。在iOS上面，你没有role=button，他不会读，只会读3，他认为没有必要有标签，它直接读取块里面的内容。但是Android上面，他又可以读取，这是他们的差异，在不同的环境显示上有差异需要兼容一样的。
挑战的应对，其实也就是几个方面，一是遵循标准，遵循标准开发出来的东西才是便于使用的，才是项目完善的。再就是测试相关的，你要有专项测试，对无障碍的专项测试，还有对代码进行无障碍走查。兼容性方面，要在不同环境里去测试，然后要收集这些特点，在框架里面做的时候要考虑这些问题，尽可能使用一些成熟的方案或者传统的方案，比如html的东西，不同品牌对ARA支持的能力不同，能不用就不用，因为它的实现上、解析上还是有差异的。再就是使用成熟，你已经了解了它的平台化差异的时候，你有经验了，就可以集成到你的框架里面，取一个成熟的方案，这就是它的挑战和应对。
以上为全部内容，谢谢大家！
————————
以上是51CTO.com记者从一线为您带来的精彩报道。后续我们还有更加精彩的独家报道，敬请关注。
【51CTO原创稿件，合作站点转载请注明原文作者和出处为51CTO.com】
