无障碍专题交流

主持人：首先有请阿里饿了么的江雷给我们分享无障碍技术的实现。

江雷：大家好，我是来自于阿里巴巴的饿了么的开发，很高兴也很感谢组委会的邀请，在茶歇的时候也和组委会的同学聊了两句，很感谢组委会的邀请，他们说也感谢你们阿里巴巴对这一块有赞助。

前面的各位老师分享了很多标准、创意及把这些创意应用在实践中，学习了很多，都做的非常的好。

我这边简单的分享一下无障碍技术实现的方式。

我从这几个方面来说，一个是饿了么的无障碍的适配，二是无障碍工具的介绍，三是无障碍适配的路线图，四是技术方案的设计，五是常见的适配案例，还有我对未来的无障碍标准的期望。

第一部分是讲饿了么无障碍的适配，首先是我们做了什么？我们的初心是想帮助视障用户在饿了么无障碍的点餐包括点一些商品，提升用户的账户体验。

具体的在一些核心的下单链路做无障碍的适配，主要是外卖的链路，包括新零售的一些链路，然后做一些核心链路的适配。

在适配的过程中解决了200多个BUG，高优先级的占比超过了30%。在下单的过程中有一些红包的选择，对这一块也做适配，无障碍用户可以和普通人一样使用红包的优惠。

在页面中结构中一些不太合理的地方，针对视障模式下的使用做了一些优化。

这边是有一个客户的原声，很感谢我们对无障碍进行的适配，这一块对他们的生活包括外卖下单的过程，有一个很大的提升。

这边是讲的是几个方面，品牌的效应，我们是在工信部审核的要求，在2021年12月获得工信部首批无障碍APP认证，获得雷科技的2020年度十佳无障碍产品的报道，包括新华网都对无障碍的适配做了报道。

在今年的8月11日有一个饿了么的无障碍专场活动，这一天只要是无障碍的用户都是全部的免单。

在专利这一块免费开放给社会13件专利，已经授权的有14件专利。

这边是展示的效果，障碍用户下单的过程是怎样的，可以简单的看一下。

这是核心外卖链路的适配的效果。

第二部分讲一下无障碍工具的介绍。无障碍在主要做了移动端的无障碍，H5也做了，但是多数也是在移动端嵌入的方式。移动端主要是两款，一是安卓系统，还有iOS系统。

安卓系统是心智无障碍助手，解说，、点名等等。iOS端是旁白等等。

第三部分讲无障碍适配的路线图。怎么样做无障碍的适配？正常情况下饿了么的APP会有多个页面，我们做的方式是对单个页面做适配，这样的话串联起来APP有完整链路的适配。

单个页面首先会把这个页面划分为多个功能的区块，每一个区块都是焦点的功能区块，每一个区块会设置旁白的文案和辅助的行为，比如说是可点击的链接或者说可辅助的行为。

从完整的页面到区块适配的话，我们完成的无障碍链路的适配。

这边主要以无障碍适配的思路，以iOS为例。打开旁白的功能，测试页面的无障碍功能，看看这个模式打开之后的无障碍功能的情况，比如说是否正常的工作？分为两类，安卓系统和iOS系统，本身做了一定的无障碍的支持，如果说这个页面比较简单的话，多数是可以正常识别的，当然焦点可能不一定合适，但是属于基本可用的状态。

我们会看一下自定义的焦点是否满足需求？如果满足需求的话，焦点这一块选择基本上就没有问题了。看一下朗读的内容是否合适？比如说像按纽的文本、图片是正常的朗读出来，如果不太妥当的话再进行适配。

比如说图片不能被无障碍识别出来的话，我们加一个accessibilitylabel来进行完善。

第二块是焦距区域过细，每一个标签或者说价格的每一个文字都是焦点，我们要解决这种焦点过细的问题。

这样的话就可以按照前面说的方式按照功能区块的方式把这个焦点做一个统一。因为焦点太细的话不太利于障碍用户建立起来一个页面立体的空间感。

还有焦点不能识别，不能识别一般是常见于复杂的页面，比如说简单的列表可能系统可以自动的帮我们识别，如果说这个列表中有嵌套的情况下，就识别不了，把它识别成一个大的焦点，这个时候要手动的管理焦点的划分。

第四方面讲一下技术方案的设计。

技术方案主要是分为几个方面，一个是焦点的选择，障碍用户可能看不见或者说看不清，他依赖于触感，手在手机上滑动的触感，建立起页面空间的立体感。

焦点的话就不能太多，当然也不能太少，太少的话也不太能满足信息的表达，所以我们要对这个页面的焦点进行管理，以及对这个页面的模块做焦点区域的划分。

焦点选择完以后，我们要对旁白的焦点区域怎么样朗读，做一个梳理。比如说正常情况下把它设一段问题，它可以识别出来这样的文本，它是表达什么的。

有一些焦点可能对障碍用户不太需要的，比如说它可能是一些装饰性的元素，比如说一个小的角标，可能只是为了好看，意义不大，这个时候要适配一下，这些信息不是那么的重要，又会造成干扰，我们就会排除掉。

像图片这样一些不能识别的元素要通过旁白，文案的适配来支持无障碍的能力。

焦点有了，这个焦点要做什么？它的文案解释也有了，这个焦点行为的辅助要去做适配的，比如说这个焦点是一个可点击的按纽还是说它是一个可跳转的链接或者说是它是一个在当前页面可选中的组件？

这里是方便大家整体看一下我们一般要做什么事，基本上是基于前面介绍的焦点的管理，可能要对一些嵌套复杂的列表进行适配，自定义的view，动态的元素，一些组件的系统不能识别的元素，手动维护它的焦点。

