盲人也能用，优酷App做了哪些无障碍实践？

一 前言

随着智能手机的全面普及&＃xff0c;移动互联网已经渗透到我们生活的方方面面&＃xff0c;并且给我们的生活带来了巨大的变化。我们每天上网看电影、追热剧、看综艺&＃xff0c;对智能手机带来的便利观影体验已经习以为常。

但是&＃xff0c;你可曾想过&＃xff0c;在我们使用眼睛获取大量信息的同时&＃xff0c;这些看似触手可及的视频消费体验对于部分人群来说是极其奢侈的&＃xff1a;

我一直在哭&＃xff0c;一直在哭&＃xff0c;哭我没有新鞋子穿。直到有一天&＃xff0c;我发现有人没有脚......
—— 海伦·凯勒

我国目前有1700多万视障者&＃xff0c;这个庞大的群体&＃xff0c;因为种种原因无法通过眼睛看清世界&＃xff0c;很多人只能感受到微光甚至全盲。

正因为他们不能视物&＃xff0c;他们比明眼人更需要借助智能手机来和世界对话&＃xff0c;也同样拥有对高质量视频内容的娱乐诉求。视频类App就像是架设在视障人士和音视频内容之间的一道桥梁&＃xff0c;如果这道桥梁崎岖不平甚至充满陷阱&＃xff0c;我们很难想象一个视障人士能够顺利的走到对岸。无障碍体验适配就像是在应用界面架设一条盲道&＃xff0c;让视障人士能够像明眼人一样顺畅操作App。

2020年是一个不平凡的年份&＃xff0c;全国人民响应号召&＃xff0c;战疫情&＃xff0c;不出门&＃xff0c;戴口罩。视障用户也和全国人民一样&＃xff0c;经历了漫长的隔离期。在疫情期间&＃xff0c;视频类App成为被高频使用的刚需应用。

然而&＃xff0c;我们却从各种反馈渠道听到了视障群体无奈的声音&＃xff1a;

图片内容为&＃xff1a;盲文&＃xff0c;真的是太难了。你们能到处在外郊游、露营时&＃xff0c;因为基础设施不无障碍&＃xff0c;盲人在家&＃xff1b;你们跟我们一样只能在家时&＃xff0c;我们悲哀地发现&＃xff0c;我们连在家追个剧都成了奢望。

优酷作为业内领先的在线视频平台&＃xff0c;有责任让每一个人都获得最佳的视频消费体验&＃xff0c;感受到优质视频内容带来的快乐。为此&＃xff0c;我们启动了对优酷客户端进行全面无障碍体验优化的工作&＃xff0c;希望帮助视障用户更接近于真实地“看到”或者“听到”外面的世界。

视障人士和我们操作手机方法有一些不同&＃xff0c;他们通过读屏软件朗读App界面元素&＃xff0c;根据所听到的内容决定下一步操作。

比如&＃xff1a;Android在【设置】中找到【辅助功能】或者【无障碍】打开【TalkBack】&＃xff1b;iOS通过【设置】->【辅助功能】&＃xff0c;打开【旁白】&＃xff0f;【VoiceOver】来开启读屏功能。

在读屏打开后&＃xff0c;视障用户可用如下的无障碍操作手势来操作App&＃xff1a;

• 单指触摸&＃xff1a;聚焦选中界面上的控件
• 单指右扫&＃xff1a;切换下一个焦点
• 单指左扫&＃xff1a;切换上一个焦点
• 单点双击&＃xff1a;激活当前聚焦的控件
• 两指&＃xff0f;三指拖动&＃xff1a;滚动&＃xff0f;翻页

为了适配读屏软件等辅助工具对应用的信息获取、朗读和操作&＃xff0c;优酷App需要在焦点设置、添加控件标签内容等方面进行细致的优化。

二 专业合作

为了更加真实地收集视障用户在使用优酷客户端时的痛点和问题&＃xff0c;为用户提供良好的无障碍体验。我们和深圳市信息无障碍研究会&＃xff08;http://www.siaa.org.cn/&＃xff09; 进行深度合作&＃xff0c;借助无障碍研究会的专业视障测试工程师的经验和领域知识&＃xff0c;收集真实视障用户使用场景中存在的问题&＃xff0c;以Bug的形式录入优酷内部QA管理系统&＃xff0c;经过统一适配和测试后&＃xff0c;交给无障碍研究会的专业视障测试工程师进行测试验收。

三 深度适配和体验优化

