diff --git a/_articles/zh-hans/accessibility-best-practices-for-your-project.md b/_articles/zh-hans/accessibility-best-practices-for-your-project.md new file mode 100644 index 00000000000..eecc98deff6 --- /dev/null +++ b/_articles/zh-hans/accessibility-best-practices-for-your-project.md @@ -0,0 +1,301 @@ +--- +lang: zh-hans +title: 项目无障碍最佳实践 +description: 让你的开源项目对所有人(尤其是残障人士)可用的实用、可落地的步骤。 +class: accessibility-best-practices +order: -1 +image: /assets/images/cards/accessibility-best-practices.png +--- + +无障碍(accessibility,常简写为 _a11y_)意味着不论用户是否残障、使用何种辅助技术、身处何种环境或使用何种设备,都能使用你的项目。它包括但不限于:对屏幕阅读器的支持、纯键盘导航、字幕/文字记录、足够的色彩对比度,以及清晰的内容结构。 + +## 与残障人士携手合作 + +**"没有我们的参与,就不要替我们做决定"** —— 对无障碍建设而言,最重要的一件事就是把它所服务的人群放在中心位置。有残障经历的用户、贡献者和测试者,能以指南和自动化工具无法企及的方式理解真正的障碍所在。尽早并持续地寻求他们的真实体验。 + +### 落到实处 + +脱离受影响的人群做出的决定,往往会偏离目标。与残障人士一起构建,而不是替他们构建,才能打造出对所有人都更好的软件。 + +以下是几种纳入真实体验的方式: + +* 邀请残障贡献者参与设计讨论,而不仅仅是缺陷分类(bug triage)。 +* 在条件允许的情况下,邀请残障人士参与可用性测试和反馈。 +* 当有人描述他们如何使用你的项目时,认真倾听,即使这挑战了你原有的假设。 +* 把无障碍报告当作专业意见来对待,而不是抱怨——它们所代表的用户可能比你想象的更多。 + +### 无障碍让所有人受益 + +* **它影响着大量人群。** 根据[世界卫生组织](https://www.who.int/news-room/fact-sheets/detail/disability-and-health)的估计,全球约有 13 亿人(六分之一)存在显著的残障情况。 +* **它是质量的一部分。** 具备无障碍能力的产品,往往对所有人都更易用。 +* **它降低支持负担。** 更清晰的界面和文档意味着更少困惑的用户。 +* **它扩大你的贡献者群体。** 辅助技术用户能够更充分地参与进来。 +* **它推动创新。** 为多样化需求而设计,往往会带来让所有人都受益的功能(比如字幕、语音控制和深色模式,最初都是无障碍方案)。 +* **它常常是硬性要求。** 许多组织(以及一些政府)在采购和合规方面都要求具备无障碍能力。 +* **我们的未来充满不确定性。** 没有人能确定自己明天还拥有今天所拥有的能力。 + +## 从无障碍声明开始 + +在动手写代码之前,先花点时间记录下你的项目对无障碍的承诺。一份无障碍声明向用户和贡献者传达了一个信号:无障碍是优先事项,而不是事后补丁。具体做法可参考 [W3C 的《撰写无障碍声明》指南](https://www.w3.org/WAI/planning/statements/)。 + +添加一份清晰的声明,设定预期,并让用户能方便地报告问题。你可以直接在 README 中添加一个无障碍章节,也可以创建独立的 **ACCESSIBILITY.md** 文件,并在 README 中链接到它以提高可见性。可参考这个 [ACCESSIBILITY.md 示例](https://github.com/open-source-accessibility/accessibility-toolkit/blob/main/ACCESSIBILITY.md)。 + +### 目标 + +* 陈述可衡量的目标和准则(在可行的情况下,参考 [WCAG AA](https://www.w3.org/TR/WCAG22/#wcag-2-layers-of-guidance))。 +* 明确首要优先事项,以及你打算如何实现它们(键盘与屏幕阅读器支持、字幕与文字记录等)。 +* 说明已知的局限性,以及可用的替代方案(如果存在)。 + +### 贡献者要求 + +设立清晰的准则,让贡献者知道项目对他们的期望: + +* **测试:** 所有 UI 改动都必须使用无障碍测试工具进行测试(例如 [Axe DevTools](https://www.deque.com/axe/devtools/extension/#:~:text=Try%20Axe%20DevTools%20Extension%20in%20your%20browser%20of%20choice))。 +* **文档:** 针对 SVG、图片、交互元素等组件,遵循项目的无障碍指南。 +* **CI/CD:** 如果 PR 引入了无障碍检查工作流检测到的违规项,应当让检查失败。 + +### 支持的环境 + +* 列出你所支持的平台(Web、移动端 Web、iOS、Android、终端/CLI、桌面应用)。 +* 列出任何部分支持的说明。 + +### 报告无障碍问题 + +* 引导报告者使用无障碍问题模板来创建 issue。 +* **小贴士:** 诚实地设定预期(比如"我们正在处理这个问题——进展跟踪见 ISSUE-123");确认收到报告,并在可能的情况下提供后续进展或临时解决方案。 + +#### 为什么要把无障碍问题从常规问题流程中独立出来? + +用户早已习惯了一份专门的无障碍声明和报告路径——这在私营部门和各类政府网站中都是行之有效的惯例,很多用户在遇到障碍时会首先寻找它。让无障碍问题独立于常规缺陷流程,原因在于: + +* **影响具有时效性。** 无障碍缺陷可能导致用户完全无法使用你的项目,而不只是带来不便。独立的报告路径有助于这类问题被更快地分类处理。 +* **上下文不同。** 无障碍问题报告需要具体信息(所用辅助技术、操作系统、浏览器、严重程度),而通用的缺陷模板不会主动提示这些内容。 +* **它传达出承诺。** 一份可见的、独立的声明向用户和贡献者表明,无障碍是一等公民关切,而不是被塞进"其他缺陷"里草草处理。 +* **报告者本身可能正在使用辅助技术来提交报告。** 一个清晰、可预期的流程(固定的文件、固定的标签、固定的模板)能减少受影响最严重的那部分人所面临的阻力。 + +## 让文档默认无障碍 + +文档往往是用户接触到的第一个"界面"。确保每个人都能读懂它。 + +### 结构与语义 + +* 使用**合乎逻辑的标题层级**,不要跳级(`#`、`##`、`###`、`####`、`#####`、`######`)。 +* 使用**独特且具描述性的链接文字**(用"阅读贡献指南"而不是"点击这里")。 +* 使用平实的语言,避免行话,首次出现的缩写要展开说明。 +* [使用**真正的列表**](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#lists),而不是手动打出的编号。 +* 让**帮助和导航保持在各页面一致的位置**,方便用户可预期地找到它们。 +* 避免仅通过位置或样式来传达含义(例如"看右边的红色文字")。 + +### 图片、图表与视频 + +* 为图片提供有意义的**替代文本**(常简称为"alt text",参考 [W3C 的 alt 决策树](https://www.w3.org/WAI/tutorials/images/decision-tree/))。 +* 尽量使用真实文本,而不是文字图片。 +* 对于复杂图片(如架构图),在附近提供额外的**文字说明**(要点列表或简短解释)。 +* 如果你发布演示、教程、演讲或发布视频: + * 提供**字幕**(尽量选择人工校对过的版本)。 + * 提供**文字记录**。 + * 避免自动播放音视频。 + * 用语言描述重要的屏幕操作。 + +### 表格 + +* 表格只用于呈现表格数据,不要用于页面布局。 +* 提供**表头单元格**,将列标题和行标题与数据单元格关联起来。 +* 提供**说明或摘要**,描述表格的用途。 + +### 代码块 + +* 保持每行长度合理(自动换行有助于可读性)。 +* 不要仅依赖颜色高亮来传达含义。 +* 用文字说明代码做了什么、成功的标志是什么。 + +## 设计无障碍的界面 + +如果你的项目有 Web 界面,以下这些高影响力的默认设计能帮助到所有用户。 + +### 键盘支持 + +* 所有可交互元素都应能**仅通过键盘**访问和操作。 +* 确保有**可见的焦点指示**(除非提供替代方案,否则不要移除焦点轮廓)。 +* 保持与视觉布局一致的、合乎逻辑的 **Tab 键顺序**。 +* 除非你有意管理焦点(例如模态对话框)并提供退出方式,否则不要在组件内困住焦点。 + +### 语义优先 + +* 尽可能使用**原生 HTML** 元素(`