闲鱼无障碍是怎么在端侧实现的

Hi，小伙伴们还记得以前刷屏的“闲鱼为1700万人，打造了一条盲道”的文章吗？

在今年4月，闲鱼和深圳市信息无障碍研究会取得了联系。在沟经过程中，咱们了解到在移动互联网时代，视障人士一样能够经过手机，享受到互联网带来的便利。闲鱼做为目前国内最大的闲置交易平台，为了更好地服务用户，在无障碍研究会的视障工程师团队的支持下，在现有基础上，前后进行了Android、iOS版本的无障碍支持。

闲鱼在Flutter&Native混合工程下，如何进行的无障碍优化？在平常版本迭代频繁状况下，是怎么有效地保持稳定支持无障碍功能？本文为您一一揭秘。

什么是无障碍？

什么是无障碍？一我的残疾或者能力缺失，生活中有种种障碍，好比，残疾人不能上楼梯，视障人士不能玩手机。残障人士，一样享有人权，拥有独立生活的诉求。合理地使用工具减小障碍，好比为残疾人设置电梯，为视障人士提供语音功能，都是减小或消除障碍的手段，也就是咱们今天所说的无障碍(Accessibility)。

今天咱们在处理端上的无障碍，通常是为视障群体服务。视障用户如何获取手机上的信息？不一样手机系统提供了相应的读屏辅助软件，Android是Talkback，iOS称为VoiceOver(旁白)，视障用户经过简单的操做进行交互，触摸、点击、双击、左右滑动屏幕，系统就会经过旁白语音的形式，将界面信息反馈给视障用户。

视障用户怎么使用无障碍功能呢？咱们以Android手机为例，简单进行操做，经过“设置” > "更多设置" > “无障碍” > “Talkback”开启Talkback，iOS操做也十分类似，经过“设置” > “通用” > “辅助功能” > “旁白”开启旁白。

无障碍常态化机制：

不少开发可能会这么思考，咱们是否须要针对视障群体，单独开发出一个符合这个群体使用习惯的App版本？但实际上，残障人士不是有意或无心地孤立的群体，不须要将将残障人士从大众中隔离，减小视障人士在端侧正常版本的使用障碍，让视障人士与普通人在相同环境下，可以平滑地沟通交流，他们一样有能力为社会创造价值。

所以，客户端无障碍的优化，在普通版本上进行无障碍优化便可，原有的交互方式、信息内容不须要变更，尽可能不要提供特殊版本。

同时，端侧业务需求不断迭代，必须将无障碍优化归入到正常的版本迭代流程中，创建无障碍优化的常态化机制，约定产品平常开发流程，才能持续保障主干链路的无障碍稳定支持。

• 产品需求阶段：考虑特殊群体使用习惯，进行设计；
• 技术开发阶段：根据优化规范进行开发，确保非装饰性可交互元素均可被聚焦，包含正确描述；
• 产品测试阶段：验证开发优化效果，同时提供给无障碍专业测试团队进行测试；
• 产品上线阶段：监控线上障碍用户使用状况，持续收集用户反馈；

客户端无障碍开发规范

端侧进行无障碍设计时，必须有一套规范，提供技术在开发过程当中进行参考，经过平常的开发积累，闲鱼造成了一套无障碍开发规范。

1. 装饰性元素不须要独立焦点；
2. 非装饰性可交互元素均可被聚焦，滑动屏幕切换焦点时可正常得到焦点，聚焦后播放元素角色、描述、状态，以便得到正确信息；
3. 图片、音频、视频应提供内容信息说明，以便用户理解；
4. 最小聚焦区域至少为48x48dp，避免焦点太小难以选中；
5. 复选框、标签须要提供正确的状态，选中或未选中等；
6. 焦点排序具备逻辑，避免焦点跳跃；
7. 焦点范围合理，避免过细焦点；
8. 优化难度高的问题避免直接阉割功能；

以闲鱼首页为例，装饰性元素“闲鱼”不须要独立焦点；可交互元素“二手手机”都可以被聚焦；左右滑动屏幕顺序正确，能够正常得到焦点；聚焦后元素信息描述正确；聚焦范围合理；标签“新鲜”、“关注”具备正确选中状态，焦点排序正确。

端侧无障碍优化方法

在不一样平台下，系统均提供了很是简单的无障碍优化方法，辅助开发者添加焦点描述、调整焦点顺序、屏蔽没必要要的焦点，咱们在优化过程当中，根据开发规范，结合端侧原有框架，使用不一样无障碍接口，大部分问题能够较轻松地解决，如下简单介绍不一样平台经常使用的无障碍优化方法。

Android优化方法

• 添加焦点描述

  android:contentDescription="desc"
      view.setContentDescription(desc)

• 屏蔽焦点，避免对应视图被聚焦

  android:importantForAccessibility="no"
      view.setImportantForAccessibility(IMPORTANT_FOR_ACCESSIBILITY_NO)

• 调整焦点顺序，使得对应视图在设置id的视图以后或以前被遍历到。

  android:accessibilityTraversalAfter="id"
      android:accessibilityTraversalBefore="id"
  
      view.setAccessibilityTraversalAfter(int)
      view.setAccessibilityTraversalBefore(int)

iOS优化方法

• 添加焦点描述

  @property(nonatomic, copy) NSString *accessibilityLabel;

• 屏蔽、合并焦点

  @property(nonatomic) BOOL isAccessibilityElement;

• 添加控件角色

  @property(nonatomic) UIAccessibilityTraits accessibilityTraits;

Flutter优化方法

• 添加焦点描述

  Semantics(
          value: "desc",
          child: Row(),
      );

• 去除焦点

  ExcludeSemantics(
          child: Row(),
      ),

• 合并焦点

  MergeSemantics(
          child: Row()
      );

Weex优化方法

• 添加焦点描述

  <div aria-label='desc'> </div>

• 添加焦点角色

  <div role='button' aria-label='desc'> </div>

• 屏蔽焦点

  <div aria-hidden='true'> </div>

最后

在闲鱼无障碍专项整治中，咱们和深圳市信息无障碍研究会的专业视障工程师团队合做，进行主干功能的测试，先后修复了129个无障碍问题，18位工程师，迭代了4个版本，问题修复率87.5%，为视障人士打通了闲鱼的主干链路，视障用户能够在闲鱼上，正常进行闲置的买卖交易。

目前，闲鱼的视障用户单端已经超过4万。而无障碍优化毫不仅仅是一次专项治理便可一劳永逸。咱们将来在平常开发流程中更加注重无障碍优化，持续关注并推进业内无障碍标准落地。同时，闲鱼将于7月28日参加在上海举行的第十四届中国信息无障碍论坛，与腾讯、字节跳动等业内同行交流无障碍体验，唤起业内及社会大众对与视障人群的关注，为推进中国信息无障碍贡献力量。

今年，阿里巴巴技术公益委员向全部工程师发起倡议，提倡“用技术助力公益，让科技更有温度”，在这里也但愿业内人士，一块儿推进互联网App的无障碍优化，有任何建议，随时向咱们提出，让咱们一块儿进一步消除特殊人群使用障碍，带来创新的使用体验。

原文连接 本文为云栖社区原创内容，未经容许不得转载。