适老化&无障碍的前端体验探索—— 为更多人提供便利和自由

1. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 第十六届 D 2 前端技术论坛适老化&无障碍前端体验探索为更多群体提供便利和自由陈洁婷腾讯 | 用户研究与体验设计部(CDC) | 前端开发

2. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 陈洁婷

3. 目录 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 1 2 3 4 背景介绍改造思路具体方案总结展望 BACKGROUND PLANNING CASES THINKING

4. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 1 2 3 4 背景介绍改造思路具体方案总结展望

5. 人口老龄化程度加深，残障人群数量大 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 2.6亿 ( ↑ 5.44%) 17.95% 18.70% 0-14岁 15-59岁 60岁及以上 63.35% 第七次全国人口普查结果 • • • • 听力残疾约 2780 万（2020年数据）视力残疾约 1700 万（2016年数据）肢体残疾约 2472 万（2012年数据） …

6. 国内适老化、无障碍情况不容乐观老伯无健康码上⻋被拒载，被谴责 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 信息无障碍程度低残障用户难以使用

7. 国家发出号召 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 工信部、国务院、各地政府印发通知、方案，奖惩结合（纳入企业信用体系）用 ❤ 发电专项改造法制法规

8. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 1 2 3 4 背景介绍改造思路具体方案总结展望

9. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 信息无障碍 Accessibility (a11y) 任何人在任何情况下都能平等包括“老年人” 的、方便地、无障碍地获取信息、利用信息。无障碍改造听力障碍运动障碍适老化改造认知障碍视力障碍

10. 专项改造工作要想顺利持续开展，需要多方协同 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 不止是业务完成改造就完事企业标准实践方法评测工具样本库优秀案例

11. 方案改造、内容沉淀产品迭代经验分享向工信部反馈建议，按要求迭代合规新闻微信音乐云 CDC 甲方收集各团队情况，盘点共性内容如：字体使用范围盘点解决思路说明用户反馈支撑设计规范盘点智慧颜色 2、9月30日，改造完成。 3、10月31日，公布结果评审沉淀搭建渠道，展示内容

12. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 1 2 3 4 背景介绍改造思路具体方案总结展望时⻓原因，本分享更多聚焦在移动端下适老化相关内容

13. 发现问题：根据国标、行标文件 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 网站类国家标准 GB/T 37668- 2019 互联网网站适老化通用设计规范 APP类行业标准 YD/ T1822- 2008 国家标准 GB/T 37668- 2019 移动互联网应用（APP）适老化通用设计规范

14. 发现问题：梳理“不适老”、“有障碍”的缺陷 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 腾讯兔小巢一站式用户反馈解决方案 “不适老” “有障碍” • 字型大小无法调整 • 对比度不安全达标 • 焦点热区不达标 • • • • 部分元素⻆色错误部分元素无标签部分元素无焦点焦点冗余、穿透

15. D2 前端技术论坛 3 具体方案可感知可操作可理解鲁棒性安全性 Perceivable Operable Understandable Robust Secure 支持字型大小调整关注信噪比设计足够对比度声明正确的⻆色添加无障碍标签 P D 2 F R O N T E N D T E C H N O LO G Y F O R U M

16. 问题：断裂的用户体验——设置字体大小失效视频：原生系统支持字体大小调整 P 视频：微信支持字体大小调整视频：iOS(微信)下未适配字号 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 视频：Android(微信)下适配

17. D2 前端技术论坛 ? 关键点支持用户自主调整⻚面字体大小、缩放⻚面等延伸：⻚面支持双指缩放、支持横屏查看等 P D 2 F R O N T E N D T E C H N O LO G Y F O R U M

18. ? 思考：⻚面缩放就一键生效吗？关键取决于你写的 CSS 是否具有“防御性” P 图片来源：https://ishadeed.com/article/defensive-css/ D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M

19. 效果：⻚面支持跟随 WebView 调整字体而缩放微信默认 P 放大1.06倍放大1.15倍放大1.24倍 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 放大1.44倍（微信内最大）

20. 细节处理：消除⻚面刚打开时“闪烁”一次才变大问题 P D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 改造前改造后视频：⻚面打开时存在字体从小变大的表现（会闪一下）视频：⻚面打开后直接展示大字体效果

21. ? 关键代码 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 借助 MutationObserver 来精确获取⻚面缩放的时机 P

