作者：閒魚技術-君愛

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

原文連結​

本文為雲棲社群原創內容，未經