天天看點

「小程式」資訊無障礙初體驗

「小程式」資訊無障礙初體驗

是的,千呼萬喚,微信小程式始出來。

微信小程式正式釋出後,中國資訊無障礙産品聯盟(CAPA)的資訊無障礙工程師們在第一時間對其無障礙情況進行了體驗。共選取了滴滴出行DiDi、餓了麼外賣服務、今日頭條lite三款小程式,在Android及iOS平台上分别通過讀屏軟體進行操作使用,并記錄下其對應的表現。

體驗所使用的機型及相關環境如下:

華為 P9 + Android 7.0 + EMui 5.0 + TalkBack 5.0.4

Vivo XPlay5S + Android 6.0 + Funtouch 2.6 + TalkBack 5.1.0

三星 S4 + Android 5.0.2 + TalkBack 5.0.4

iPhone 6S + iOS 10.2 + VoiceOver

iPhone 6 Plus + iOS 10.2 + VoiceOver

總的來講,小程式整體的無障礙表現還是不錯的,讀屏使用者可以浏覽操作大部分的功能,但仍然可以找到許多無障礙支援不足的情況。在這裡我們對三款小程式的功能和各自的表現就不贅述了,一起來看一下他們在讀屏下的共同表現。

  • 在iPhone和Android手機中,小程式的周邊元素(頂部和底部)表現相對一緻,具有相同的位置和風格、均有穩定的焦點,基本可以支援讀屏使用者順利操作。但在Android手機上,頂部右上角的更多按鈕(…)缺少标簽,讀屏朗讀為“按鈕未加标簽”。
  • 在兩個系統平台中,使用讀屏浏覽小程式的主體内容區域,存在部分元素缺少焦點、聚焦後無朗讀的問題,并且所有的元素朗讀提示中均缺少元素類型。這可能會導緻讀屏使用者對界面内容産生困惑,進而影響部分功能的操作使用。
  • 在小程式的主體内容區域中,通過使用一些特殊的讀屏手勢(如轉子)可以按照元素類型浏覽,而這些元素是在Webview中常見的。
  • 在Android端,小程式的主體内容區域不支援Talkback讀屏的觸摸手勢浏覽,僅能通過單指左右輕掃的手勢按順序逐個浏覽界面元素。這意味着面對内容衆多的小程式界面,Android部分的讀屏使用者無法快速聚焦操作目标功能,存在很大的操作困難。

根據上述的體驗結果總結,結合過往對于讀屏操作和産品無障礙的一些經驗,我們做了一些初步的判斷如下:

  • 小程式的主體内容區域呈現采用的是Webview的實作形式。因為在這個主體區域中,通過讀屏手勢的操作,可以按照Webview的元素進行浏覽;并且朗讀中缺少元素類型、Android端不支援觸摸浏覽都是在Webview中常見的無障礙問題。
  • 小程式的周邊控件采用類似Native的實作形式。這個是依據在兩個平台上,周邊部分元素均表現穩定,且在不同的小程式中均表現一緻判斷的。
  • 小程式的前端渲染引擎與Talkback讀屏存在一定的無障礙相容問題。Talkback讀屏在小程式的主體内容區域無法觸摸浏覽的表現與個别存在讀屏相容性問題的H5渲染引擎是一緻的。
  • 小程式的UI元件未做無障礙支援。在本次的體驗中,小程式主體内容區域内的元素在聚焦後均沒有給出元素類型的朗讀提示,在排除讀屏無障礙支援差異後,可以簡單推斷為UI元件未做相關無障礙支援導緻的。
  • 各個小程式的開發者沒有恰當使用UI元件。小程式内部分元素沒有焦點的表現,可能是用于開發者采用了自實作的方式導緻對讀屏的不支援。

以上是我們根據本次對小程式的無障礙體驗後初步得出的一些判斷,接下來,我們還會對小程式架構的UI元件、渲染引擎、開發實踐等方面進一步研究,在如何實作小程式的無障礙方面給出相關的建議。

作者:中國資訊無障礙産品聯盟(CAPA)

掃描下方二維碼,進入資訊無障礙知識庫,技術人的百科全書:

「小程式」資訊無障礙初體驗