22. “大字体”带来新的问题 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 放大后的⻚面信噪比降低，需要适当调整交互改造前 P 改造中右侧普遍只能展示4个汉字，可读性差改造后调整布局，提升⻚面可读性、信噪比

23. “大字体”带来新的问题 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 次要内容可能抢占有限空间，需要精细化处理改造前 P 改造中头像等比增大，压缩了有限的空间改造后次要信息（头像区）不跟随等比缩放

24. ? 细节 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 合理使用不同⻓度单位，精细控制⻚面元素的缩放表现

25. 自研的“大字号”检测工具 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 通过脚本，自动放大文字通过OCR分析缩放前后的⻚面截图根据文本识别情况计算⻚面适配评分 P

26. 问题：“这颜色太浅了，这字我看不清楚” D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 方案：使用不让眼睛“受累”的对比度第十六届 D2 前端技术论坛第十六届 D2 前端技术论坛第十六届 D2 前端技术论坛 P 1.5 : 1 标准级别 WCAG(Web Content Accessibility Guidelines) 2 : 1 A级 (最低) AA级 AAA 级 (最高) 18pt 以下粗体 14pt 以下 < 4.5 4.5 : 1 7 : 1 18pt 以上粗体 14pt 以上 < 3 3 : 1 4.5 : 1 2.5 : 1 第十六届 D2 前端技术论坛 3 : 1 第十六届 D2 前端技术论坛 4.5 : 1 第十六届 D2 前端技术论坛 6 : 1 第十六届 D2 前端技术论坛 7 : 1

27. ⭐ 延伸：使用 prefers-*，提升⻚面的可访问性本质上是操作系统辅助功能的适配，也是体验设计连贯性的重要一环 P D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M

28. 调整前后效果对比首⻚调整对比度前 P D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 首⻚调整对比度后

29. 检测工具：应有尽有，都很好用对比度计算 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M Chrome 开发者工具 aXe 系列工具检查特定文字对比度开发环境实时检测对比度 CSS Overview（实验性功能） aXe DevTools 扫描网⻚所有元素对比度类似的还有Lighthouse、IBM Equal Access Accessibility Checker等 P 自研工具：测试流程中的对比度检查

30. 问题：图标按钮全都“听”不到 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 视障人士是怎样使用读屏软件听到界面内容的？主要操作： • 单指左右轻扫（选中元素） • 双指双击（激活元素） • 单指触摸（浏览、选中元素） • … 视频：视障人士使用兔小巢 P

31. 问题：图标按钮全都“听”不到 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 方案：使用语义化，辅以 WAI-ARIA 技术改造前改造后（空标签）（空标签） P 更多操作，按钮 2个赞，按钮 Sj79af%8sa…(图片名称，乱码) Chloe，链接（空标签）返回首⻚，按钮（空标签）表情，按钮为所有图标、图片添加无障碍标签（即替代描述）

32. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M ? 关键点使用正确的语义化标签(推荐)、WAI-ARIA 技术，让非装饰性元素能被辅助设备识别和操作以为例不被读屏软件识别，无朗读效果语义化标签（推荐做法）能被读屏软件识别，朗读为：返回主⻚，按钮 WAI-ARIA（当你需要的时候才使用） P

33. 检测工具：a11y 代码规范 React 版共计 30+ 规则，能检测出大部分常⻅问题，Vue、Angular 也有配套的包 P D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M

34. D2 前端技术论坛 3 具体方案可感知可操作可理解鲁棒性安全性 Perceivable Operable Understandable Robust Secure 设置合适的热区大小设计恰当的手势操作 O D 2 F R O N T E N D T E C H N O LO G Y F O R U M

35. 问题：可交互元素不容易被点到 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 44*44 point 苹果 HIG 建议的最小点触面积改造前改造后可点击区域是原来的接近 2.5 倍 O

36. 细节：具体情况具体分析 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 例如为了避免误操作（“防错原则”），不同操作结果的按钮热区大小也会有差异关闭标签：15 * 15 px 打开新的标签：30 * 30 px

37. ? 关键点 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 为所有可点击元素有针对性地定义大小合适的热区范围延伸：足够大的输出框等表单控件、点击热区位置设计（设置手指容易点到的位置） O

