借助 Google 无障碍功能,小红书打造贴心服务|Android 开发者故事

b3d44eac434a8682b6c97c47d1108596.png

发现、记录、分享,视频、图文、直播……如今的互联网世界已经如此丰富多彩,吸引着无数人每天造访。但有一个事实可能被忽视了: "无数人",并不等于 "每一个人"。尤其是对视力障碍人群来说,"丰富多彩" 的多媒体世界似乎总是那么遥远。

根据世界卫生组织的数据,全球只有 36% 的屈光不正人口,以及 17% 的白内障人口接受了适当干预,绝大多数视力受损人口并没有得到必需的医学支持,光是在我国就有 1,700 多万视觉障碍人口 (屈光不正、白内障、糖尿病、老龄化等都可能造成视觉障碍)。在日常生活中也有许多临时性的视力障碍场景,比如手术后的恢复期,或者其他不便于查看屏幕的环境等,都会让人们无法通过眼睛接收来自屏幕的信息。

  • 盲症和视力损害
    https://www.who.int/zh/news-room/fact-sheets/detail/blindness-and-visual-impairment

但有一点是毋庸置疑的,即便是在光芒无法触达的地方,生活也依然在继续着。对于坚守着 "Inspire Lives 分享和发现世界的精彩" 使命的小红书团队来说,这些生活也同样精彩,这些用户也同样重要。全面支持 Android TalkBack 屏幕阅读服务,就是小红书团队给这些用户交出的答卷。

07d2a9c7ec1e48ecc768236bc78a0009.png

△ 小红书在 10 月 15 日国际盲人日正式全面支持 TalkBack

平台级的无障碍支持

对于任何打算提供无障碍功能的产品团队来说,"标准化" 都是一个必须要解决的问题: 对于视力健全的人群,每使用一个应用都要换一种交互如果能称作 "麻烦",对视力障碍用户来说则是 "天堑" 了。

这也是 Android 平台的屏幕阅读器 TalkBack 要做的事情: 标准的、全局的设置和无障碍交互方式,可以让用户用尽可能小的成本掌握最通用的屏幕阅读交互方式。而且很多手势操作甚至和非 TalkBack 下的交互只是多用一根手指而已,对需要临时使用 TalkBack 功能的用户来说,这也极大降低了切换门槛。

87a08c6de539250d0c58a8662695e1f9.png

△ 小红书从 "登录/注册/个人信息保护提示" 这一步开始就支持 TalkBack

ac13720f134a76c0aeb2a094d4f8ac67.jpeg

6de69590fb82683186a665b771f2fe9a.jpeg

outside_default.png

△ 左右滑动查看

手指滑到哪个控件就会将其内容朗读出来

outside_default.png

9e580729f1c55a7dc9a22669c54059d1.png

△ 三指点击屏幕就可以打开全局的 TalkBack 菜单

  • 开始在 Android 设备上使用 TalkBack
    https://support.google.com/accessibility/android/answer/6283677?hl=zh-Hans

无障碍框架本身也是脚手架

其实对小红书团队来说,无障碍体验本身并不是一个陌生的话题。毕竟现代应用中常见的 "字体大小设置" 以及设计中经常涉及的 "颜色对比度测试" 本身也有在一定程度上照顾到了弱视用户。但对于完全的 "触摸-语音" 交互模式,团队没有闭门造车,在一口气通读了 Google 无障碍开发指南之后,决定将所有的无障碍问题 (设计、开发和测试) 整合到一起统筹考虑。

  • 无障碍开发指南
    https://developer.android.google.cn/guide/topics/ui/accessibility

自动化测试: 找出薄弱点

TalkBack 的屏幕阅读交互上是基于 "触摸" 的,如果一个控件尺寸太小,用户压根就触摸不到,自然也就无法被朗读出来。所以团队会先使用 Google 专门为开发者们提供的 "Accessibility Scanner (无障碍扫描仪)" 应用来做一轮辅助测试,基于页面扫描结果中对触摸目标大小的修改意见来调整界面元素尺寸。

057a654a379ff6ec59098871d343ad2a.png

fdca210400fc4d9b8a8a419a9bab337e.png

c6d4619f25d6391f0762f078ef9486ce.png

△ 左右滑动查看

 Accessibility Scanner 能自动扫描屏幕元素,并给出尺寸和对比度等建议

  • 无障碍扫描仪
    https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor

设计: 规范化的描述逻辑

