W3C无障碍组件创作实践中文版发布

以下文章来源于腾讯CDC体验设计 ，作者腾讯CDC-emma

导语： 本文主要介绍腾讯适老化&无障碍 Oteam （Oteam 是腾讯内部一个公司级跨团队的开源协同小组）主持 **W3C ** 技术文档翻译工作的成果，涉及 29 个常用组件的无障碍实践指引，包括详细的代码示例、键盘操作指引、WAI-ARIA 角色、属性和状态使用规范，希望能帮助设计师、开发者更好更快实现无障碍化组件。

文章概览

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

当 Web 应用开始变得越来越复杂和动态化，一系列全新的无障碍访问问题接踵而至，这些问题应该如何解决，大多数人往往不太清楚。

通常情况下，谈到 Web 应用的“信息无障碍”时，一定绕不开一个残障群体——视障人士。视障人士存在不同程度的视力残疾，主要包括盲和低视力，他们无法像普通人一样通过视觉从界面上获取信息，而是主要借助读屏软件（也称“屏幕阅读器”），依靠听觉来使用手机和电脑（由于视力的原因，很多视障人士使用电脑时高度依赖键盘，不一定会使用鼠标）。

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

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

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

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

1. 若干个不同的标签元素；
2. 当前哪个元素是激活的；
3. 某些标签元素会有小红点（一般是未读数或未读提示）。

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

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

可以看到非常明显的对比——左边的图只传达了“ 2. 当前哪个元素是激活的”这个信息，而右图 1~3 都传达出来了，视障人士能清晰地听到标签栏一共有多少个元素，每个元素的名称分别是什么，有哪些信息（例如未读说明、数量）。

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

• 页面中存在“未加标签”元素，这会导致非常严重的体验问题——读屏用户无从得知相应元素是什么，可能导致完全无法使用相应功能；
• 界面上的所有有价值的信息未以正确的方式传达给读屏用户，容易让用户错过重要信息，让用户感觉困惑。

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

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

其中，视频左下角是苹果电脑“旁白”的字幕面板，面板上显示的内容为读屏软件播报给用户的文本信息。

仔细观察视频你可能会发现：视频的前 20 秒里鼠标都是静止状态，选项卡的切换是通过键盘的 ⬅️ 和 ➡️ 方向键来实现的。

当焦点在选项卡元素（即视频中的选项卡上方的 Maria Ahlefeldt，Carl Andersen，Ida da Fonseca，Peter Lange-Muller）上时，可以通过键盘上的 tab 键将焦点移入对应的选项卡面板，而 shift + tab 则可以让焦点返回到选项卡元素上。

是不是感觉很方便？但是市面上绝大多数组件库，都没有做好这个支持。

适配键盘交互在平时开发过程中是非常容易忽略的一环，缺少良好键盘交互适配的组件/功能，意味着它们也将键盘使用者拒之门外。而良好的键盘支持，不仅仅对视障人士使用电脑至关重要，对于提升普通人使用电脑的效率也非常显著。

如何写无障碍组件的代码？

• 要实现这样的代码效果，就不得不提到“语义化”和“WAI-ARIA”了。语义化无须过多介绍，WAI-ARIA 是 W3C 编写的规范，定义了一组可用于其他元素的 HTML 特性——角色、属性和状态，用于提供额外的语义以及改善缺乏的可访问性。因此它能让更多的信息从浏览器暴露给 accessibility APIs (无障碍 API)，这也是读屏软件这一类软件的信息源。

了解过信息无障碍的前端同学可能或多或少听过 WAI-ARIA，但是据笔者观察，他们普遍会有以下疑问：

• 角色、属性、状态各自的使用场景是怎样的，有什么注意事项；
• 有不少属性看起来很接近（例如 aria-checked 和 aria-selected），应该用哪个、为什么；
• WAI-ARIA 虽然对角色、属性、状态解释很全，但缺少相对完整的代码示例，既不确定怎么写，又无法很便捷地测试；
• 最关键的是 WAI-ARIA 只有英文版的，阅读理解非常费时费力；
• ...

很多开发者了解到这里时就打了退堂鼓，加上无障碍在现阶段很多企业里都还属于“用爱发电”的需求，绝大多数开发者即使了解过无障碍，也几乎没真正写过无障碍的代码。

如果能有中文版就好了，或许就能让更多人高效、轻松地了解无障碍领域有价值的知识和信息了，只有更多人接触、了解无障碍领域的信息和知识，才会有更多的人一起来做无障碍。

“手把手”教你创作无障碍组件

真的有，它来了，这是由腾讯适老化&无障碍 Oteam （Oteam 是腾讯内部一个公司级跨团队的开源协同小组，适老化&无障碍 Oteam 致力于组织相关团队和个人共同根据参与团队的经验进行领域分工，协同推进腾讯在适老化、无障碍领域的探索和研究）发起，协同 CSIG、PCG、CDG、TEG、腾讯音乐等十几位同学一起协同翻译的项目，欢迎大家扫描下方二维码 ⬇️ （或本文末尾“阅读原文”）阅读指正。