无论是Android还是iOS&＃xff0c;系统本身就有对无障碍技术的官方支持。比如TextView文本控件、Button按钮控件可以被系统读屏功能直接聚焦并朗读控件类型&＃xff0c;能够提供给用户基本的无障碍使用体验。

但是&＃xff0c;靠系统自身的支持是无法达到理想的无障碍用户体验的。随着移动互联网的快速发展&＃xff0c;各种新技术栈持续被引入优酷客户端&＃xff0c;优酷业务和页面呈现的内容的复杂度越来越高。无论是各种新技术栈&＃xff0c;还是各种复杂的页面&＃xff0c;都有缺乏无障碍支持或者使用体验较差的问题。

例如&＃xff1a;

• 焦点合并问题&＃xff1a;视频卡片上的图片&＃43;文字内容 是一个整体&＃xff0c;但只能分开取到图像和标题并朗读出来。
• 内容提示问题&＃xff1a;优酷客户端界面上有大量的可点击组件&＃xff0c;但由于缺乏控件类型属性&＃xff0c; 是用户不知道这是一个什么控件&＃xff0c;并且是否可进行点击等操作。
• 焦点错乱问题&＃xff1a;播放器控制界面上有大量的图形按钮&＃xff0c;用户使用读屏操作扫动浏览页面时是线性聚焦控件的。控件未设置焦点顺序时&＃xff0c;用户的手指扫动切换焦点可能不能遵从合适的&＃xff08;界面分布或功能逻辑&＃xff09;顺序切换。

这些问题&＃xff0c;都需要由应用层的研发同学进行专门适配。

经过对信息无障碍研究会测试工程师的专业反馈进行梳理&＃xff0c;优酷针对这些问题进行了全面的深度适配和体验优化&＃xff0c;主要体现在如下方面&＃xff1a;

1 适配范围

经过多年的技术迭代和演进&＃xff0c;优酷采用了多技术栈混合的开发模式&＃xff0c;引入了诸如Weex、Flutter等跨平台框架。本次体验优化&＃xff0c;不仅对Android Native、iOS Native等原生开发的页面进行了深度适配&＃xff0c;对核心场景的Weex、Flutter、H5页面也进行了全面体验优化。

2 业务架构层适配

近年来&＃xff0c;优酷客户端通过全面的技术重构&＃xff0c;将各主要页面的渲染架构统一&＃xff0c;也积累出大量公共渲染控件库和标准业务组件库。优酷的统一技术架构以及统一的标准化组件实现&＃xff0c;使得这次无障碍体验优化的适配事半功倍。

比如优酷分发场景大量使用同层渲染组件技术&＃xff0c;将业务组件的视图进行图层合并&＃xff0c;以提高渲染速度。在这次无障碍适配中&＃xff0c;渲染框架层统一按照“视频标签&＃xff08;独播、预告等&＃xff09;&＃43; 视频名称 &＃43; 简介 &＃43; 评分&＃xff08;更新进度等&＃xff09;”来拼接同层渲染组件的朗读文案&＃xff0c;对这些组件提供经过顺序优化的标签内容。

3 适配中的典型问题

页面元素【更准确】朗读

图标类按钮和iconfont&＃xff0c;需要额外添加contentDescription属性以及准确、简洁的内容才可以保证朗读正确。

页面View【按需】获取焦点

嵌套型View或组件&＃xff0c;当传达的是同一信息时&＃xff0c;在最外容器层设置大焦点对于视障用户更友好。比如“我的评分”&＃xff0c;在图标和文字的容器层设置焦点和朗读内容&＃xff0c;注意&＃xff0c;角色名&＃xff08;如∶按钮&＃xff09;不应写入标签内。

图标、自定义View设置角色、状态【更优雅】

能点击的图片型按钮或者自定义View的按钮&＃xff0c;明确设定“角色”名称&＃xff0c;比如“按钮”、“链接”等角色。

比如页面左上角的“返回”按钮&＃xff0c;需要设置按钮角色&＃xff0c;最终朗读内容为“返回&＃xff0c;按钮”。

弹窗或弹层自动切换焦点【更人性化】

弹窗或弹层时&＃xff0c;自动使上层容器的第一控件&＃xff08;如标题或通知内容&＃xff09;获取焦点&＃xff0c;视障用户无须二次切换焦点&＃xff0c;更符合视障用户使用体验&＃xff0c;更加体现人性化。

有状态类型的切换&＃xff0c;提示状态表更【更易懂】

