阿里妹導讀：雖然Android和iOS系統本身就有對無障礙技術的官方支持，但是隨着各種技術的迭代和演進，以及頁面內容的複雜度的增加，靠系統自身的支持已經遠遠無法達到理想的無障礙用戶體驗。優酷客戶端針對視障羣體實際需求及反饋進行梳理，並進行了全面的深度適配和體驗優化。本文分享相關技術細節和實踐經驗。

文末福利：雲開發Web應用實戰營來了。

一 前言

隨着智能手機的全面普及，移動互聯網已經滲透到我們生活的方方面面，並且給我們的生活帶來了巨大的變化。我們每天上網看電影、追熱劇、看綜藝，對智能手機帶來的便利觀影體驗已經習以爲常。

但是，你可曾想過，在我們使用眼睛獲取大量信息的同時，這些看似觸手可及的視頻消費體驗對於部分人羣來說是極其奢侈的：

我一直在哭，一直在哭，哭我沒有新鞋子穿。直到有一天，我發現有人沒有腳......—— 海倫·凱勒

我國目前有1700多萬視障者，這個龐大的羣體，因爲種種原因無法通過眼睛看清世界，很多人只能感受到微光甚至全盲。

正因爲他們不能視物，他們比明眼人更需要藉助智能手機來和世界對話，也同樣擁有對高質量視頻內容的娛樂訴求。視頻類App就像是架設在視障人士和音視頻內容之間的一道橋樑，如果這道橋樑崎嶇不平甚至充滿陷阱，我們很難想象一個視障人士能夠順利的走到對岸。無障礙體驗適配就像是在應用界面架設一條盲道，讓視障人士能夠像明眼人一樣順暢操作App。

2020年是一個不平凡的年份，全國人民響應號召，戰疫情，不出門，戴口罩。視障用戶也和全國人民一樣，經歷了漫長的隔離期。在疫情期間，視頻類App成爲被高頻使用的剛需應用。

然而，我們卻從各種反饋渠道聽到了視障羣體無奈的聲音：

圖片內容爲：盲人，真的是太難了。你們能到處在外交友、露營時，因爲基礎設施不無障礙，盲人在家；你們跟我們一樣只能在家時，我們悲哀地發現，我們連在家追個劇都成了奢望。

優酷作爲業內領先的在線視頻平臺，有責任讓每一個人都獲得最佳的視頻消費體驗，感受到優質視頻內容帶來的快樂。爲此，我們啓動了對優酷客戶端進行全面無障礙體驗優化的工作，希望幫助視障用戶更接近於真實地“看到”或者“聽到”外面的世界。

視障人士和我們操作手機方法有一些不同，他們通過讀屏軟件朗讀App界面元素，根據所聽到的內容決定下一步操作。

比如：Android在【設置】中找到【輔助功能】或者【無障礙】打開【TalkBack】；iOS通過【設置】->【輔助功能】，打開【旁白】／【VoiceOver】來開啓讀屏功能。

在讀屏打開後，視障用戶可用如下的無障礙操作手勢來操作App：

單指觸摸：聚焦選中界面上的控件單指右掃：切換下一個焦點單指左掃：切換上一個焦點單點雙擊：激活當前聚焦的控件兩指／三指拖動：滾動／翻頁

爲了適配讀屏軟件等輔助工具對應用的信息獲取、朗讀和操作，優酷App需要在焦點設置、添加控件標籤內容等方面進行細緻的優化。

二 專業合作

爲了更加真實地收集視障用戶在使用優酷客戶端時的痛點和問題，爲用戶提供良好的無障礙體驗。我們和深圳市信息無障礙研究會（http://www.siaa.org.cn/）進行深度合作，藉助無障礙研究會的專業視障測試工程師的經驗和領域知識，收集真實視障用戶使用場景中存在的問題，以Bug的形式錄入優酷內部QA管理系統，經過統一適配和測試後，交給無障礙研究會的專業視障測試工程師進行測試驗收。

三 深度適配和體驗優化

無論是Android還是iOS，系統本身就有對無障礙技術的官方支持。比如TextView文本控件、Button按鈕控件可以被系統讀屏功能直接聚焦並朗讀控件類型，能夠提供給用戶基本的無障礙使用體驗。

但是，靠系統自身的支持是無法達到理想的無障礙用戶體驗的。隨着移動互聯網的快速發展，各種新技術棧持續被引入優酷客戶端，優酷業務和頁面呈現的內容的複雜度越來越高。無論是各種新技術棧，還是各種複雜的頁面，都有缺乏無障礙支持或者使用體驗較差的問題。

例如：

焦點合併問題：視頻卡片上的圖片+文字內容 是一個整體，但只能分開取到圖像和標題並朗讀出來。內容提示問題：優酷客戶端界面上有大量的可點擊組件，但由於缺乏控件類型屬性， 是用戶不知道這是一個什麼控件，並且是否可進行點擊等操作。焦點錯亂問題：播放器控制界面上有大量的圖形按鈕，用戶使用讀屏操作掃動瀏覽頁面時是線性聚焦控件的。控件未設置焦點順序時，用戶的手指掃動切換焦點可能不能遵從合適的（界面分佈或功能邏輯）順序切換。這些問題，都需要由應用層的研發同學進行專門適配。

