简介： 尽管 Android 和 iOS 零碎自身就有对无障碍技术的官网反对，然而随着各种技术的迭代和演进，以及页面内容的复杂度的减少，靠零碎本身的反对曾经远远无奈达到现实的无障碍用户体验。优酷客户端针对视障群体理论需要及反馈进行梳理，并进行了全面的深度适配和体验优化。本文分享相干技术细节和实践经验。
一 前言
随着智能手机的全面遍及，挪动互联网曾经渗透到咱们生存的方方面面，并且给咱们的生存带来了微小的变动。咱们每天上网看电影、追热剧、看综艺，对智能手机带来的便当观影体验曾经司空见惯。
然而，你可曾想过，在咱们应用眼睛获取大量信息的同时，这些看似触手可及的视频生产体验对于局部人群来说是极其侈靡的：
我始终在哭，始终在哭，哭我没有新鞋子穿。直到有一天，我发现有人没有脚 ……
—— 海伦·凯勒
我国目前有 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.mp4
3 适配中的典型问题
页面元素【更精确】朗诵
图标类按钮和 iconfont，须要额定增加 contentDescription 属性以及精确、简洁的内容才能够保障朗诵正确。
页面 View【按需】获取焦点
嵌套型 View 或组件，当传播的是同一信息时，在最外容器层设置大焦点对于视障用户更敌对。比方“我的评分”，在图标和文字的容器层设置焦点和朗诵内容，留神，角色名（如∶按钮）不应写入标签内。
图标、自定义 View 设置角色、状态【更优雅】
能点击的图片型按钮或者自定义 View 的按钮，明确设定“角色”名称，比方“按钮”、“链接”等角色。
比方页面左上角的“返回”按钮，须要设置按钮角色，最终朗诵内容为“返回，按钮”。
弹窗或弹层主动切换焦点【更人性化】
弹窗或弹层时，主动使下层容器的第一控件（如题目或告诉内容）获取焦点，视障用户毋庸二次切换焦点，更合乎视障用户应用体验，更加体现人性化。
有状态类型的切换，提醒状态表更【更易懂】
切换按钮，减少状态朗诵，并在切换时及时朗诵切换后状态，使用户更易懂。
通过对页面元素设定正当的焦点，优雅的朗诵标签、设置角色等能够解决无障碍适配 80% 的问题，整体的产品出现靠近明眼人的应用体验。
4 深度交互适配
然而，为了让视障用户能更不便地应用优酷 App，优酷技术核心的开发工程师们通过宽泛收集视障用户的实在反馈，在主链路场景重点靠近阻碍人士的应用痛点，做了深度的交互适配优化。
以下举出几个案例：
播放器交互适配
优酷的播放器在视频起播之后，5 秒后自动隐藏管制界面免得遮挡视频，不便用户观赏视频内容。
可是，这个面向明眼人群设计的体验优化却给视障用户带来了困扰：
“在观看视频时，播放器管制栏主动隐没，来不及操作；播放器不能获取焦点，播放器管制栏始终处于暗藏状态，无奈进行播放、暂停、全屏切换等操作；不晓得以后播放器管制栏是否处于暗藏还是显示状态。”
播放器管制栏在静默 5 秒后自动隐藏，是依据失常用户交互习惯开发的交互优化。
然而，视障人士在应用播放器时，这个性能反而成了用户的累赘。通过重复模仿用户的应用场景，最佳实际就是将控制权齐全交给视障用户，并且及时揭示播放器管制界面的状态变动。
咱们的解决方案：
- 在开启读屏模式时，播放器管制栏不再自动隐藏，继续保留在屏幕之上。
- 播放器设置 Touch 焦点，可拾取焦点，双击可唤起显示播放管制栏，再次双击可暗藏播放管制栏。
- 播放器管制栏在显示/暗藏时进行读屏提醒“已显示/暗藏播放管制栏”。
适配后成果如下：
https://gw.alicdn.com/mt/TB1Qo3r3KH2gK0jSZJnXXaT1FXa.mp4
播放页面横竖屏适配
应用痛点：
“播放器在横屏状态下，局部按钮无奈通过单指扫动聚焦。影响了失常
应用。”
播放器管制界面中的按钮根本都是图标类型按钮，明眼用户能够通过图标形态晓得按钮的含意。然而，对于视障人士，不能扫动聚焦意味着不能通过读屏朗诵图标的按钮含意，所以要保障所有按钮可获取焦点被读屏性能辨认，并可能依照“从左到右，从上到下”的天然程序或性能逻辑程序扫动。
解决方案：
- 在横竖屏切换时，重写容器视图的 accessibilityElements 办法。
- 对可交互页面元素按坐标进行排序，保障扫动遍历程序。
- 在横屏状态下，调整可交互元素父视图，确保元素在父视图外部，从而保障元素可通过点击聚焦。
适配后成果如下：
https://gw.alicdn.com/mt/LB1sp7T3Rr0gK0jSZFnXXbRRXXa.mp4
5 设计中的同理心
以下的几个典型案例，对于明眼用户来说齐全没有应用上的阻碍，然而对于视障用户而言却打断了主链路的应用体验，使得他们须要身边视力健全敌人的帮忙能力进行下一步操作或者退出以后页面。
领取链路问题
应用痛点：
“在购买会员页面，焦点过于零散，套餐区域和领取区域错乱，且选中状态缺失；领取形式未读出选中状态；页面返回按钮未加标签。”
在优酷的购买会员页面，因为会员类型的多样，再加上促销折扣流动的投放，存在大量数字文本 View 展现。
明眼用户能够通过 View 的嵌套蕴含关系来断定以后选中类型的会员价格，然而视障人士通过扫动读屏时，显示过于零散，须要正当设置读屏 View 的颗粒度，并可读出以后是否选中状态。
解决方案：
- 依据会员套餐类型整体朗诵，解决过于零散问题。
- 在以后选中的领取形式或套餐类型设置 selected 为 true。
- 返回按钮减少 setContentDescription“返回”并增加角色“按钮”。
适配成果如下：
https://gw.alicdn.com/mt/LB1GI.H3Rr0gK0jSZFnXXbRRXXa.mp4
状态折叠问题
应用痛点：
“登录时想用新浪微博登录，但找不到入口。”
无障碍提醒：更多登录形式折叠起来的状态（左侧）；更多登录形式全副开展的状态（右侧）
为了让登录页面简洁明快，同时举荐用户优先应用淘宝和支付宝登录，优酷客户端的登录界面将一些不罕用的登录形式折叠起来，明眼用户能够通过点击“更多形式登录”开展查看其余登录形式。然而视障人士在应用时，须要读屏提醒以后折叠状态，并提醒为按钮，用户才会明确理解到这个区域能够点击开展。
解决方案：
- “更多登录形式”设置“按钮”角色。
- 当取得焦点时提醒以后折叠状态，双击可切换状态。
- 当切换状态时，及时语音提醒状态切换后果。
适配后成果如下：
https://gw.alicdn.com/mt/TB1_uIu3FT7gK0jSZFpXXaTkpXa.mp4
半屏弹层焦点透底问题
应用痛点：
“很多页面都是弹层，焦点并不会主动切换到顶层半屏页，导致切换焦点时，焦点透到底层。”
在优酷的播放页，页面上半部分为播放器，下半部门为周边视频举荐或者全集界面。为了不打断用户看剧的体验，很多像简介、互动等内容都是通过半屏 View 容器关上。然而，视障人士是通过切换焦点扫动等形式进行页面切换，如果焦点还停留在底部 View 层，这对于阻碍用户是十分不敌对的。
解决方案：
- 关上半屏时主动切换焦点至半屏页第一个元素。
适配后成果如下：
https://gw.alicdn.com/mt/TB1z7wG3KL2gK0jSZFmXXc7iXXa.mp4
通过以上介绍的无障碍典型案例适配，以及特定场景交互流程的深度适配，优酷实现了次要链路的无障碍体验全面降级，并通过了深圳市信息无障碍研究会业余视障测试工程师对这些问题的测试验收。
从优酷 2020 年 11 月份的版本开始，视障用户能够应用优酷客户端失去更加顺畅的无障碍观影体验，领会到优质视频内容带来的高兴。
四 总结
视障人士在应用优酷 App
通过开发工程师们的一直致力，优酷技术团队在一个月工夫内，与行业合作伙伴严密单干，发展了优酷客户端次要链路的无障碍体验优化。然而，作为视频行业的头部 App，本次优酷无障碍体验优化只是实现了阶段性指标，还有更多页面场景的无障碍体验须要持续打磨和欠缺。
在优酷主客 App 将来的迭代过程中，优酷会把无障碍体验优化作为开发和测试的常态化工作，也会建设相应的无障碍适配检测机制和标准卡口，确保优酷 App 的主链路持续保持低劣的无障碍化体验。咱们将以本次体验优化为契机，把优酷客户端以及视频行业类 App 的无障碍体验做到一个新高度。
作为业内当先的在线视频平台，优酷不仅通过技术适配提供了欠缺的客户端无障碍体验，咱们还和中国盲文图书馆进行深度单干，建设无障碍剧场，继续将带有旁白口述等特色内容提供给宽广视障用户。咱们心愿通过无障碍化专区的建设，为视障群体提供更加优质的内容和观影体验，让视障群体真正享受到高质量视频内容带来的高兴。
无障碍适配并没有很高的技术门槛，更多的是须要大家具备同理心，从视障用户的视角发现应用中的痛点，解决视障用户遇到的体验问题。
原文链接
本文为阿里云原创内容，未经容许不得转载。