无障碍从源内容开始

主题可以提供良好对比度和键盘交互,但作者决定内容是否可理解。错误的 heading 层级、没有意义的链接、缺少替代文字的截图,以及用表格做布局,都无法可靠地靠 CSS 修复。

因此,无障碍规则必须同时进入模板和编辑 review。

使用语义结构

Heading 用来表达层级,而不是只为获得更大字体。列表保持为列表,表格只用于真正的表格关系。页面要有描述性 title,并保持可预测的信息顺序。

这不仅帮助 screen reader,也有利于搜索、导航和复用。

让链接离开上下文也能理解

避免重复“点击这里”。链接文字通常应说明目标或动作。不要只依赖颜色来表达状态和意义。

把图片当作信息

Alt text 应表达读者需要从图片获得的信息,而不是机械描述像素。纯装饰图片可以使用空 alt。用于教学的 screenshot 应在附近用文字重复关键操作。

复杂图表可以使用简短 alt,再在正文中提供更长说明。

测试 authoring pattern

自动检查缺失 alt、heading 问题和空 link,但也要用键盘和 accessibility tool 手动测试代表性页面,包括 code、callout、tabs 和 search。

当安全的 authoring pattern 同时也是最容易使用的 pattern,无障碍才能真正规模化。

实践示例

把《面向文档团队的 WCAG 2.2:实用起点》应用到一个真实页面,而不是只讨论规则。选择包含标题、表格、注释、示例、重复术语以及至少一个用户操作的内容。先以作者身份审阅,再以不了解内部术语的读者身份审阅。

记录可观察的问题:

  • 哪种结构承载了纯文本中不存在的意义;
  • 哪个术语的写法或含义不一致;
  • 哪条指令依赖未说明的上下文;
  • 哪项规则在审阅中难以稳定执行。

标准真正有用的标志,是两个编辑面对同一内容能得到近似判断。如果规则听起来正确却无法在代表性页面上演示,就需要 уточ确规则、补充示例或缩小适用范围。

快速编辑检查

  • 无障碍从源内容开始. 主题可以提供良好对比度和键盘交互,但作者决定内容是否可理解。
  • 使用语义结构. Heading 用来表达层级,而不是只为获得更大字体。
  • 让链接离开上下文也能理解. 避免重复“点击这里”。链接文字通常应说明目标或动作。
  • 把图片当作信息. Alt text 应表达读者需要从图片获得的信息,而不是机械描述像素。

相关阅读