下面是朗读文案怎么样做？普通的文本可能是直接的读出来，系统也能够自动的识别，但是有可能不是那么的合适，可能不太合适的地方要做专门的定制。

像图片，按纽，可选种的组件，大焦点的关系这种需要我们手动维护的。

还有焦点的行为，这个焦点点了它以后，它可以做什么样的事？要在焦点朗读的时候一起读出来，比如说这个按纽可能是点击，如果说加上行为辅助，点击进去下一页或者说点击弹窗。

另一方面，在稳定性方面，因为在饿了么的核心链路做了这样的无障碍的适配，我们怎么样保证这个功能，首先新的功能会被覆盖到，老的功能也不能回退？

一个是规范的制定，把无障碍的适配作为研发流程的一部分，一个规范，从需求、视觉、开发到测试这样的一个研发链路中贯穿整个研发链路中的无障碍的适配。

另外也和专业的机构合作，深圳无障碍研究会这边，帮我们做无障碍的测试及无障碍的报告及用户的维护，渠道的宣传等等。

这边早期也接入了淘宝平台，做自动的检测和上报，生成检测报告和异常的一些开始的分析。

这一块浙大的老师也分享了，他们和阿里巴巴合作，把这个平台做了升级，变成功能更加强大的平台，我们回头试着接一下。

第五部分讲一些常见的食谱案件。

第一个是焦点浮层，障碍用户不太适合这样的界面，在UIView中，提供了accessubilityViewlsModal属性，用于屏蔽一些不该屏蔽的元素。

还有复杂页面的结构，上面是一个列表，下面黄色的区域是一个嵌套的列表，推荐超市百货下面都是一个子页面，这样的话要手动维护焦点。

手动告诉系统无障碍的元素有哪些。

这里是复反馈，点了不喜欢，弹出了浮层没有焦点，解决方案是弹出浮层View响应焦点。

这里也是一个大焦点的问题，可能有一些筛选项，虽然说我们已经设置最外层的视图，但是还是会形成一个大的焦点。

虽然筛选栏设置成不响应的无障碍，但是还是会响应焦点focus。

这边是一个高德的地图，正常情况下上面是不需要响应焦点的，但是页面地图一直会响应焦点，我们设置了地图让它不响应焦点也没有效果。

这一块主要是使用了高德的地图组件，高德的地图组件有多个视图组成，这些视图会响应手势，需要屏蔽掉无障碍的响应，苹果的系统有一个属性可以屏蔽掉这些响应。

这里主要是新增地址页面，它下面会有一些标签，家、学校、公司这些标签，朗读状态的问题，正常情况下选择的学校，可能是希望它朗读出来，比如说学校已选择。

系统提供的这个只能处理静态的展示，如果它变化了是不能被很好的识别出来，这样的话我们在选中的时候去设置它，会有一个动态的变化。

前面讲了这么多，第六部分讲的是未来无障碍技术的标准。核心要处理的是三个问题，一个是焦点区域怎么样划分，简单的来说一个可响应操作的区域可能就是一个焦点。在实际的应用中可能会看这一块的响应是否合理。另外是这个焦点区域怎么样设置成旁白朗读的文案。另外就是说这个点功能是什么？比如说它能够做什么事，辅助的提示。

最后一部分讲的是未来无障碍的技术标准。这一块是我个人的期待。我们有非常多的包括网页、移动端的APP，大家绝大多数都没有做过无障碍的适配，这一块在适配下来，无障碍适配还是要花比较多的时间，特别是前期的适配，可能很多公司就忽略了这一块，我想如果说我们的无障碍的标准，比如说W3C包括现在的移动端的标准，如果说它能够天然就支持这种无障碍的模式，比如说它正常的页面开发中，这个无障碍的模式就已经能够被植入进去。

就是刚才有一位老师说他们要做一个无障碍的标准化组件，如果说我们在协议层支持这个，是否大家说完成正常的页面开发以后，包括移动端的开发以后，这个就天然具备了。在细节的地方稍微的微调一下，如果我们能够做到的话，比独立的适配要方面落地得多。

另外，标准的支持，像现在包括苹果系统和安卓系统，它们对一些简单的页面支持的还是可以的，你可以用。但是像复杂的结构就不能支持了。这一块在技术标准中能否有一些创新或者说标准也好，怎么样协助开发者来做这样的事。

复杂的页面结构，他只要遵循我们标准的开放模式，就可以支持。

我就讲这么多，谢谢大家！

提问：刚才这位老师讲的这些问题是我的工作中会涉及到的，我是用户体验家软件测试，我们在测试过程中出现了很多的问题，现在我在给那些问题分类的时候，我们会提一些单子，东西会提交到一些部门，他们会处理。

但是有一些细致的问题需要请教你一下，比如说进入到二次页面，打开二次页面的某一个板块，点击进去之后浏览那个板块的内容，这个时候它的焦点就没有停留在二次页面具体的板块中，而是停留在二次页面的首个焦点上，我们公司觉得是一个问题，它没有原路来原路回，我不知道这是否是一个行业的

标准？

江老师：正常的用户希望从哪边点进去回来还是哪边，你说的这个问题，从二级页面返回回来重新刷新了，导致这一块的焦点没有自动的识别到，但是这一块可以主动的设置这一块的元素，我进之前页面的元素是什么，我先记录一下，回来的时候再让这个元素响应焦点，是可以解决这个问题了。

这个问题很普遍，它关联到我们的链路是否很顺利的进去出来，所以说这一块确实是比较重要的，你们的工程师也可以和我一起线下沟通一下。

主持人：有人问了饿了么后面会不会接入一些框架，等到那个时候一起来回答。

返回会议总结主页