腾讯CDC技术团队博客选编.pdfVIP

腾讯CDC技术团队博客选编

目录

腾讯CDC技术团队博客选编1

第1篇腾讯CDC参与翻译的W3C无障碍组件创作实践中文版发布2

第2篇数据工程在腾讯CDC的演进9

第3篇腾讯CDCAI-Design架构演进

第4篇热搜算法在腾讯CDC的实践30

第5篇腾讯问卷文本编辑模式重构与改进42

第6篇事件循环Microtasks(微任务)的运行时机——从接受知识到探索v8源码

第7篇正则表达式-POSIXPCRE

第8篇觅迹寻踪之正则表达式67

第9篇适老化与无障碍改造在腾讯CDC的实践-你可能忽略的产品设计细节

第1篇腾讯CDC参与翻译的W3C无障碍组件创作实践中文版发布

第1篇腾讯CDC参与翻译的W3C无障碍组件创作实践中

文版发布

导语：本文主要介绍腾讯适老化无障碍Oteam（Oteam是腾讯内部一个公司级跨团队的开源协同

小组）主持W3C技术文档翻译工作的成果，涉及29个常用组件的无障碍实践指引，包括详细的

代码示例、键盘操作指引、WAI-ARIA角色、属性和状态使用规范，希望能帮助设计师、开发者更

好更快实现无障碍化组件。

文章概览

本文共有3296字，大概需要6分钟阅读。

前言

当Web应用开始变得越来越复杂和动态化，一系列全新的无障碍访问问题接踵而至，这些问题应

该如何解决，大多数人往往不太清楚。

通常情况下，谈到Web应用的“信息无障碍”时，一定绕不开一个残障群体——视障人士。视障

人士存在不同程度的视力残疾，主要包括盲和低视力，他们无法像普通人一样通过视觉从界面上

获取信息，而是主要借助读屏软件（也称“屏幕阅读器”），依靠听觉来使用手机和电脑（由于

视力的原因，很多视障人士使用电脑时高度依赖键盘，不一定会使用鼠标）。

组件是所有Web应用的基础组成部分，只有组件本身是无障碍的，我们才有可能构建一个无障碍

的Web应用。

无障碍组件应该是怎样的？

以移动端最常见的底部标签栏为例：

底部标签栏一般包括以下信息：

1.若干个不同的标签元素；

2.当前哪个元素是激活的；

3.某些标签元素会有小红点（一般是未读数或未读提示）。

第1页/共84页

第1篇腾讯CDC参与翻译的W3C无障碍组件创作实践中文版发布

一起来看看开启读屏软件的情况下，上图2个底部标签栏的播报效果是怎样的：

（截图来自iPhone11Pro，读屏效果示例为苹果读屏软件“旁白”下的表现）

可以看到非常明显的对比——左边的图只传达了“2.当前哪个元素是激活的”这个信息，而右

图1~3都传达出来了，视障人士能清晰地听到标签栏一共有多少个元素，每个元素的名称分别是

什么，有哪些信息（例如未读说明、数量）。

左图这种情况是视障人士最最经常遇到的“典型障碍问题”之一：

页面中存在“未加标签”元素，这会导致非常严重的体验问题——读屏用户无从得知相应元

素是什么，可能导致完全无法使用相应功能；

界面上的所有有价值的信息未以正确的方式传达给读屏用户，容易让用户错过重要信息，让

用户感觉困惑。

这些问题大量存在于各类移动端应用中，造成视障用户难以顺畅使用相关功能。

桌面端也有个类似的组件“选项卡”，一个通用的选项卡应该是类似这样的：