CTO练习营 | 12月3-5日，深圳，是时刻成为优良的技巧治理者了

本次会议分为10个技巧主题，分别是：编程说话与框架，大年夜数据体系架构设计、微办事与容器技巧、前端开辟拭魅战、物联网（IOT）技巧、软件机能优化、深度进修与智能应用开辟、立异运维摸索、技巧架构碰到营业架构、CTO练习营。51CTO作为本次大年夜会的主办方，将全程图文直播报道与后期视泼魅展示这场盛宴。

12月01日上午WOTD2017主会场，深圳市信息无障碍研究会合 信息无障碍产品联盟技巧专家刘彪进行了主题为《前端信息无障碍技巧与框架》的出色演讲。以下是演讲实录，让我们先睹为快！

我叫刘彪，是来自于深圳市信息无障碍研究会，我是2014年来到这个研究会的，这几年一向专注于信息无障碍范畴。信息无障碍大年夜家可能听上却竽暌剐点陌生，然则听完之后大年夜家就熟悉了。

今天带来的分享主题是“前端信息无障碍技巧与框架”，重要有两方面，一是要做到前端信息无障碍所须要应用的技巧，这方面的技巧分享。还有是相干框架，如今有很多框架，很多框架推敲到信息无障碍，会分享这些框架优良的实践筹划。最后再和大年夜家分享一下，如不雅我们要构建如许的协同框架须要留意的问题。

分享总共四部分：

一、是信息无障碍的概念与意义；

二、是前端信息无障碍所须要应用到的技巧；

三、是优良框架里信息无障碍的实现；

四、是如不雅我们要在本身的框架集成信息无障碍，碰到的挑衅和应对。

信息无障碍的概念

任何人在任何场景下都能便捷、顺畅、无障碍的获守信息。起首大年夜家想到的就是障碍人士，比如视觉残障、听力残障，在信息获取上肯定有障碍。实际上这里提到的是任何人，你怎么懂得呢？比如大年夜家开车的时刻，要看地图，这时刻你看地图肯定不便利，所以这时刻有语音导航，这个场景下大年夜家实际上就相当于是视觉障碍，没有办法悠揭捉?睛看，只能听。还有一种场景，比如你如今在嘈杂的情况中，或者你正在开会，这时刻有人给你发了一条微信的语音消息，你怎么听？实际上微信琅绫擎有一个语音转文字，可以转为文字消息。这种场景下，实际上你就相当于是听障者，没有办法听撤消息。信息无障碍不仅解决残障用户的信息获取问题，同时让通俗人、健全人也可以或许更好的应用互联网获守信息。因为每小我在特定的场景下就是某种身材功能受限。

据统计，各类障碍人群是过切切，去掉落反复人口合计也是过亿。实际上障碍人群应用互联网的意义特别大年夜，是障碍人群融入主流社会很重要的渠道。如今经由过程互联网，他们有做翻译的，有做律师的，还有做法度榜样员的，各行各业......恰是因为互联网，他们与健全人缩小的差距就是信息获取的┞废碍和克服身材功能的┞废碍。拿打车举例，在以前，如不雅目力障碍，想打车，就只能在路旁边打车，然则你不知道以前哪辆是出租车，有的人很厉害听得出来哪辆是出租车，说是听汽车的引擎来断定的，很厉害，我是听不出来。别的的问题，你即使听出来，也不知道膳绫擎有没有人。以前你打车是你找车，如今经由过程滴滴软件，把这个过程反转过来，变成趁魅找人，只要你能描述出你的地位，然后司机就可以找到你。这种情况的改良使得障碍人士出行就有比较大年夜的变更。

3、新的蓝海市场数量，它是很可不雅的，并且这些用户会成为产品的重度用户。比如出行这件事，你必须得依附软件解决，你出行就得用软件，这就是重度用户。比如付出，必定会用付出宝、微信如许的软件，如不雅你应用纸币付出的时刻，你起重要知道这个泉币的面值就是比较麻烦的工作。所以这些用户将成为你产品的高质量的黏性用户，高黏性的。

对于一家公司，信息无障碍能不克不及在贸易范畴产生效益呢？这里我们列了几条针对贸易方面的：

1、为现有效户着想，你有了大年夜量用户，很多产品在第一次据说信息无障碍，给他们介绍，他说我的产品有这么多障碍用户应用！这是改良用户的体验。

2、增长产品的可用性、易用性，因为这个产品越便捷，应用的效力就越高，对用户的晋升、改良赞助越大年夜。

4、它是互联网必定的成长趋势，BAT都已经开端做这件事了，已经做了很多年了。这是国际化的必须，像很多产品，如不雅说要在海外去办事，这比较重要，像美国有508法案，如不雅你的产品不克不及被障碍人士顺利应用，一旦障碍人士对你进行告状，你将面对高额的补偿。这是对于贸易公司的意义。

信息无障碍所用到的技巧，这琅绫擎我列的是比较重要的，第一个是WCAG，实际上是一个办法论，这个产品要知足哪些点，比较度要达到什么样的请求，缺点提示应当给出一种什么样的提示，这琅绫擎分四块：可感知、可懂得、可操作（音）等，像一个办法论，可以用来检查本身的产品在信息无障碍这块做得怎么样。

别的一个技巧，WAARA（音）这个技巧，它供给的是一个针对网页内容加强的无障碍的体验，AHTML琅绫擎有很多无障碍属性，最常见的是增长ALT属性，它实际上除了可以或许被搜刮引擎识取图片是什么样的图片，对于应用屏幕浏览器的用户，可以把琅绫擎的值作为图片描述播报给用户。外部成长交互才能很强，比如说一些局部的刷新、动态的变更，这些在如今AHTML琅绫擎还没有实践，所以有了WAIARA。ARA在交互性比较强的前端是异常重要的。

优良信息无障碍框架案例

再就是优良前端框架琅绫擎的举例，第一个是编代码，可以在后端以native出现，一个文本有两块，一个是原价，一个是人平易近币，199.00，一条信息用两个text展示，这种情况很常见。用户拜访的时刻会拜访到两点，一个是原价、一个是人平易近币199.00，这对用户的体验就不好，因为大年夜语义来讲是一条消息然则拆分两个点，浏览起来效力也比较低，不轻易懂得。所以在它的后面加了新的器械，它会把这个作为一个点，用户再看的时刻就会变成原价199.00。如许子这个容器就具有核心，这两个元素就没有点，对用户来讲是很好的体验。这种框架的特点，它采取本身的属性，然后暗射成为对应平台上无障碍相干的属性实践。如不雅没有供给accessible，就没有办法影，它采取如许的情势实现无障碍。

　　推荐阅读

　　值得在 2018 年尝试的 11 个 React 组件库

CTO练习营 | 12月3-5日，深圳，是时刻成为优良的技巧治理者了6、React Components by Khan Academy React 的普及似乎在赓续增长，在 Stack overflow 2017 年最受迎接的组件库中，React 处于>>>详细阅读

本文标题：【WOTD】信息无障碍产品联盟技术专家刘彪：前端信息无障碍技术与框架

地址：http://www.17bianji.com/lsqh/39373.html

 1/2    1