作者 | 阿裡巴巴文娛技術
來源 | 阿裡技術公衆号
一 前言
随着智能手機的全面普及，移動網際網路已經滲透到我們生活的方方面面，并且給我們的生活帶來了巨大的變化。我們每天上網看電影、追熱劇、看綜藝，對智能手機帶來的便利觀影體驗已經習以為常。
但是，你可曾想過，在我們使用眼睛擷取大量資訊的同時，這些看似觸手可及的視訊消費體驗對于部分人群來說是極其奢侈的：
我一直在哭，一直在哭，哭我沒有新鞋子穿。直到有一天，我發現有人沒有腳......
—— 海倫·凱勒
我國目前有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 業務架構層适配
近年來，優酷用戶端通過全面的技術重構，将各主要頁面的渲染架構統一，也積累出大量公共渲染控件庫和标準業務元件庫。優酷的統一技術架構以及統一的标準化元件實作，使得這次無障礙體驗優化的适配事半功倍。
比如優酷分發場景大量使用同層渲染元件技術，将業務元件的視圖進行圖層合并，以提高渲染速度。在這次無障礙适配中，渲染架構層統一按照“視訊标簽（獨播、預告等）+ 視訊名稱 + 簡介 + 評分（更新進度等）”來拼接同層渲染元件的朗讀文案，對這些元件提供經過順序優化的标簽内容。
适配後效果如下：
https://gw.alicdn.com/mt/LB1gBmStA9l0K4jSZFKXXXFjpXa.mp43 适配中的典型問題
頁面元素【更準确】朗讀
圖示類按鈕和iconfont，需要額外添加contentDescription屬性以及準确、簡潔的内容才可以保證朗讀正确。
頁面View【按需】擷取焦點
嵌套型View或元件，當傳達的是同一資訊時，在最外容器層設定大焦點對于視障使用者更友好。比如“我的評分”，在圖示和文字的容器層設定焦點和朗讀内容，注意，角色名（如∶按鈕）不應寫入标簽内。
圖示、自定義View設定角色、狀态【更優雅】
能點選的圖檔型按鈕或者自定義View的按鈕，明确設定“角色”名稱，比如“按鈕”、“連結”等角色。
比如頁面左上角的“傳回”按鈕，需要設定按鈕角色，最終朗讀内容為“傳回，按鈕”。
彈窗或彈層自動切換焦點【更人性化】
彈窗或彈層時，自動使上層容器的第一控件（如标題或通知内容）擷取焦點，視障使用者無須二次切換焦點，更符合視障使用者使用體驗，更加展現人性化。
有狀态類型的切換，提示狀态表更【更易懂】
切換按鈕，增加狀态朗讀，并在切換時及時朗讀切換後狀态，使使用者更易懂。
通過對頁面元素設定合理的焦點，優雅的朗讀标簽、設定角色等可以解決無障礙适配80%的問題 ，整體的産品呈現接近明眼人的使用體驗。
4 深度互動适配
但是，為了讓視障使用者能更友善地使用優酷App，優酷技術中心的開發工程師們通過廣泛收集視障使用者的真實回報，在主鍊路場景重點接近障礙人士的使用痛點，做了深度的互動适配優化。
以下舉出幾個案例：
播放器互動适配
優酷的播放器在視訊起播之後，5秒後自動隐藏控制界面以免遮擋視訊，友善使用者欣賞視訊内容。
可是，這個面向明眼人群設計的體驗優化卻給視障使用者帶來了困擾：
“在觀看視訊時，播放器控制欄自動消失，來不及操作；播放器不能擷取焦點，播放器控制欄一直處于隐藏狀态，無法進行播放、暫停、全屏切換等操作；不知道目前播放器控制欄是否處于隐藏還是顯示狀态。”
播放器控制欄在靜默5秒後自動隐藏，是根據正常使用者互動習慣開發的互動優化。
但是，視障人士在使用播放器時，這個功能反而成了使用者的負擔。經過反複模拟使用者的使用場景，最佳實踐就是将控制權完全交給視障使用者，并且及時提醒播放器控制界面的狀态變化。
我們的解決方案：
- 在開啟讀屏模式時，播放器控制欄不再自動隐藏，持續保留在螢幕之上。
- 播放器設定Touch焦點，可拾取焦點，輕按兩下可喚起顯示播放控制欄，再次輕按兩下可隐藏播放控制欄。
- 播放器控制欄在顯示／隐藏時進行讀屏提示“已顯示／隐藏播放控制欄”。
播放頁面橫豎屏适配
使用痛點：
“播放器在橫屏狀态下，部分按鈕無法通過單指掃動聚焦。影響了正常
使用。”
播放器控制界面中的按鈕基本都是圖示類型按鈕，明眼使用者可以通過圖示形狀知道按鈕的含義。但是，對于視障人士，不能掃動聚焦意味着不能通過讀屏朗讀圖示的按鈕含義，是以要保證所有按鈕可擷取焦點被讀屏功能識别，并能夠按照“從左到右，從上到下”的自然順序或功能邏輯順序掃動。
解決方案：
- 在橫豎屏切換時，重寫容器視圖的accessibilityElements方法。
- 對可互動頁面元素按坐标進行排序，保證掃動周遊順序。
- 在橫屏狀态下，調整可互動元素父視圖，確定元素在父視圖内部，進而保證元素可通過點選聚焦。
5 設計中的同理心
以下的幾個典型案例，對于明眼使用者來說完全沒有使用上的障礙，但是對于視障使用者而言卻打斷了主鍊路的使用體驗，使得他們需要身邊視力健全朋友的幫助才能進行下一步操作或者退出目前頁面。
支付鍊路問題
“在購買會員頁面，焦點過于零散，套餐區域和支付區域錯亂，且選中狀态缺失；支付方式未讀出選中狀态；頁面傳回按鈕未加标簽。”
在優酷的購買會員頁面，因為會員類型的多樣，再加上促銷折扣活動的投放，存在大量數字文本View展示。
明眼使用者可以通過View的嵌套包含關系來判定目前選中類型的會員價格，但是視障人士通過掃動讀屏時，顯示過于零散，需要合理設定讀屏View的顆粒度，并可讀出目前是否選中狀态。
- 根據會員套餐類型整體朗讀，解決過于零散問題。
- 在目前選中的支付方式或套餐類型設定selected為true。
- 傳回按鈕增加setContentDescription“傳回”并添加角色“按鈕”。
适配效果如下：
https://gw.alicdn.com/mt/LB1GI.H3Rr0gK0jSZFnXXbRRXXa.mp4狀态折疊問題
“登入時想用新浪微網誌登入，但找不到入口。”
無障礙提示：更多登入方式折疊起來的狀态（左側）；更多登入方式全部展開的狀态（右側）
為了讓登入頁面簡潔明快，同時推薦使用者優先使用淘寶和支付寶登入，優酷用戶端的登入界面将一些不常用的登入方式折疊起來，明眼使用者可以通過點選“更多方式登入”展開檢視其他登入方式。但是視障人士在使用時，需要讀屏提示目前折疊狀态，并提示為按鈕，使用者才會明确了解到這個區域可以點選展開。
- “更多登入方式”設定“按鈕”角色。
- 當獲得焦點時提示目前折疊狀态，輕按兩下可切換狀态。
- 當切換狀态時，及時語音提示狀态切換結果。
半屏彈層焦點透底問題
“很多頁面都是彈層，焦點并不會自動切換到頂層半屏頁，導緻切換焦點時，焦點透到底層。”
在優酷的播放頁，頁面上半部分為播放器，下半部門為周邊視訊推薦或者選集界面。為了不打斷使用者看劇的體驗，很多像簡介、互動等内容都是通過半屏View容器打開。但是，視障人士是通過切換焦點掃動等方式進行頁面切換，如果焦點還停留在底部View層，這對于障礙使用者是非常不友好的。
- 打開半屏時自動切換焦點至半屏頁第一個元素。
經過以上介紹的無障礙典型案例适配，以及特定場景互動流程的深度适配，優酷完成了主要鍊路的無障礙體驗全面更新，并通過了深圳市資訊無障礙研究會專業視障測試工程師對這些問題的測試驗收。
從優酷2020年11月份的版本開始，視障使用者可以使用優酷用戶端得到更加順暢的無障礙觀影體驗，體會到優質視訊内容帶來的快樂。
四 總結
視障人士在使用優酷App
通過開發工程師們的不斷努力，優酷技術團隊在一個月時間内，與行業合作夥伴緊密合作，開展了優酷用戶端主要鍊路的無障礙體驗優化。但是，作為視訊行業的頭部App，本次優酷無障礙體驗優化隻是完成了階段性目标，還有更多頁面場景的無障礙體驗需要繼續打磨和完善。
在優酷主客App未來的疊代過程中，優酷會把無障礙體驗優化作為開發和測試的常态化工作，也會建立相應的無障礙适配檢測機制和規範卡口，確定優酷App的主鍊路持續保持優良的無障礙化體驗。我們将以本次體驗優化為契機，把優酷用戶端以及視訊行業類App的無障礙體驗做到一個新高度。
作為業内領先的線上視訊平台，優酷不僅通過技術适配提供了完善的用戶端無障礙體驗，我們還和中國盲文圖書館進行深度合作，建設無障礙劇場，持續将帶有旁白口述等特色内容提供給廣大視障使用者。我們希望通過無障礙化專區的建設，為視障群體提供更加優質的内容和觀影體驗，讓視障群體真正享受到高品質視訊内容帶來的快樂。
無障礙适配并沒有很高的技術門檻，更多的是需要大家具有同理心，從視障使用者的視角發現使用中的痛點，解決視障使用者遇到的體驗問題。
每個人都應該平等享受科技帶來的便利，願移動網際網路也有盲道可走，願每個人都被生活善待。檢視