思维模型

无障碍文字排版

安排文字的呈现方式,让读者调整字号、间距和外观后,仍能访问内容和使用控件。

探索一下

想象一下,你正在为网站排版。读者会使用浏览器缩放来放大页面内容。要检查他们能否把文字放大到原来的两倍,你该检查哪一项?

选择与放大目标相符的检查。

了解如何检查文字放大、间距调整和呈现选项。

理解概念

理解概念

无障碍文字排版,就是让人们能读清文字,也能按自己的需要调整文字的外观。有些读者需要更大的字,或更宽的词间距和行距。试着把网页放大到原来的两倍,再检查文字和按钮是否仍然可用。

详细讲解

详细讲解

无障碍文字排版既关注字形辨识度,也就是能否分清字母,也关注文本可读性,也就是能否顺畅阅读文字。这里提供的 W3C《Web 内容无障碍指南》(WCAG)理解文档,解释了调整字号、间距和呈现方式的相关要求。这些文档是说明性的指导,并不是证明某种字体或布局最适合所有人的实验。

AA 级成功准则 1.4.4“调整文本大小”要求:由内容作者控制的文本必须能放大到原来的两倍,同时不丢失内容或功能,也不需要屏幕放大镜等专用无障碍工具。字幕和文字图像不在此要求范围内;字幕把媒体中的音频内容呈现为同步文字,文字图像则把文字做成图片。浏览器缩放可以实现所需的放大,网页必须让这项功能有效运行。如果提供了介于原始大小和两倍之间的放大档位,也要检查这些档位。这条准则本身并不禁止水平滚动。[1]

AA 级成功准则 1.4.12“文本间距”适用于用标记语言编写、且支持相关间距属性的内容;标记语言就是描述文档结构的语言。用户同时进行以下四种指定调整时,内容必须仍然完整、功能仍然可用:行高,也就是分配给每行文字的空间,至少达到字号的 1.5 倍;段落后的间距至少达到字号的两倍;字母间距至少达到字号的 0.12 倍;词间距至少达到字号的 0.16 倍。这些数值是用户调整时的基准目标,并不是必须采用的默认设置,也不要求内容适应无限大的间距。某种语言和文字系统不使用的属性可以例外处理。这条准则不要求页面内置间距调节控件。[2]

假设有一张预订表单,放大文字或增加间距后,某个标签可能会与下一个输入框重叠。让标签所在的区域随之扩大,就能保留标签和控件。调整后,要检查布局中有没有隐藏的文字、重叠的文本或无法使用的功能。这个例子说明了指导要求的作用方式:让布局容纳变化后的文字,避免把文字截断。读者也可能需要比设计师所选字体更宽的字体;支持间距调整,可以让其他呈现方式的调整更容易实现,但不能保证所有可能的设置都能正常工作。[1][2]

AAA 级成功准则 1.4.8“视觉呈现”针对包含不止一个句子的文本块。必须有可用的机制,让用户选择文字和背景颜色,将文本块宽度设为不超过 80 个字符或字形,也就是书写符号;中文、日文和韩文文本则不超过 40 个。用户还必须能避免两端对齐,也就是让文字同时贴齐左右边缘的排版方式。这条准则还涵盖段落内至少使用一点五倍行距,以及段落间距至少比行距大 1.5 倍。文字必须能放大到原来的两倍,并且在常见台式机或笔记本电脑显示器的最大化窗口中,阅读每一行时不需要水平滚动。这些是必须能够实现的呈现设置,并不是强制的默认设置;浏览器可以提供相应机制。某种文字系统不使用的呈现设置可以例外处理。[3]

这些准则各自对应不同的检查,并没有规定选择字号、间距和字体时人人都要遵循的顺序。要分清三件事:支持放大、适应用户的间距调整,以及提供范围更广的 AAA 级呈现选项。这里提供的指导并没有确立通用的最小字号、最佳字体家族,也没有证实这些检查能带来阅读速度的提升。[1][2][3]

研究依据

研究依据

  • 官方指导:“调整文本大小”要求文字能放大到原来的两倍,同时不丢失内容或功能;字幕和文字图像除外。只要内容不妨碍放大,就可以通过浏览器的支持来实现;这条准则本身并不禁止水平滚动。[1]
  • 官方指导:“文本间距”检查适用的标记语言内容能否适应四种指定间距的同时调整。这些数值是用户调整时的基准目标,并不是必须采用的默认值,页面也不必提供自己的调节控件。这是一项适应性要求,并不是对普遍阅读速度提升效果的估计。[2]
  • 官方指导及其解释依据:“视觉呈现”为可调整的文本块提出了 AAA 级要求。文档解释说,有些读者难以沿着过长的文本行阅读,也难以适应两端对齐造成的不均匀间距。宽度限制和其他呈现设置必须能通过可用的机制实现,该机制可以由浏览器提供;它们并不是适用于所有页面的默认布局规则。[3]

适用局限

适用局限

这里提供的来源是对各项 WCAG 准则的说明性解释。它们并没有确立适用于所有情况的字体、屏幕阅读器、认知或行为效应量,这些检查也不能保证符合法律要求。预订表单的例子是假设情境,并非研究中观察到的结果。是否适用,取决于具体准则、技术、语言和文字系统;不能把 AAA 级“视觉呈现”的要求说成 AA 级要求。旧版课程中误标的 Nielsen 引用已被移除,并明确替换为这里提供的 W3C 指导;旧引用不视为已经核实。其他缺乏依据的字体排名、布局数值建议,以及对具名产品的相关说法也已移除。

参考来源

参考来源

试一试

检验你的理解

对于由内容作者控制的文本,字幕和文字图像除外,哪种结果符合“调整文本大小”准则?

查看文章解释

答案: 文字能放大到原来的两倍,同时不丢失内容或功能。

成功准则 1.4.4 要求文字能放大到原来的两倍,同时不丢失内容或功能,也不需要专用无障碍工具。仅凭字体选择或间距,无法确认是否符合这一要求。

对于用标记语言编写、且支持相关间距属性的内容,“文本间距”准则有什么要求?

查看文章解释

答案: 允许同时进行四种指定的间距调整,且不丢失内容或功能。

成功准则 1.4.12 检查用户同时调整行距、段落间距、字母间距和词间距时,内容能否适应。它不规定必须采用这些默认值,也不要求内置调节控件。某种语言和文字系统不使用的属性可以例外处理。

关于 AAA 级“视觉呈现”中的宽度要求,哪种说法正确?

查看文章解释

答案: 必须有一种机制,让文本块宽度能够设为不超过 80 个字符或字形;中文、日文和韩文文本则不超过 40 个。

成功准则 1.4.8 针对包含不止一个句子的文本块,要求有可用的机制来实现这些呈现设置。浏览器可以提供该机制。这里的宽度是必须能够实现的设置上限,并不是强制的默认值,也不等于完整的无障碍评估。

继续探索

为眼前的选择,再找一个有用的想法。

Reframo 的全部已发布文章均可免费阅读。准备好后,随时继续探索。