设计的目标是将繁复的操作落实到一套简明的范式中去。小红书的设计团队完整阅读了 Material Design 无障碍设计,并对其中的无障碍设计指南进行了消化整理,基于 TalkBack 所定义的规则,为小红书应用制定了一整套 TalkBack 的热区、手势和文案规范。

2bc73cdc79d661e86feeb0abef44fdfa.jpeg

△ 小红书团队的 TalkBack 规范

有些规范其实是 "反开发常识" 的,比如有些嵌套层级比较多或者内容比较密集的控件,从开发角度看需要做好标签和描述,但如果把这些都事无巨细地朗读出来,用户恐怕早就不耐烦了。这时团队会凑在一起商量如何对界面的热区进行更合理的划分,以及哪些信息可以被整合起来。比如首页双列笔记卡片可以作为整体来进行播报,只要将卡片的核心信息做整合,那么在用户界面层级上就只需要播报一次父布局内容即可,一来可以降低适配复杂度,二来也能减少用户的使用负担。

0c4842875cd881d2fc40b00884163389.jpeg

△ 比如 "图片" "文本" "头像" "点赞" 等控件的朗读内容被合并简化成笔记卡片,一次性、有逻辑地完整读出 "Meow 的小家说,要不是亲自装修,真不敢相信这是同个卧室,344 赞"

开发: 难度不高,好处却不少

由于涉及到常规和 TalkBack 两套交互方式,以及既有代码也需要进行一些改造,开发团队一开始会在涉及到 TalkBack 无障碍功能时额外留出 2 天的工期。

不过好在 Google 的无障碍 API 的设计比较简洁,能直接覆盖 80% 以上的交互场景,其他不能直接适配的情况基本也只需要处理一下阅读器播报的顺序即可,甚至都不需要额外添加自定义的无障碍适配。

随着团队对 Android 无障碍框架的熟悉,越来越多更通用的无障碍工具类被沉淀出来,各个业务模块的适配成本肉眼可见的降低,在无障碍适配工作的后期,为每个无障碍功能需要留出的额外工期也只需要 1 天了。

c547970cb4953a2fb814b06c29cf128e.png

0a4b86a29199c5d46e50af40132d12b1.png

306bd35d404cd69097003a09b60d0c5d.png

outside_default.png

△ 左右滑动查看

团队会基于自身业务对官方的 Accessibility 框架做进一步封装

outside_default.png

意外的收获是,因为 TalkBack 的运行依赖元素的命名和描述,这反而倒逼团队对界面组件的位置和命名进行了彻底的自查。一些之前没注意到的问题被 "顺便" 解决了: 同一语义图形的命名文案得到了统一,个别弹窗没有退出按钮的问题得到了修复。

2d6939a6dba4b9f3e3954f2605f0367c.png

△ Android Studio 里检查界面元素

深入测试: 一切为了 "大考"

邀请团队外部真实的视障用户来进行测试是团队所有人都知道的 "大考"。但对一个功能模块繁多的应用来说,不可能每次有个小调整都 "大考" 一次。

因此团队对无障碍模式下的用户操作手势进行了深入的学习,同时也会开放性地吸纳其他应用中无障碍体验实践的经验,将测试任务拆分到各个业务模块里。在这些业务模块都完成一轮迭代后,再进行整体的无障碍功能集成测试,组织产品、设计、开发、测试全流程人员参与功能的探索性测试。待这一轮测试搜集到的反馈意见全部优化、修复完毕后,才会邀请外部视障真实用户来对产品进行 "大考"。

7df95a0ea4b87d0dc6ee5c5f1d781d5a.png

7588cc76d87db9c6806b05e58001ec4c.png

outside_default.png

△ 左右滑动查看

真实用户测试是会让团队里每一个成员都紧张的 "大考"

outside_default.png

无障碍是团队努力的成果

小红书的无障碍团队是一个由专业接口人统筹,由各业务部门支持的联合项目组。专业接口人负责无障碍专业知识沉淀、规则制定与项目管理,以保证无障碍的标准化和品质。这个项目组的工作始于大量的用户访谈和市场调研,以确保公司层面能理解 TalkBack 等无障碍体验的重要性,并获得公司层面的资源支持。

各业务部门则负责确保无障碍体验深入到具体的产品设计、研发与测试工作中。比如在实际开发流程里,无障碍适配工作启动前会有专人对各个业务模块的开发者们进行无障碍支持宣讲,并整理好开发文档、常见的无障碍适配场景和注意事项。

