导语： 本文主要介绍腾讯适老化&无障碍 Oteam （Oteam 是腾讯内部一个公司级跨团队的开源协同小组）主持 **W3C ** 技术文档翻译工作的成果，涉及 29 个常用组件的无障碍实践指引，包括详细的代码示例、键盘操作指引、WAI-ARIA 角色、属性和状态使用规范，希望能帮助设计师、开发者更好更快实现无障碍化组件。
文章概览
本文共有 3296 字，大概需要 6 分钟阅读。
当 Web 应用开始变得越来越复杂和动态化，一系列全新的无障碍访问问题接踵而至，这些问题应该如何解决，大多数人往往不太清楚。
通常情况下，谈到 Web 应用的“信息无障碍”时，一定绕不开一个残障群体——视障人士。视障人士存在不同程度的视力残疾，主要包括盲和低视力，他们无法像普通人一样通过视觉从界面上获取信息，而是主要借助读屏软件（也称“屏幕阅读器”），依靠听觉来使用手机和电脑（由于视力的原因，很多视障人士使用电脑时高度依赖键盘，不一定会使用鼠标）。
组件是所有 Web 应用的基础组成部分，只有组件本身是无障碍的，我们才有可能构建一个无障碍的 Web 应用。
无障碍组件应该是怎样的？
以移动端最常见的底部标签栏为例：
-
若干个不同的标签元素； -
当前哪个元素是激活的； -
某些标签元素会有小红点（一般是未读数或未读提示）。
一起来看看开启读屏软件的情况下， 上图 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)，这也是读屏软件这一类软件的信息源。
-
角色、属性、状态各自的使用场景是怎样的，有什么注意事项； -
有不少属性看起来很接近（例如 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 – 设计模式和小部件）来翻译。
-
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 角色、属性和状态设置指引：
翻译进度
未来展望
关注我们 ? 一起成长
本篇文章来源于微信公众号:腾讯云设计中心
