阿里云云栖社区

“云栖社区”是阿里云官方开发者技术社区,聚焦于传播云计算、大数据等DT时代核心技术的内容与资源。...

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

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yunqiinsight/article/details/96284271

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的无障碍优化,有任何建议,随时向我们提出,让我们一起进一步消除特殊人群使用障碍,带来创新的使用体验。

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

展开阅读全文

没有更多推荐了,返回首页