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

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

导语

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

前言

当 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),这也是读屏软件这一类软件的信息源。

了解过信息无障碍的前端同学可能或多或少听过 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 希望团结公司内所有参与适老化、无障碍工作的同学,坚持“科技向善”的意愿和使命,让所有人都能自由、平等地获取信息,享受信息带来的便利。

文章来源:

Author:CDCer
link:https://cdc.tencent.com/2022/08/12/w3c无障碍组件创作实践中文版发布/