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

前几天，“闲鱼为1700万人，打造了一条盲道”的文章刷屏了～视障人群在生活中更加需要高性价比的闲置商品交易，作为目前国内最大的闲置交易平台，今年4月，闲鱼在深圳无障碍研究会视障工程师团队的支持下，先后实现了Android、iOS版本的无障碍支持。 闲鱼在Flutter&Native混合工程下，如何进行无障碍优化？在日常版本迭代频繁情况下，是怎么有效地保持稳定支持无障碍功能？本文为您一一揭秘。

功能演示

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

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

播放

无障碍常态化机制

很多开发可能会这么思考，我们是否需要针对视障群体，单独开发出一个符合这个群体使用习惯的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的无障碍优化，有任何建议，随时向我们提出，让我们一起进一步消除特殊人群使用障碍，带来创新的使用体验。

就是现在，客户端／服务端java／架构／前端／算法／质量工程师，小闲鱼通通期待你的加入，base杭州阿里巴巴西溪园区。欢迎天马行空的你，加入这个颜值+才华逆天的团队，拓展技术边界成就极致！

*投喂简历给小闲鱼→ guicai.gxy@alibaba-inc.com

更多系列文章、开源项目、关键洞察、深度解读

请认准 闲鱼技术