创建面向所有用户（包括残障用户）的无障碍文档。遵循无障碍最佳实践可以确保每个人都能有效访问、理解和使用 Cloudflare 文档。
本指南符合 Web Content Accessibility Guidelines (WCAG) 2.1 Level AA 标准，并侧重于与文档相关的方面。
每个页面都必须有一个描述性的标题，以清晰地标识其内容并区别于其他页面。
- 将最具体的信息放在标题的首位。
- 标题要简明扼要，但要有描述性。
- 避免使用没有上下文的通用标题，如“概览”或“介绍”。
| 推荐 | 避免 |
|---|---|
| 配置 SSL/TLS 加密模式 | SSL 设置 |
| 排查 DNS 解析错误 | 问题排查 |
WCAG 参考：2.4.2 Page Titled (Level A) ↗
标题提供层级结构，有助于所有用户导航和理解内容。屏幕阅读器用户依赖标题来高效地在页面中进行导航。
- 按顺序使用标题。请勿跳过层级。
- 标题应描述其后的内容。
- 每页仅使用一个 H1 标题（即页面标题）。
- 请勿仅出于视觉样式目的而使用标题。
| 推荐 | 避免 |
|---|---|
| 主章节使用 H2，子章节使用 H3 | 从 H2 直接跳到 H4 |
| 配置 DNS 记录（描述该章节） | 重要提示（模糊的标题） |
WCAG 参考：2.4.6 Headings and Labels (Level AA) ↗
内容必须以有意义的顺序呈现，在线性阅读时能让人理解。
- 组织内容结构，使其逻辑上从上到下流动。
- 确保代码示例出现在其解释性文本之后。
- 将先决条件信息放在步骤和程序之前。
WCAG 参考：1.3.2 Meaningful Sequence (Level A) ↗
链接文本必须清晰描述链接的目标地址或目的。避免使用不提供任何上下文的模糊词汇。
- 尽可能将目标页面的标题作为链接文本。
- 描述用户点击链接后将看到的内容。
- 避免使用“点击此处”、“阅读更多”或“此页面”等通用短语。
| 推荐 | 避免 |
|---|---|
| 对于常见问题，请参考 DNS 问题排查指南。 | 对于常见问题，请点击此处。 |
| 了解更多有关配置 SSL 证书的信息。 | 阅读更多关于 SSL。 |
| 下载 Wrangler CLI 安装指南（PDF，2MB）。 | 点击此处下载。 |
WCAG 参考：2.4.4 Link Purpose (In Context) (Level A) ↗
请勿使用依赖于视觉布局的方向性或空间性语言，因为这会给屏幕阅读器用户造成障碍，而且并非总能在不同设备上起作用。
- 避免使用“以上”、“以下”、“左侧”、“右侧”、“顶部”、“底部”等词，除非需要描述元素的具体位置。
- 通过名称而非位置来引用特定元素。
- 使用章节标题或标签来标识内容。
| 推荐 | 避免 |
|---|---|
| 在 DNS 部分中，选择您的域名。 | 在屏幕右侧，选择您的域名。 |
| 有关要求，请参考先决条件部分。 | 有关要求，请参见上述信息。 |
| 选择 Add rule 按钮。 | 点击下方的按钮。 |
WCAG 参考：1.3.3 Sensory Characteristics (Level A) ↗
所有图像都必须具有描述图像内容或功能的替代文本。
- 描述图像显示的内容以及其重要性。
- 保持替代文本简洁但信息丰富（通常在 150 个字符以内）。
- 对于复杂的图表，请在周围文本中提供更长的描述。
- 仅对纯装饰性图像使用空替代文本（空括号
![]）。 - 请勿在替代文本中包含“...的图像”或“...的图片”之类的词。
- 避免为了 SEO 目的而堆砌关键词。
- 请勿在替代文本中重复说明文字或相邻文本。
- 对于功能性图像（如按钮或链接），请描述其操作，而不是外观。
| 图像类型 | 替代文本方法 |
|---|---|
| 显示特定 UI 元素的屏幕截图 | 描述屏幕截图显示的内容及其目的 |
| 说明概念的图表 | 总结所传达的关键信息 |
| 带有相邻文本的徽标或图标 | 使用空替代文本以避免冗余 |
| 装饰性图像 | 使用空替代文本（空括号 ![]） |
示例：
| 推荐 | 避免 |
|---|---|
 |
 |
 |
 |
（用于装饰性图像） |
 |
 |
（关键词堆砌） |
 |
