簡介：?雖然Android和iOS系統(tǒng)本身就有對無障礙技術(shù)的官方支持，但是隨著各種技術(shù)的迭代和演進，以及頁面內(nèi)容的復(fù)雜度的增加，靠系統(tǒng)自身的支持已經(jīng)遠遠無法達到理想的無障礙用戶體驗。優(yōu)酷客戶端針對視障群體實際需求及反饋進行梳理，并進行了全面的深度適配和體驗優(yōu)化。本文分享相關(guān)技術(shù)細節(jié)和實踐經(jīng)驗。

一 前言
隨著智能手機的全面普及，移動互聯(lián)網(wǎng)已經(jīng)滲透到我們生活的方方面面，并且給我們的生活帶來了巨大的變化。我們每天上網(wǎng)看電影、追熱劇、看綜藝，對智能手機帶來的便利觀影體驗已經(jīng)習(xí)以為常。

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

我一直在哭，一直在哭，哭我沒有新鞋子穿。直到有一天，我發(fā)現(xiàn)有人沒有腳…
—— 海倫·凱勒

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

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

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

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

圖片內(nèi)容為：盲文，真的是太難了。你們能到處在外交友、露營時，因為基礎(chǔ)設(shè)施不無障礙，盲人在家；你們跟我們一樣只能在家時，我們悲哀地發(fā)現(xiàn)，我們連在家追個劇都成了奢望。

優(yōu)酷作為業(yè)內(nèi)領(lǐng)先的在線視頻平臺，有責(zé)任讓每一個人都獲得最佳的視頻消費體驗，感受到優(yōu)質(zhì)視頻內(nèi)容帶來的快樂。為此，我們啟動了對優(yōu)酷客戶端進行全面無障礙體驗優(yōu)化的工作，希望幫助視障用戶更接近于真實地“看到”或者“聽到”外面的世界。

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

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

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

單指觸摸：聚焦選中界面上的控件
單指右掃：切換下一個焦點
單指左掃：切換上一個焦點
單點雙擊：激活當(dāng)前聚焦的控件
兩指／三指拖動：滾動／翻頁
為了適配讀屏軟件等輔助工具對應(yīng)用的信息獲取、朗讀和操作，優(yōu)酷App需要在焦點設(shè)置、添加控件標(biāo)簽內(nèi)容等方面進行細致的優(yōu)化。

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

三 深度適配和體驗優(yōu)化
無論是Android還是iOS，系統(tǒng)本身就有對無障礙技術(shù)的官方支持。比如TextView文本控件、Button按鈕控件可以被系統(tǒng)讀屏功能直接聚焦并朗讀控件類型，能夠提供給用戶基本的無障礙使用體驗。

但是，靠系統(tǒng)自身的支持是無法達到理想的無障礙用戶體驗的。隨著移動互聯(lián)網(wǎng)的快速發(fā)展，各種新技術(shù)棧持續(xù)被引入優(yōu)酷客戶端，優(yōu)酷業(yè)務(wù)和頁面呈現(xiàn)的內(nèi)容的復(fù)雜度越來越高。無論是各種新技術(shù)棧，還是各種復(fù)雜的頁面，都有缺乏無障礙支持或者使用體驗較差的問題。

例如：

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

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

1 適配范圍
經(jīng)過多年的技術(shù)迭代和演進，優(yōu)酷采用了多技術(shù)棧混合的開發(fā)模式，引入了諸如Weex、Flutter等跨平臺框架。本次體驗優(yōu)化，不僅對Android Native、iOS Native等原生開發(fā)的頁面進行了深度適配，對核心場景的Weex、Flutter、H5頁面也進行了全面體驗優(yōu)化。