切换按钮&＃xff0c;增加状态朗读&＃xff0c;并在切换时及时朗读切换后状态&＃xff0c;使用户更易懂。

通过对页面元素设定合理的焦点&＃xff0c;优雅的朗读标签、设置角色等可以解决无障碍适配80%的问题 &＃xff0c;整体的产品呈现接近明眼人的使用体验。

4 深度交互适配

但是&＃xff0c;为了让视障用户能更方便地使用优酷App&＃xff0c;优酷技术中心的开发工程师们通过广泛收集视障用户的真实反馈&＃xff0c;在主链路场景重点接近障碍人士的使用痛点&＃xff0c;做了深度的交互适配优化。

以下举出几个案例&＃xff1a;

播放器交互适配

优酷的播放器在视频起播之后&＃xff0c;5秒后自动隐藏控制界面以免遮挡视频&＃xff0c;方便用户欣赏视频内容。

可是&＃xff0c;这个面向明眼人群设计的体验优化却给视障用户带来了困扰&＃xff1a;

“在观看视频时&＃xff0c;播放器控制栏自动消失&＃xff0c;来不及操作&＃xff1b;播放器不能获取焦点&＃xff0c;播放器控制栏一直处于隐藏状态&＃xff0c;无法进行播放、暂停、全屏切换等操作&＃xff1b;不知道当前播放器控制栏是否处于隐藏还是显示状态。”

播放器控制栏在静默5秒后自动隐藏&＃xff0c;是根据正常用户交互习惯开发的交互优化。

但是&＃xff0c;视障人士在使用播放器时&＃xff0c;这个功能反而成了用户的负担。经过反复模拟用户的使用场景&＃xff0c;最佳实践就是将控制权完全交给视障用户&＃xff0c;并且及时提醒播放器控制界面的状态变化。

我们的解决方案&＃xff1a;

• 在开启读屏模式时&＃xff0c;播放器控制栏不再自动隐藏&＃xff0c;持续保留在屏幕之上。
• 播放器设置Touch焦点&＃xff0c;可拾取焦点&＃xff0c;双击可唤起显示播放控制栏&＃xff0c;再次双击可隐藏播放控制栏。
• 播放器控制栏在显示&＃xff0f;隐藏时进行读屏提示“已显示&＃xff0f;隐藏播放控制栏”。

播放页面横竖屏适配

使用痛点&＃xff1a;

“播放器在横屏状态下&＃xff0c;部分按钮无法通过单指扫动聚焦。影响了正常

使用。”

播放器控制界面中的按钮基本都是图标类型按钮&＃xff0c;明眼用户可以通过图标形状知道按钮的含义。但是&＃xff0c;对于视障人士&＃xff0c;不能扫动聚焦意味着不能通过读屏朗读图标的按钮含义&＃xff0c;所以要保证所有按钮可获取焦点被读屏功能识别&＃xff0c;并能够按照“从左到右&＃xff0c;从上到下”的自然顺序或功能逻辑顺序扫动。

解决方案&＃xff1a;

• 在横竖屏切换时&＃xff0c;重写容器视图的accessibilityElements方法。
• 对可交互页面元素按坐标进行排序&＃xff0c;保证扫动遍历顺序。
• 在横屏状态下&＃xff0c;调整可交互元素父视图&＃xff0c;确保元素在父视图内部&＃xff0c;从而保证元素可通过点击聚焦。

5 设计中的同理心

以下的几个典型案例&＃xff0c;对于明眼用户来说完全没有使用上的障碍&＃xff0c;但是对于视障用户而言却打断了主链路的使用体验&＃xff0c;使得他们需要身边视力健全朋友的帮助才能进行下一步操作或者退出当前页面。

支付链路问题

使用痛点&＃xff1a;

“在购买会员页面&＃xff0c;焦点过于零散&＃xff0c;套餐区域和支付区域错乱&＃xff0c;且选中状态缺失&＃xff1b;支付方式未读出选中状态&＃xff1b;页面返回按钮未加标签。”

在优酷的购买会员页面&＃xff0c;因为会员类型的多样&＃xff0c;再加上促销折扣活动的投放&＃xff0c;存在大量数字文本View展示。

明眼用户可以通过View的嵌套包含关系来判定当前选中类型的会员价格&＃xff0c;但是视障人士通过扫动读屏时&＃xff0c;显示过于零散&＃xff0c;需要合理设置读屏View的颗粒度&＃xff0c;并可读出当前是否选中状态。