經過對信息無障礙研究會測試工程師的專業反饋進行梳理，優酷針對這些問題進行了全面的深度適配和體驗優化，主要體現在如下方面：

1 適配範圍

經過多年的技術迭代和演進，優酷採用了多技術棧混合的開發模式，引入了諸如Weex、Flutter等跨平臺框架。本次體驗優化，不僅對Android Native、iOS Native等原生開發的頁面進行了深度適配，對核心場景的Weex、Flutter、H5頁面也進行了全面體驗優化。

2 業務架構層適配

近年來，優酷客戶端通過全面的技術重構，將各主要頁面的渲染架構統一，也積累出大量公共渲染控件庫和標準業務組件庫。優酷的統一技術架構以及統一的標準化組件實現，使得這次無障礙體驗優化的適配事半功倍。

比如優酷分發場景大量使用同層渲染組件技術，將業務組件的視圖進行圖層合併，以提高渲染速度。在這次無障礙適配中，渲染框架層統一按照“視頻標籤（獨播、預告等）+ 視頻名稱 + 簡介 + 評分（更新進度等）”來拼接同層渲染組件的朗讀文案，對這些組件提供經過順序優化的標籤內容。

適配後效果如下：

3 適配中的典型問題

頁面元素【更準確】朗讀

圖標類按鈕和iconfont，需要額外添加contentDescription屬性以及準確、簡潔的內容纔可以保證朗讀正確。

圖標類按鈕

頁面View【按需】獲取焦點

嵌套型View或組件，當傳達的是同一信息時，在最外容器層設置大焦點對於視障用戶更友好。比如“我的評分”，在圖標和文字的容器層設置焦點和朗讀內容，注意，角色名（如∶按鈕）不應寫入標籤內。

圖標、自定義View設置角色、狀態【更優雅】

能點擊的圖片型按鈕或者自定義View的按鈕，明確設定“角色”名稱，比如“按鈕”、“鏈接”等角色。

比如頁面左上角的“返回”按鈕，需要設置按鈕角色，最終朗讀內容爲“返回，按鈕”。

“返回”按鈕

彈窗或彈層自動切換焦點【更人性化】

彈窗或彈層時，自動使上層容器的第一控件（如標題或通知內容）獲取焦點，視障用戶無須二次切換焦點，更符合視障用戶使用體驗，更加體現人性化。

有狀態類型的切換，提示狀態表更【更易懂】

切換按鈕，增加狀態朗讀，並在切換時及時朗讀切換後狀態，使用戶更易懂。

切換按鈕

通過對頁面元素設定合理的焦點，優雅的朗讀標籤、設置角色等可以解決無障礙適配80%的問題 ，整體的產品呈現接近明眼人的使用體驗。

4 深度交互適配

但是，爲了讓視障用戶能更方便地使用優酷App，優酷技術中心的開發工程師們通過廣泛收集視障用戶的真實反饋，在主鏈路場景重點接近障礙人士的使用痛點，做了深度的交互適配優化。

以下舉出幾個案例：

播放器交互適配

優酷的播放器在視頻起播之後，5秒後自動隱藏控制界面以免遮擋視頻，方便用戶欣賞視頻內容。

可是，這個面向明眼人羣設計的體驗優化卻給視障用戶帶來了困擾：

“在觀看視頻時，播放器控制欄自動消失，來不及操作；播放器不能獲取焦點，播放器控制欄一直處於隱藏狀態，無法進行播放、暫停、全屏切換等操作；不知道當前播放器控制欄是否處於隱藏還是顯示狀態。”

播放器控制欄在靜默5秒後自動隱藏，是根據正常用戶交互習慣開發的交互優化。

但是，視障人士在使用播放器時，這個功能反而成了用戶的負擔。經過反覆模擬用戶的使用場景，最佳實踐就是將控制權完全交給視障用戶，並且及時提醒播放器控制界面的狀態變化。

我們的解決方案：

在開啓讀屏模式時，播放器控制欄不再自動隱藏，持續保留在屏幕之上。

播放器設置Touch焦點，可拾取焦點，雙擊可喚起顯示播放控制欄，再次雙擊可隱藏播放控制欄。

播放器控制欄在顯示／隱藏時進行讀屏提示“已顯示／隱藏播放控制欄”。適配後效果如下：

播放頁面橫豎屏適配

使用痛點：

“播放器在橫屏狀態下，部分按鈕無法通過單指掃動聚焦。影響了正常使用。”

播放器控制界面中的按鈕基本都是圖標類型按鈕，明眼用戶可以通過圖標形狀知道按鈕的含義。但是，對於視障人士，不能掃動聚焦意味着不能通過讀屏朗讀圖標的按鈕含義，所以要保證所有按鈕可獲取焦點被讀屏功能識別，並能夠按照“從左到右，從上到下”的自然順序或功能邏輯順序掃動。

解決方案：

在橫豎屏切換時，重寫容器視圖的accessibilityElements方法。

對可交互頁面元素按座標進行排序，保證掃動遍歷順序。

