你在使用哪种编程语言?快来投票,亲手选出你心目中的编程语言之王 了解详情
写点什么

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

2019 年 7 月 23 日

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

前几天,“闲鱼为 1700 万人,打造了一条盲道”的文章刷屏了~


视障人群在生活中更加需要高性价比的闲置商品交易,作为目前国内最大的闲置交易平台,今年 4 月,闲鱼在深圳无障碍研究会视障工程师团队的支持下,先后实现了 Android、iOS 版本的无障碍支持。


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


功能演示

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


视障用户怎么使用无障碍功能呢?我们以 Android 手机为例,简单进行操作,通过“设置” > “更多设置” > “无障碍” > “Talkback”开启 Talkback,iOS 操作也十分相似,通过“设置” > “通用” > “辅助功能” > “旁白”开启旁白,无障碍的基本操作如下


00:00 / 00:00
    1.0x
    • 2.0x
    • 1.5x
    • 1.25x
    • 1.0x
    • 0.5x
    网页全屏
    全屏
    00:00


    无障碍常态化机制

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


    因此,客户端无障碍的优化,在普通版本上进行无障碍优化即可,原有的交互方式、信息内容不需要变动,尽量不要提供特殊版本。


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



    • 产品需求阶段:考虑特殊群体使用习惯,进行设计;

    • 技术开发阶段:根据优化规范进行开发,确保非装饰性可交互元素都可被聚焦,包含正确描述;

    • 产品测试阶段:验证开发优化效果,同时提供给无障碍专业测试团队进行测试;

    • 产品上线阶段:监控线上障碍用户使用情况,持续收集用户反馈;


    端侧无障碍开发规范

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


    • 装饰性元素不需要独立焦点;

    • 非装饰性可交互元素都可被聚焦,滑动屏幕切换焦点时可正常获得焦点,聚焦后播放元素角色、描述、状态,以便获得正确信息;

    • 图片、音频、视频应提供内容信息说明,以便用户理解;

    • 最小聚焦区域至少为 48x48dp,避免焦点过小难以选中;

    • 复选框、标签需要提供正确的状态,选中或未选中等;

    • 焦点排序具有逻辑,避免焦点跳跃;

    • 焦点范围合理,避免过细焦点;

    • 优化难度高的问题避免直接阉割功能;



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


    端侧优化方案

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


    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 万。而无障碍优化绝不仅仅是一次专项治理即可一劳永逸。在这里也希望业内人士,一起推动互联网 App 的无障碍优化,有任何建议,随时向我们提出,让我们一起进一步消除特殊人群使用障碍,带来创新的使用体验。


    本文转载自公众号闲鱼技术(ID:XYtech_Alibaba)


    原文链接


    https://mp.weixin.qq.com/s/-6KYoiweFXATRBQ0SuxX6A


    2019 年 7 月 23 日 08:006796

    评论

    发布
    暂无评论
    发现更多内容

    屏读时代,我们患上了注意力缺失候群症

    脑极体

    【得物技术】数据分析 - 生活品类社区内容精选池模型

    得物技术

    数据分析 得物技术部 得物技术 社区内容 精选池模型

    阿里P8大牛精心整理,GitHub上超火的《Java工程师成神之路》从基础,到高级、底层、架构、进阶、扩展,囊括了Java体系内的所有知识点。

    Java架构之路

    Java 程序员 架构 面试 编程语言

    一道比较运算符相关的面试题把我虐的体无完肤

    Gopher指北

    合约跟单模式开发,合约跟单系统平台

    135深圳3055源中瑞8032

    这份阿里P8整理的新版手抄本,简直把所有Java知识操作都写出来了

    Crud的程序员

    Java 编程 程序员 程序人生 java面试

    这可能是关于编程指南的最实用指南了

    华为云开发者社区

    开发者 软件开发 语言

    应用层软件开发教父教你如何重构,资深程序员必备专业技能

    小Q

    Java 学习 架构 面试 重构

    【涂鸦物联网足迹】涂鸦云平台全景介绍

    IoT云工坊

    人工智能 云计算 大数据 物联网平台 物联网

    USDT承兑支付系统开发技术,搭建商户USDT支付系统

    135深圳3055源中瑞8032

    TCP梳理总结

    江龙

    GitHub上超牛的Java进阶教程,汇总Java生态圈常用技术框架、开源中间件,系统架构、数据库、大公司架构案例、常用三方类库、项目管理、线上问题排查、个人成长、思考等知识

    Java架构之路

    Java 程序员 架构 面试 编程语言

    架构师训练营 第三周作业(手写单例模式)

    springH₂O

    架构训练营

    第三周作业

    丁乐洪

    数字资产交易平台开发,场外交易所开发搭建

    135深圳3055源中瑞8032

    架构师训练营第三周课后作业

    天涯若海

    解决大中型浏览器(Chrome)插件开发痛点:自定义热更新方案——1.原理分析及构建部署实现

    梁龙先森

    Java chrome 前端 浏览器 技术方案

    【涂鸦物联网足迹】物联网主流通信方式

    IoT云工坊

    人工智能 云计算 大数据 物联网 云平台

    从广西的新基建耕种,读懂一颗名为智能体的种子

    脑极体

    1分钟带你解锁Angular

    Leo

    学习 前端 angular 前端进阶训练营

    一周信创舆情观察(10.26~11.1)

    统小信uos

    手把手教你如何在Windows安装Anaconda

    计算机与AI

    Python Anaconda

    8张图带你分析Redis与MySQL数据一致性问题

    Java架构师迁哥

    HTTP2协议及websocket协议总结

    江龙

    力扣解题:第三题(个人思路整理)

    人语驿边桥

    力扣

    《高效程序员的45个习惯:敏捷开发修炼之道》.pdf

    田维常

    电子书

    6年Java开发经验,蚂蚁金服面试3+2次,最终有惊无险通过!(已拿offer)

    Java架构之路

    Java 程序员 架构 面试 编程语言

    GrowingIO 响应式编程探索和实践

    GrowingIO技术专栏

    响应式编程

    架构师训练营 - 第三周学习总结

    joshuamai

    区块链钱包APP开发服务商,数字货币钱包开发价格

    135深圳3055源中瑞8032

    干货 | 京东技术中台的Flutter实践之路

    京东科技开发者

    flutter

    PingCAP DevCon 现场直播

    PingCAP DevCon 现场直播

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