38. 检测工具：微信小程序 - 无障碍访问模式插件 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 微信官方文档 - 小程序 - 开发 - 工具 - 无障碍访问 O 微信开发者工具 > 无障碍访问模式插件工具截图 https://developers.weixin.qq.com/miniprogram/dev/devtools/aria.html 也有H5版本，敬请期待

39. 问题：过不了的验证环节 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 肢体活动能力退化也导致了一些问题拖拽类 O 点击类

40. 问题：过不了的验证环节 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 肢体活动能力退化也导致了一些问题视频：老人点中篮球似乎很困难 O 视频：老人看到说明文字带有“下方” 字样，而理解为"要往下拖拽方块" 视频：老人在读完“请点击⻩色字⺟(g) 对应的大写”后犹豫了一会，觉得应该是要点击⻩色的“g”，于是使劲点了下

41. 方案：通用的无障碍验证码只需要“等一等”，验证就通过了；老年人、残障人士都能用倒计时结束 O D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M

42. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M ? 关键点避免⻓按、拖拽/移、连续点击等对老年人不够友好的交互操作延伸：确保交互行为的简易性，例如 • • • • 上下滑动优于左右滑动点击操作优于输入操作支持一键操作 …

43. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 解决了不“适老”的问题后我们邀请了伍大爷周阿姨吴大爷翠姐姐陈阿姨项大爷吴阿姨许阿姨等叔叔阿姨们做了可用性测试，他们依旧遇到很多困惑 ? • 原来这个（图标）还可以点啊？ • （说两句）要说什么？ • “期待您的反馈”这个 “反馈”是什么意思？ ? ? ?? ?? ?? ? • 这个⻚面要做什么？ • “0/200”啥意思？ • 这个（图标）看不懂 • 怎么还要拍照吗？核心问题认知理解

44. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 看得到 ≠ 看得懂 ? 如何让⻓辈们更容易理解？

45. D2 前端技术论坛 3 具体方案 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 可感知可操作可理解鲁棒性安全性 Perceivable Operable Understandable Robust Secure 设计直白易懂的文案谨慎使用纯图标按钮完善可点击元素状态样式按需选择图片或视频

46. 问题：字和图标都看不懂，动画也不理解 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 勿以“字”小而不为改造前改造后向下滑动按钮收起 U • “说两句”不理解，是评论？是用语音的方式说话？ • 展开时是用说话的方式输入，收起时是用写字的方式输入? • 容易忽视“说两句”的图标及收起来的方式 • 调整文案为更好理解的“我要发言” • 延⻓文字按钮的常驻时⻓ • 向下滚动三屏内容以后再收起按钮

47. 这两个图标代表什么含义？ D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M

48. 一千人有一千个哈姆雷特，那图标呢？ D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 同龄人⻓辈同龄人⻓辈同龄人⻓辈同龄人⻓辈静音静音 (不知道) 禁止喇叭警报图片图片 (不知道) 楼梯山不赞同差评踩 … 差评/劲下等倒拇指不喜欢反对保存文件附件电话卡 (不知道) (内存)卡保存封闭同龄人⻓辈同龄人⻓辈同龄人⻓辈同龄人⻓辈扫一扫扫一扫中间止购物⻋购物⻋ (不知道) 垃圾桶附件旋转回形针旋转小程序回形针/万字夹链接文件收藏 (不知道) 上一⻚/返回小于号左边/左移小于号向左(滑) 返回/后退前一个 (不知道)

49. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 由于没有经历图标变迁的过程，⻓辈们无法理解很多图标的含义 U

50. 方案：使用更具象的图标 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 越是具象的产品功能图标，越是容易被受试者理解改造前改造后不理解图标含义使用更具象的图标 • 原来这个还 ? 可以按啊？ • 这个（图标）看不懂 U ?

51. 方案：直接使用文字指引银发⻘松助手 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 改造前改造后 • “下一⻚”按钮在视频结束才出现，很容易被忽略 • 部分老人不理解可以左右翻⻚ • 使用文字按钮帮助老人家学会手机、触达服务 U

52. 方案：给图标按钮添加文字描述（PC端） D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 案例来自 Google 翻译，鼠标悬停在图标按钮上的 popover 提示清除原文保存翻译朗读复制译文请对此翻译评分分享此译文

53. ? 细节：“按下”效果是可交互元素不可缺少的一部分 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M “秒回”的按钮更有安全感改造前视频：点击按钮无反馈，于是不停地、重重地点了一次又一次 U 改造后视频：所有可交互元素按下后都有样式反馈

