Hi，小伙伴們還記得之前刷屏的“閑魚為1700萬人，打造了一條盲道”的文章嗎？

在今年4月，閑魚和深圳市信息無障礙研究會取得了聯系。在溝通過程中，我們了解到在移動互聯網時代，視障人士同樣可以通過手機，享受到互聯網帶來的便利。閑魚作為目前國內最大的閑置交易平臺，為了更好地服務用戶，在無障礙研究會的視障工程師團隊的支持下，在現有基礎上，先后進行了Android、iOS版本的無障礙支持。

閑魚在Flutter&Native混合工程下，如何進行的無障礙優化？在日常版本迭代頻繁情況下，是怎么有效地保持穩定支持無障礙功能？本文為您一一揭秘。

什么是無障礙？

什么是無障礙？一個人殘疾或者能力缺失，生活中有種種障礙，比如，殘疾人不能上樓梯，視障人士不能玩手機。殘障人士，同樣享有人權，擁有獨立生活的訴求。合理地使用工具減少障礙，比如為殘疾人設置電梯，為視障人士提供語音功能，都是減少或消除障礙的手段，也就是我們今天所說的無障礙(Accessibility)。

今天我們在處理端上的無障礙，一般是為視障群體服務。視障用戶如何獲取手機上的信息？不同手機系統提供了相應的讀屏輔助軟件，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萬。而無障礙優化絕不僅僅是一次專項治理即可一勞永逸。我們未來在日常開發流程中更加注重無障礙優化，持續關注并推動業內無障礙標準落地。同時，閑魚將于7月28日參加在上海舉行的第十四屆中國信息無障礙論壇，與騰訊、字節跳動等業內同行交流無障礙體驗，喚起業內及社會大眾對與視障人群的關注，為推動中國信息無障礙貢獻力量。

今年，阿里巴巴技術公益委員向所有工程師發起倡議，提倡“用技術助力公益，讓科技更有溫度”，在這里也希望業內人士，一起推動互聯網App的無障礙優化，有任何建議，隨時向我們提出，讓我們一起進一步消除特殊人群使用障礙，帶來創新的使用體驗。

原文鏈接
本文為云棲社區原創內容，未經允許不得轉載。

總結

以上是生活随笔為你收集整理的闲鱼无障碍是怎么在端侧实现的的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。