在橫屏狀態下，調整可交互元素父視圖，確保元素在父視圖內部，從而保證元素可通過點擊聚焦。適配後效果如下：

5 設計中的同理心

以下的幾個典型案例，對於明眼用戶來說完全沒有使用上的障礙，但是對於視障用戶而言卻打斷了主鏈路的使用體驗，使得他們需要身邊視力健全朋友的幫助才能進行下一步操作或者退出當前頁面。

支付鏈路問題

使用痛點：

“在購買會員頁面，焦點過於零散，套餐區域和支付區域錯亂，且選中狀態缺失；支付方式未讀出選中狀態；頁面返回按鈕未加標籤。”

在優酷的購買會員頁面，因爲會員類型的多樣，再加上促銷折扣活動的投放，存在大量數字文本View展示。

明眼用戶可以通過View的嵌套包含關係來判定當前選中類型的會員價格，但是視障人士通過掃動讀屏時，顯示過於零散，需要合理設置讀屏View的顆粒度，並可讀出當前是否選中狀態。

解決方案：

根據會員套餐類型整體朗讀，解決過於零散問題。

在當前選中的支付方式或套餐類型設置selected爲true。

返回按鈕增加setContentDescription“返回”並添加角色“按鈕”。

適配效果如下：

狀態摺疊問題

使用痛點：

“登錄時想用新浪微博登錄，但找不到入口。”

無障礙提示：更多登錄方式摺疊起來的狀態（左側）；更多登錄方式全部展開的狀態（右側）

爲了讓登錄頁面簡潔明快，同時推薦用戶優先使用淘寶和支付寶登錄，優酷客戶端的登錄界面將一些不常用的登錄方式摺疊起來，明眼用戶可以通過點擊“更多方式登錄”展開查看其他登錄方式。但是視障人士在使用時，需要讀屏提示當前摺疊狀態，並提示爲按鈕，用戶纔會明確瞭解到這個區域可以點擊展開。

解決方案：

“更多登錄方式”設置“按鈕”角色。當獲得焦點時提示當前摺疊狀態，雙擊可切換狀態。當切換狀態時，及時語音提示狀態切換結果。

適配後效果如下：

半屏彈層焦點透底問題

使用痛點：

“很多頁面都是彈層，焦點並不會自動切換到頂層半屏頁，導致切換焦點時，焦點透到底層。”

在優酷的播放頁，頁面上半部分爲播放器，下半部門爲周邊視頻推薦或者選集界面。爲了不打斷用戶看劇的體驗，很多像簡介、互動等內容都是通過半屏View容器打開。但是，視障人士是通過切換焦點掃動等方式進行頁面切換，如果焦點還停留在底部View層，這對於障礙用戶是非常不友好的。

解決方案：

打開半屏時自動切換焦點至半屏頁第一個元素。

適配後效果如下：

經過以上介紹的無障礙典型案例適配，以及特定場景交互流程的深度適配，優酷完成了主要鏈路的無障礙體驗全面升級，並通過了深圳市信息無障礙研究會專業視障測試工程師對這些問題的測試驗收。

從優酷2020年11月份的版本開始，視障用戶可以使用優酷客戶端得到更加順暢的無障礙觀影體驗，體會到優質視頻內容帶來的快樂。

四 總結

視障人士在使用優酷App

通過開發工程師們的不斷努力，優酷技術團隊在一個月時間內，與行業合作伙伴緊密合作，開展了優酷客戶端主要鏈路的無障礙體驗優化。但是，作爲視頻行業的頭部App，本次優酷無障礙體驗優化只是完成了階段性目標，還有更多頁面場景的無障礙體驗需要繼續打磨和完善。

在優酷主客App未來的迭代過程中，優酷會把無障礙體驗優化作爲開發和測試的常態化工作，也會建立相應的無障礙適配檢測機制和規範卡口，確保優酷App的主鏈路持續保持優良的無障礙化體驗。我們將以本次體驗優化爲契機，把優酷客戶端以及視頻行業類App的無障礙體驗做到一個新高度。

作爲業內領先的在線視頻平臺，優酷不僅通過技術適配提供了完善的客戶端無障礙體驗，我們還和中國盲文圖書館進行深度合作，建設無障礙劇場，持續將帶有旁白口述等特色內容提供給廣大視障用戶。我們希望通過無障礙化專區的建設，爲視障羣體提供更加優質的內容和觀影體驗，讓視障羣體真正享受到高質量視頻內容帶來的快樂。

無障礙適配並沒有很高的技術門檻，更多的是需要大傢俱有同理心，從視障用戶的視角發現使用中的痛點，解決視障用戶遇到的體驗問題。

每個人都應該平等享受科技帶來的便利，願移動互聯網也有盲道可走，願每個人都被生活善待。

雲開發Web應用實戰營

極速部署最IN的應用

通過雲開發平臺，無需重構即可將已有的NodeJS應用、Java應用、Python應用、PHP應用等，輕鬆平滑地遷移部署到雲原生Serverless架構，告別資源浪費和人肉擴容！參與線上線下打卡，還有機會獲得阿里雲飛天代碼T-shirt和官方證書。