（描述外观） |
WCAG 参考 1.1.1 Non-text Content (Level A) ↗
其他资源：
所有视频和音频内容都必须包含字幕和文本转录，以确保听力障碍用户的无障碍使用。
- 字幕：为所有包含音频的视频内容提供同步字幕。
- 文本转录：为纯音频内容（如播客）提供文本转录。
- 音频描述：对于视觉信息必不可少的视频，提供重要视觉内容的音频描述。
字幕和文本转录必须包括：
- 所有口头对话和旁白。
- 存在多位发言者时标识发言者身份。
- 重要的音效（例如“关门声”或“警报通知”）。
- 与理解内容相关的音乐提示。
WCAG 参考：
使用简单、直接、易于理解的语言。这使所有用户受益，包括有认知障碍的用户、非英语母语者以及技术知识有限的用户。
- 编写简短、清晰的句子（如果可能，尽量将句子字数控制在每句 8-12 个词）。
- 将内容分成简短的段落（最多 3-4 句话）。
- 使用简单的词汇而不是复杂的替代词。
- 避免使用行话、成语和俗语。
- 使用主动语态和现在时态。
| 推荐 | 避免 |
|---|---|
| Cloudflare 保护您的网站免受 DDoS 攻击。 | Cloudflare 提供了全面的保护机制以缓解分布式拒绝服务攻击媒介。 |
| 完成这些步骤以配置您的设置。 | 为了便于配置您的设置，有必要完成以下步骤。 |
WCAG 参考：3.1.5 Reading Level (Level AAA) ↗
首次使用时定义所有首字母缩略词和缩写，以确保所有读者的理解清晰。
- 首次使用时拼写出完整术语，后跟括号中的缩略词。
- 在文档的其余部分中一致使用该缩略词。
- 对于包含大量技术术语的文档，可以考虑提供词汇表。
| 推荐 | 避免 |
|---|---|
| Web Content Accessibility Guidelines (WCAG) 提供了无障碍 Web 内容的标准。 | WCAG 提供了无障碍 Web 内容的标准。 |
| 分布式拒绝服务 (DDoS) 攻击通过流量使服务器不堪重负。 | DDoS 攻击通过流量使服务器不堪重负。 |
WCAG 参考：3.1.4 Abbreviations (Level AAA) ↗
当使用可能使读者感到陌生的技术术语时，请提供清晰的定义，使用 GlossaryDefinition 组件，或链接到相关的词汇表。
- 首次引入术语时进行行内定义。
- 链接到词汇表或单独页面中的详细说明。
- 在确定哪些术语需要定义时，请考虑受众的技术水平。
WCAG 参考：3.1.3 Unusual Words (Level AAA) ↗
将多个相关项目以项目符号或编号列表的形式呈现，而不是段落形式。列表更易于快速浏览和理解。
- 对顺序步骤或有序项目使用编号列表。
- 对非顺序项目使用项目符号列表。
- 保持列表项在结构上平行（平行结构）。
- 使用清晰的引导句引入列表。
确保所有说明、指导和错误消息都清晰、具体且易于理解。
- 明确描述输入要求（例如，日期格式和字符限制）。
- 在有帮助时提供示例。
- 使用清晰、具体的错误消息，说明出了什么问题以及如何解决。
- 避免在面向用户的消息中使用不必要的技术性语言。
| 推荐 | 避免 |
|---|---|
| 请输入有效的电子邮件地址（例如，[email protected]）。 | 输入电子邮件。 |
| 密码长度必须至少为 12 个字符，并且包含一个数字。 | 密码无效。 |
| API 密钥格式不正确。请确保其为 32 个字符且仅包含字母和数字。 | 错误：密钥无效。 |
WCAG 参考：3.3.2 Labels or Instructions (Level A) ↗
在创建 Mermaid 图表或其他视觉内容时，请勿将颜色作为传达信息或区分元素的唯一方式。
- 除颜色外，还应使用标签、图案或形状。
- 确保图表内的文本具有足够的对比度。
- 在图表附近添加描述性文本以解释关键元素。
| 推荐 | 避免 |
|---|---|
| 为不同的节点类型使用不同的形状和标签 | 仅使用颜色来区分节点类型 |
| 添加通过名称（而不仅仅是颜色）描述元素的图例 | 在没有额外上下文的情况下提及“绿色方框” |
WCAG 参考：1.4.1 Use of Color (Level A) ↗
仅使用表格来呈现行与列之间具有逻辑关系的数据。请勿将表格用于布局目的。
- 为所有行和列包含清晰、描述性的标头。
- 尽可能保持表格简单。
- 对于复杂的表格，考虑将它们拆分为多个更简单的表格。
使用描述表格用途的完整句子来引入表格，因为并非所有屏幕阅读器都会预先宣告表格。引入句可以以冒号或句号结尾；如果它紧邻表格上方，通常使用冒号，如果引入句和表格之间还有其他内容（例如提示段落），则通常使用句号。
WCAG 参考：1.3.1 Info and Relationships (Level A) ↗
确保屏幕阅读器用户能够访问代码示例，且示例易于理解。
- 始终指定编程语言以进行语法高亮。
- 在代码示例之前提供解释代码作用的上下文。
- 在示例中使用描述性的变量和函数名。
- 添加注释以解释复杂的代码段。
- 确保代码示例遵循逻辑顺序。
如果可能，请使用辅助技术测试文档以确保无障碍性。
- 使用屏幕阅读器浏览页面。
- 测试键盘导航（Tab、Enter、方向键）。
- 验证所有交互式元素是否均可进行键盘访问。
- 检查焦点指示器是否可见。
使用自动化工具来识别常见的无障碍问题，但请记住，自动化工具无法捕捉到所有问题。
- 在开发过程中运行自动化无障碍检查器。
- 手动审核标记的问题。
- 针对工具无法检测到的问题进行手动测试。