文本间距

要求内容

患有阅读障碍、低视力或认知障碍的用户，通常会安装浏览器扩展或用户样式表来放宽紧凑的排版设置。本成功准则定义了四项具体覆盖——行高为字号的 1.5 倍、段落间距为字号的 2 倍、字母间距 0.12em、字间距 0.16em——并要求页面在应用这些覆盖后仍能正常使用。不得出现文本截断、溢出或内容缺失。

如何满足

• 使用 min-height 而非固定 height 设置容器高度，使其随文本扩展而增长。
• 避免对按钮、导航项、卡片和徽标使用固定像素高度——让它们随内容自然增长。
• 通过粘贴已知书签脚本（WCAG 1.4.12 文本间距书签脚本）进行测试，该脚本可同时应用四项覆盖。
• 允许文本自然换行；不要对可能增长的标签使用 white-space: nowrap。
• 验证导航菜单、选项卡及选项卡标签在字母间距扩展后仍能正常显示。

常见失败情形

• 按钮使用 height: 40px，当行高增长至 1.5 时，标签文字被截断。
• 选项卡标签使用 white-space: nowrap，在较宽字母间距下溢出容器。
• 卡片高度固定，文本在”阅读更多”渐隐效果背后被隐藏。
• 工具提示和徽标在段落间距增大时截断文本。
• 固定高度的粘性页头在导航文字增长后与页面内容重叠。

为何重要

本成功准则能发现”针对单一间距设计”的布局问题——设计师将所有内容锁定在 Figma 精确行高的前提下。现实中，使用阅读辅助工具的用户会频繁应用间距覆盖。修复方法通常是将 height 改为 min-height、移除 white-space: nowrap——改动量小且机械化，却能惠及整个 UI。