2 業(yè)務(wù)架構(gòu)層適配
近年來，優(yōu)酷客戶端通過全面的技術(shù)重構(gòu)，將各主要頁面的渲染架構(gòu)統(tǒng)一，也積累出大量公共渲染控件庫和標(biāo)準(zhǔn)業(yè)務(wù)組件庫。優(yōu)酷的統(tǒng)一技術(shù)架構(gòu)以及統(tǒng)一的標(biāo)準(zhǔn)化組件實現(xiàn)，使得這次無障礙體驗優(yōu)化的適配事半功倍。

比如優(yōu)酷分發(fā)場景大量使用同層渲染組件技術(shù)，將業(yè)務(wù)組件的視圖進行圖層合并，以提高渲染速度。在這次無障礙適配中，渲染框架層統(tǒng)一按照“視頻標(biāo)簽（獨播、預(yù)告等）+ 視頻名稱 + 簡介 + 評分（更新進度等）”來拼接同層渲染組件的朗讀文案，對這些組件提供經(jīng)過順序優(yōu)化的標(biāo)簽內(nèi)容。

適配后效果如下：
https://gw.alicdn.com/mt/LB1gBmStA9l0K4jSZFKXXXFjpXa.mp4

3 適配中的典型問題
頁面元素【更準(zhǔn)確】朗讀

圖標(biāo)類按鈕和iconfont，需要額外添加contentDescription屬性以及準(zhǔn)確、簡潔的內(nèi)容才可以保證朗讀正確。

頁面View【按需】獲取焦點

嵌套型View或組件，當(dāng)傳達的是同一信息時，在最外容器層設(shè)置大焦點對于視障用戶更友好。比如“我的評分”，在圖標(biāo)和文字的容器層設(shè)置焦點和朗讀內(nèi)容，注意，角色名（如∶按鈕）不應(yīng)寫入標(biāo)簽內(nèi)。

圖標(biāo)、自定義View設(shè)置角色、狀態(tài)【更優(yōu)雅】

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

比如頁面左上角的“返回”按鈕，需要設(shè)置按鈕角色，最終朗讀內(nèi)容為“返回，按鈕”。

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

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

有狀態(tài)類型的切換，提示狀態(tài)表更【更易懂】

切換按鈕，增加狀態(tài)朗讀，并在切換時及時朗讀切換后狀態(tài)，使用戶更易懂。

通過對頁面元素設(shè)定合理的焦點，優(yōu)雅的朗讀標(biāo)簽、設(shè)置角色等可以解決無障礙適配80%的問題 ，整體的產(chǎn)品呈現(xiàn)接近明眼人的使用體驗。

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

以下舉出幾個案例：

播放器交互適配

優(yōu)酷的播放器在視頻起播之后，5秒后自動隱藏控制界面以免遮擋視頻，方便用戶欣賞視頻內(nèi)容。

可是，這個面向明眼人群設(shè)計的體驗優(yōu)化卻給視障用戶帶來了困擾：

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

播放器控制欄在靜默5秒后自動隱藏，是根據(jù)正常用戶交互習(xí)慣開發(fā)的交互優(yōu)化。

但是，視障人士在使用播放器時，這個功能反而成了用戶的負擔(dān)。經(jīng)過反復(fù)模擬用戶的使用場景，最佳實踐就是將控制權(quán)完全交給視障用戶，并且及時提醒播放器控制界面的狀態(tài)變化。

我們的解決方案：

在開啟讀屏模式時，播放器控制欄不再自動隱藏，持續(xù)保留在屏幕之上。
播放器設(shè)置Touch焦點，可拾取焦點，雙擊可喚起顯示播放控制欄，再次雙擊可隱藏播放控制欄。
播放器控制欄在顯示／隱藏時進行讀屏提示“已顯示／隱藏播放控制欄”。
適配后效果如下：
https://gw.alicdn.com/mt/TB1Qo3r3KH2gK0jSZJnXXaT1FXa.mp4

播放頁面橫豎屏適配

使用痛點：

“播放器在橫屏狀態(tài)下，部分按鈕無法通過單指掃動聚焦。影響了正常

使用。”

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

解決方案：