解决方案&＃xff1a;

• 根据会员套餐类型整体朗读&＃xff0c;解决过于零散问题。
• 在当前选中的支付方式或套餐类型设置selected为true。
• 返回按钮增加setContentDescription“返回”并添加角色“按钮”。

状态折叠问题

使用痛点&＃xff1a;

“登录时想用新浪微博登录&＃xff0c;但找不到入口。”

无障碍提示&＃xff1a;更多登录方式折叠起来的状态&＃xff08;左侧&＃xff09;&＃xff1b;更多登录方式全部展开的状态&＃xff08;右侧&＃xff09;

为了让登录页面简洁明快&＃xff0c;同时推荐用户优先使用淘宝和支付宝登录&＃xff0c;优酷客户端的登录界面将一些不常用的登录方式折叠起来&＃xff0c;明眼用户可以通过点击“更多方式登录”展开查看其他登录方式。但是视障人士在使用时&＃xff0c;需要读屏提示当前折叠状态&＃xff0c;并提示为按钮&＃xff0c;用户才会明确了解到这个区域可以点击展开。

解决方案&＃xff1a;

• “更多登录方式”设置“按钮”角色。
• 当获得焦点时提示当前折叠状态&＃xff0c;双击可切换状态。
• 当切换状态时&＃xff0c;及时语音提示状态切换结果。

半屏弹层焦点透底问题

使用痛点&＃xff1a;

“很多页面都是弹层&＃xff0c;焦点并不会自动切换到顶层半屏页&＃xff0c;导致切换焦点时&＃xff0c;焦点透到底层。”

在优酷的播放页&＃xff0c;页面上半部分为播放器&＃xff0c;下半部分为周边视频推荐或者选集界面。为了不打断用户看剧的体验&＃xff0c;很多像简介、互动等内容都是通过半屏View容器打开。但是&＃xff0c;视障人士是通过切换焦点扫动等方式进行页面切换&＃xff0c;如果焦点还停留在底部View层&＃xff0c;这对于障碍用户是非常不友好的。

解决方案&＃xff1a;

• 打开半屏时自动切换焦点至半屏页第一个元素。

经过以上介绍的无障碍典型案例适配&＃xff0c;以及特定场景交互流程的深度适配&＃xff0c;优酷完成了主要链路的无障碍体验全面升级&＃xff0c;并通过了深圳市信息无障碍研究会专业视障测试工程师对这些问题的测试验收。

从优酷2020年11月份的版本开始&＃xff0c;视障用户可以使用优酷客户端得到更加顺畅的无障碍观影体验&＃xff0c;体会到优质视频内容带来的快乐。

四 总结

视障人士在使用优酷App

通过开发工程师们的不断努力&＃xff0c;优酷技术团队在一个月时间内&＃xff0c;与行业合作伙伴紧密合作&＃xff0c;开展了优酷客户端主要链路的无障碍体验优化。但是&＃xff0c;作为视频行业的头部App&＃xff0c;本次优酷无障碍体验优化只是完成了阶段性目标&＃xff0c;还有更多页面场景的无障碍体验需要继续打磨和完善。

在优酷主客App未来的迭代过程中&＃xff0c;优酷会把无障碍体验优化作为开发和测试的常态化工作&＃xff0c;也会建立相应的无障碍适配检测机制和规范卡口&＃xff0c;确保优酷App的主链路持续保持优良的无障碍化体验。我们将以本次体验优化为契机&＃xff0c;把优酷客户端以及视频行业类App的无障碍体验做到一个新高度。

作为业内领先的在线视频平台&＃xff0c;优酷不仅通过技术适配提供了完善的客户端无障碍体验&＃xff0c;我们还和中国盲文图书馆进行深度合作&＃xff0c;建设无障碍剧场&＃xff0c;持续将带有旁白口述等特色内容提供给广大视障用户。我们希望通过无障碍化专区的建设&＃xff0c;为视障群体提供更加优质的内容和观影体验&＃xff0c;让视障群体真正享受到高质量视频内容带来的快乐。

无障碍适配并没有很高的技术门槛&＃xff0c;更多的是需要大家具有同理心&＃xff0c;从视障用户的视角发现使用中的痛点&＃xff0c;解决视障用户遇到的体验问题。

每个人都应该平等享受科技带来的便利&＃xff0c;愿移动互联网也有盲道可走&＃xff0c;愿每个人都被生活善待。

原文链接

本文为阿里云原创内容&＃xff0c;未经允许不得转载