閒魚無障礙是怎麼在端側實現的

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的無障礙優化，有任何建議，隨時向咱們提出，讓咱們一塊兒進一步消除特殊人羣使用障礙，帶來創新的使用體驗。

原文連接 本文爲雲棲社區原創內容，未經容許不得轉載。