54. ? 细节：“按下”效果是可交互元素不可缺少的一部分 ? 关键点 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M “秒回”的按钮更有安全感建议给所有可交互元素设计、定义所有可能用到的状态样式所有点击增加按下效果 U 视频：老人家在使用“银发⻘松助手”小程序时，点击按钮无反馈，于是不停地、重重地点了一次又一次以 button 为例

55. ? 思考：视频和图片哪种交互更符合预期？改造前 U • 视频教程没法缩放，图和字都看不清 • 视频无法控制，有人嫌太快，有人嫌太慢 • 容易忽略附带的语音信息 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 改造后 • 图片支持双指拉划放大，解决了“看不清”的问题 • 听着语音讲解依次翻⻚，觉得是在学习，在操作

56. D2 前端技术论坛 3 具体方案 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 可感知可操作可理解鲁棒性安全性 Perceivable Operable Understandable Robust Secure 兼容辅助工具适配辅助功能

57. 与前端开发相关的辅助工具、功能适配读屏软件等辅助工具 VoiceOver(旁白) macOS、iOS TalkBack Android 支持(纯)键盘交互 NVDA Windows 开发不同皮肤模式(暗黑、高对比度等等) 暗黑模式 R 浅色模式适配浏览器缩放 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 可操作性

58. D2 前端技术论坛 3 具体方案 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 可感知可操作可理解鲁棒性安全性 Perceivable Operable Understandable Robust Secure 禁止广告插件禁止诱导类按键保障个人信息安全

59. 3 具体方案 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 可感知可操作可理解鲁棒性安全性 Perceivable Operable Understandable Robust Secure 支持字型大小调整设置恰当的热区大小设计直白易懂的文案兼容辅助工具禁止广告插件关注信噪比设计恰当的手势操作谨慎使用纯图标按钮适配辅助功能禁止诱导类按键设计足够对比度 …… 完善可点击元素状态样式 …… 保障个人信息安全声明正确的⻆色按需选择图片或视频添加无障碍标签 …… …… 无障碍改造运动障碍认知障碍适老化改造听力障碍视力障碍 “ …… 老年人是各类障碍的轻度集合体，而每个人都会变老，改造工作彼此互惠适老化无障碍 ”

60. 永久性障碍 VS 情景式障碍普通人也能因适老化、无障碍改造而受益 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M

61. 聚沙成塔，我们希望能做一本“信息无障碍”的百科全书让更多的人了解信息无障碍，提升“适老化”、“无障碍”意识，了解“信息无障碍”需要做什么、怎么做改造案例，经验 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M

63. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 1 2 3 4 背景介绍改造思路具体方案总结展望

64. 工作以来我的职位变化过程 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 你听过“网⻚重构”这个词吗 ?? 就是重新写么网⻚重构（现“UI开发”） Web前端开发前端开发 ?

65. CSS Naked Day CSS 裸奔节，一个被遗忘的前端节日一般是每年的 4 月 9 日，在这一天网站⻚面会“脱掉”CSS，通过这个节日来提醒选用合适HTML标签的重要性《 CSS禅意花园 : Web视觉艺术设计的王者之书》 http://www.csszengarden.com/

66. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 1 2 3 4

67. 在最开始接触前端时，也同步接触到经典的设计理念 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 豆瓣热⻔设计图书TOP10 No.2 8.6 /12345人评价 No.4 8.1 /3071人评价 No.7 8.5 /6983人评价 No.10 8.4 /6300人评价 8.2 /4355人评价 7.2 /1308人评价 8.0 /2148人评价

68. ? D2 前端技术论坛你们那边会不会也觉得现在喜欢折腾用户体验的同学好难招？ D 2 F R O N T E N D T E C H N O LO G Y F O R U M 很难 ? 我们今年招了不少，但都是偏业务逻辑，对于用户体验这方面都比较薄弱现在重构太难招了 ?

69. 不忘初心，永远不要停止追求好的前端体验 D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M 既仰望星空，也脚踏实地 “ 提升用户体验为更多人带来便利、自由、幸福感

70. D2 前端技术论坛 D 2 F R O N T E N D T E C H N O LO G Y F O R U M THANKS 谢谢聆听加入我们更多案例