WAI-ARIA 创作实践 - 设计模式和 widget 📖 ✨✨✨

在内容选择上，为了能让更多读者受益，也为了让无障碍能更好地落地，Oteam 优先选定了与开发实践更为相关的内容——WAI-ARIA Authoring Practices 1.2 - Design Patterns and Widgets（WAI-ARIA 创作实践 1.2 - 设计模式和小部件）来翻译。

这部分内容介绍了 29 个常见组件的无障碍实现方式，绝大多数组件都附有详细的代码示例，每个示例包含完整的键盘交互实现和指引，文档还详尽介绍了组件 WAI-ARIA 角色、属性和状态具体使用及定义。

• Accordion (Sections With Show/Hide Functionality) 手风琴（具有显示/隐藏功能的部分）
• Alert 警告
• Alert and Message Dialogs 警告和消息对话框
• Breadcrumb 面包屑
• Button 按钮
• Carousel (Slide Show or Image Rotator) 轮播（幻灯片放映或图像轮播器）
• Checkbox 多选框
• ComboBox 组合框
• Dialog (Modal) 对话框（模态）
• Disclosure (Show/Hide) 展开折叠（显示/隐藏）
• Feed 信息流
• Grids : Interactive Tabular Data and Layout Containers 网格：交互式表格数据和布局容器
• Link 链接
• Listbox 列表框
• Menu or Menu bar 菜单或菜单栏
• Menu Button 菜单按钮
• Meter 仪表
• Radio Group 单选组
• Slider 滑块
• Slider (Multi-Thumb) 滑块（多拇指控件）
• Spinbutton 调节按钮
• Switch 开关
• Table 表格
• Tabs 选项卡
• Toolbar 工具栏
• Tooltip Widget 文字提示 Widget
• Tree View 树形视图
• Treegrid 树形网格
• Window Splitter 窗口拆分器

“WAI-ARIA创作实践”中文版介绍

以前文提到的“选项卡”为例，文档对一个完整的“Tabs 选项卡”组件做了很系统的说明介绍，包括：

• 清晰的可体验代码示例：

• 完善的键盘交互说明，详细解释了如何快速切换选项卡元素，如何将焦点移入、移出选项卡面板的切换，如何激活选项卡，（可选）如何删除选项卡等交互。

• 完整的 WAI-ARIA 角色、属性和状态设置指引：

如果你是 设计师 👩🏻‍🎨，我会非常推荐你关注其中“示例”、“键盘交互”（打开示例对应的页面，然后在浏览器下体验对应的键盘交互效果）相关的内容。桌面端的组件都需要有良好的键盘支持才能被视障用户使用，而快捷键对于普通用户提升操作体验和效率的作用也不言而喻——你能忍受没有任何快捷键的 Figma、Sketch、Photoshop 吗？

如果你是 开发者 🧑🏻‍💻，我建议你通读全文，特别是当你处于听说过 WAI-ARIA 角色、属性、状态却不知道应该如何使用，这份文档或许能解答你很多疑惑。如果能遵守这里的指引来实现基础组件、业务组件、还原页面，就能极有效地规避本文开头提到的视障人士经常遇到的问题。

翻译进度

截止至 2022 年 6 月，经过差不多半年的努力，Oteam 的同学们已经完成相关内容的翻译、多次校对工作，现在终于能和大家见面了！

在内容上，为了最大程度对准确性负责，我们对每个组件都进行了 2 次以上的校对工作。

在排版上，为了给读者良好的阅读体验，我们在遵照英文版原文格式的基础上，参考主流中文排版要求，小到一个空格、一个标点符号，我们也期望能做到最好。

目前译文已经作为“志愿者翻译”的方式贡献至 W3C（万维网联盟，又称 W3C 理事会，是万维网的主要国际标准组织，为半自治非政府组织），收获对方的肯定和高度评价。虽然我们已为翻译之精确付出努力，不足之处仍难免存在，如若阅读过程发现错译漏译的情况，欢迎联系 emmajtchen@tencent.com。

未来展望

翻译技术文档只是适老化&无障碍 Oteam 其中一小部分探索，除此以外，Oteam 还尝试在优秀案例、通用解决方案的沉淀及知识库、样本库、评测工具、标准规范等模块合力共建以提供基础支持，减少针对适老化、无障碍开发的重复投入，完善“适老化及无障碍”从需求调研、设计输出、研发实现、质量评测等环节任务流程，缔造良好的适老化、无障碍研发氛围，为普及社会适老化、无障碍服务提供助力。

Oteam 希望团结公司内所有参与适老化、无障碍工作的同学，坚持“科技向善”的意愿和使命，让所有人都能自由、平等地获取信息，享受信息带来的便利。

关注我们 👇 一起成长