在橫豎屏切換時，重寫容器視圖的accessibilityElements方法。
對可交互頁面元素按坐標(biāo)進行排序，保證掃動遍歷順序。
在橫屏狀態(tài)下，調(diào)整可交互元素父視圖，確保元素在父視圖內(nèi)部，從而保證元素可通過點擊聚焦。
適配后效果如下：
https://gw.alicdn.com/mt/LB1sp7T3Rr0gK0jSZFnXXbRRXXa.mp4

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

支付鏈路問題

使用痛點：

“在購買會員頁面，焦點過于零散，套餐區(qū)域和支付區(qū)域錯亂，且選中狀態(tài)缺失；支付方式未讀出選中狀態(tài)；頁面返回按鈕未加標(biāo)簽。”

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

明眼用戶可以通過View的嵌套包含關(guān)系來判定當(dāng)前選中類型的會員價格，但是視障人士通過掃動讀屏?xí)r，顯示過于零散，需要合理設(shè)置讀屏View的顆粒度，并可讀出當(dāng)前是否選中狀態(tài)。

解決方案：

根據(jù)會員套餐類型整體朗讀，解決過于零散問題。
在當(dāng)前選中的支付方式或套餐類型設(shè)置selected為true。
返回按鈕增加setContentDescription“返回”并添加角色“按鈕”。
適配效果如下：
https://gw.alicdn.com/mt/LB1GI.H3Rr0gK0jSZFnXXbRRXXa.mp4

狀態(tài)折疊問題

使用痛點：

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

無障礙提示：更多登錄方式折疊起來的狀態(tài)（左側(cè)）；更多登錄方式全部展開的狀態(tài)（右側(cè)）

為了讓登錄頁面簡潔明快，同時推薦用戶優(yōu)先使用淘寶和支付寶登錄，優(yōu)酷客戶端的登錄界面將一些不常用的登錄方式折疊起來，明眼用戶可以通過點擊“更多方式登錄”展開查看其他登錄方式。但是視障人士在使用時，需要讀屏提示當(dāng)前折疊狀態(tài)，并提示為按鈕，用戶才會明確了解到這個區(qū)域可以點擊展開。

解決方案：

“更多登錄方式”設(shè)置“按鈕”角色。
當(dāng)獲得焦點時提示當(dāng)前折疊狀態(tài)，雙擊可切換狀態(tài)。
當(dāng)切換狀態(tài)時，及時語音提示狀態(tài)切換結(jié)果。
適配后效果如下：
https://gw.alicdn.com/mt/TB1_uIu3FT7gK0jSZFpXXaTkpXa.mp4

半屏彈層焦點透底問題

使用痛點：

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

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

解決方案：

打開半屏?xí)r自動切換焦點至半屏頁第一個元素。
適配后效果如下：
https://gw.alicdn.com/mt/TB1z7wG3KL2gK0jSZFmXXc7iXXa.mp4

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

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

四 總結(jié)

視障人士在使用優(yōu)酷App

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

在優(yōu)酷主客App未來的迭代過程中，優(yōu)酷會把無障礙體驗優(yōu)化作為開發(fā)和測試的常態(tài)化工作，也會建立相應(yīng)的無障礙適配檢測機制和規(guī)范卡口，確保優(yōu)酷App的主鏈路持續(xù)保持優(yōu)良的無障礙化體驗。我們將以本次體驗優(yōu)化為契機，把優(yōu)酷客戶端以及視頻行業(yè)類App的無障礙體驗做到一個新高度。

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

無障礙適配并沒有很高的技術(shù)門檻，更多的是需要大家具有同理心，從視障用戶的視角發(fā)現(xiàn)使用中的痛點，解決視障用戶遇到的體驗問題。

原文鏈接
本文為阿里云原創(chuàng)內(nèi)容，未經(jīng)允許不得轉(zhuǎn)載。

總結(jié)

以上是生活随笔為你收集整理的为了让盲人也能追剧，优酷做了哪些努力？的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。