78ed23b5233d4bc74fe91f824df3356a.jpeg

fd9eec6f3cc479ae7500164a9572f780.jpeg

e091e7cc2c7e214520278fd0e4c368d7.jpeg

eaa4263c56d057609ee9588288174651.jpeg

outside_default.png

△ 左右滑动查看

从公司层面至上而下,和从个人层面至下而上推进无障碍体验实现

outside_default.png

无障碍功能正式上线后,还会有商务、公关、内容编辑等职能部门参与进来,配合进行团队内外部的合作宣传与活动策划。

在整个团队的努力下,小红书在 Android 平台首次适配 TalkBack 功能只耗时 3 个月 (2023 年 7 月立项,9 月底随小红书应用 8.9 版本提交发布)。基本覆盖了核心用户流程: 注册登录、首页导航、笔记消费与互动、搜索、个人主页、直播与笔记发布等十多项核心功能。

"我一下子感觉全面大升级,不是小升级。感觉一下子好操作了很多···以前就感觉哪里哪里都不顺"

——小红书用户反馈

ab6d4f54e6422fe0d4ef15d6c45474d1.png

△ 小红书 TalkBack 功能上线后用户反馈

888f9fe57d60162b2f4392b87ef880b7.png

△ 官方在 10 月 15 日国际盲人日发起的 "无碍分享,有爱生活" 专项活动

一个提醒: 好心也会办坏事

在某次 "大考" 之前,因为有些功能还没有完全完成适配,为了确保用户能获得 "正确的" TalkBack 体验,团队决定屏蔽部分内容,只让用户使用已经完成适配的功能。

结果专家用户对这个测试版本非常反对——虽然现在有些功能不好用不易用,但是至少能够摸索着使用,后续可以根据问题再优化,但是如果直接屏蔽功能等于区别对待了视障用户,也割裂了社区。

"我们要对用户一视同仁,无障碍功能适配还不完善不是用户的问题,而是我们的问题。"

——小红书无障碍团队

汲取这个教训后团队很快得到了回报。一位名为 "寅青看世界" 的用户想去博览会,但是主办方告知导盲犬无法入内,她在小红书上发布该事件的笔记后,大量的小红书网友为她提供了维权建议。最终主办方更改了规定,欢迎导盲犬进入。

无论是被帮助的人,还是伸出援手的人,在无障碍功能的帮助下,大家没有了身体机能上的区别,只有一个又一个不一样,却又联系在一起的生活。

"让每个人的生活都更美好,就是小红书社区的价值。" 

——小红书产品团队负责人

拥抱更多的生活

小红书对无障碍体验的态度只有一个: 加码。

无障碍项目在小红书公司内部的季度评比中获得了表彰,后续多个版本、多个平台的无障碍适配已经在陆续推进中。小红书团队还会将无障碍体验的支持覆盖到更多的用户群体中去,以满足有着各样不同需求的无障碍用户人群,同时会在线上线下举办主题活动,提供更多无障碍功能的推广、支持内容和服务,提高其在社区中的能见度。

考虑到老年人群体被无障碍体验问题困扰比较多,还会推出 "老年居家友好指南" 等活动,让老年用户社区也能积极参与到产品的使用和迭代中来。

cd99048bf3f6f8b06838554ad7447e43.png

6fcbf74507039ea494f5fedf6fd5c039.png

132c5f90b30fb0a0a2ccf3be147faa9c.png

outside_default.png

△ 左右滑动查看

"老年居家友好指南" 活动

outside_default.png

随着时代的发展,"无障碍体验" 对开发者的意义也愈发重大: 它不仅意味着更贴心的设计,更意味着实际的增长机遇和发展前景。

我们已经看到了小红书团队的答卷,这份答卷还没有完成,也许一直不会完成——因为应用的功能会继续演进,因为要覆盖的无障碍场景还会更多。但只要小红书团队还在考场上,"大考" 的考官们就会给出一个又一个的好评。

我们期待着在 Android 平台看到更多的开发者行动起来,为更多的用户打造贴心、周到的无障碍服务,让更多的用户得以加入到您的社区中来!


d3fdc6293bb0e5f01c1aa757acaf1abf.png

8075ccd4e615befd3911ddd898e7cc5f.png

a18af3121301cca61c125df5977632c9.png

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值