排版

创建和设计无障碍内容不仅仅是选择易于阅读的字体。即使使用无障碍字体系列,弱视、认知、语言和学习障碍人士也可能因字体变体、大小、间距和字距等其他元素而难以处理文字。

本单元将介绍一些基本设计注意事项,以便您制作更具包容性的内容,从而覆盖更多用户。

字体

影响文案无障碍程度的一个主要因素是字体。您选择的字体和样式可以决定任何页面设计的成败。

使用无障碍字体对有阅读、学习和注意力障碍(例如诵读困难和注意力缺陷多动障碍 [ADHD])的用户以及弱视用户都有益。

选择常用字体 若要快速创建无障碍设计,请选择常用字体(例如 Arial、Times New Roman、Calibri、Verdana 等)。

许多针对残障人士进行的字体研究表明,与不常见的字体相比,常见的字体有助于提高阅读速度和理解深度。虽然常用字体本身并不比其他字体更易于访问,但由于部分残障人士有丰富的使用(或规避)这些字体的经验,因此更容易阅读它们。

除了选择常用字体之外,请务必避免使用华丽或手写字体,以及仅提供一种字符大小(例如仅大写字符)的字体。这些采用草书设计、奇特形状或细线等艺术特征的特殊字体可能看起来很漂亮,但对于某些残障人士来说,它们比常规字体更难阅读。

字母特征和字形间距

关于Serif 字体和 Sans Serif 字体哪个更易于阅读的研究结果并不确定,但某些数字、字母或组合可能会让有语言学习和认知障碍的人感到困惑。对于这类残障人士,每个字母和数字都必须明确定义且具有独特的特征,以免字母与数字混淆。

常见的易读性问题包括大写字母“I”(印度)、小写字母“l”(莴苣)和数字“1”。同样,对于某些读者,b/d、p/q、f/t、i/j、m/w 和 n/u 等字母对有时可能会左右或上下翻转。

如果字母间距或字间距过小,文案的可读性也会降低。请特别注意排版,尤其是存在问题的字母对 r/n 之间的排版。否则,“纱线”可能会变成“山药”,而“船尾”可能会变成“茎”,完全改变文案的含义。

Google Fonts 等开源字体集合可帮助您为下一个设计选择包容性最强的字体。如果您使用 Adobe 产品,则可以直接将来自铸造合作伙伴的无障碍字体系列嵌入到您的设计中,包括部分 Google Fonts

在寻找下一个字体时,请特别注意以下几点:

  • 尽可能使用常用字体。
  • 避免使用精致或手写字体,以及仅使用一种字符大小的字体。
  • 选择具有独特特征的字体,并特别注意大写 I、小写 l 和 1。
  • 检查某些字母组合,确保它们不是完全对称的。
  • 检查字间距,尤其是 rn 字母对之间的字间距。

字体大小和排版样式

人们常常认为,选择无障碍字体系列就是创建包容性内容的全部要求,但考虑字体大小和网页上文本的样式也很重要。

例如,如果文案太小,低视力或色盲人士可能无法使用辅助技术(例如浏览器缩放功能)来阅读文案。其他用户(例如患有阅读障碍或阅读障碍的用户)可能无法阅读斜体文本。屏幕阅读器通常会忽略样式方法(例如粗体和斜体),因此无法向盲人或弱视用户传达这些样式的意图。

错误做法
h2 {font-size: 16px;}
正确做法
h2 {font-size: 1rem;}

由于您无法预测每个用户的需求,因此在向网站和 Web 应用添加字体时,请务必考虑以下准则:

  • 应使用相对值(%、rem 或 em)定义基本字号,以便调整大小。
  • 限制字体变体(例如颜色、粗体、全大写和斜体)的数量,以提高可读性。请改用其他方法来强调文案中的字词,例如使用星号、短划线或突出显示单个字词。
  • 尽可能在图片上使用标记,而不是文字。屏幕阅读器无法读取图片中未添加额外代码的嵌入文本,并且当低视力用户放大嵌入文本时,嵌入文本也可能会像素化。

结构和布局

虽然字体、字号和排版样式对无障碍排版至关重要,但页面上文案的结构布局对用户的理解同样重要。

复杂的布局对低视力人士、阅读障碍人士以及美国 610 万名患有注意力缺陷多动障碍 (ADHD) 的人士来说,都是一道真正的障碍。由于缺少清晰的线性路径、缺少标题和未分组的元素,这类残障人士更难以保持阅读位置并跟随文案的流程。

无障碍布局设计的一个重要方面是使关键元素彼此区分,并将类似元素分组在一起。如果元素过于靠近,就很难看出一个元素的起点和终点,尤其是当它们采用类似样式时。

将文案视为大纲上的一系列单独的项目符号。这有助于您规划整体页面结构,并让您能够在适当情况下使用标题、副标题和列表。

间距

段落、句子和字词间距有助于读者保持对文案的专注,并增强页面的整体视觉理解度。长行文案可能会给残障读者带来障碍,因为他们很难找到自己阅读的位置并跟上文案的节奏。

文字块较窄,读者更容易继续阅读下一行。

内容对齐方式

许多残障人士还会对阅读对齐文本感到沮丧。两端对齐文案中字词之间的间距不均匀可能会导致页面下方出现“空格河”,使文案难以阅读。

文本对齐也可能会导致字词堆在一起或以不自然的方式拉伸,因此读者可能会很难找到字词边界。

幸运的是,我们有关于间距的明确准则,以及合适的行高黄金比例计算器等工具,可帮助我们让文案更易于阅读。遵循这些准则有助于患有注意力缺陷障碍、阅读障碍和视觉障碍的用户更专注于文案,而非布局。

结构和布局方面的最佳实践

在考虑结构和布局时,请务必:

  • 使用标题、副标题、列表、数字、引号块和其他视觉分组等元素将网页划分为多个部分。
  • 使用明确定义的段落、句子和字词间距。
  • 确保文案列的宽度不超过 80 个字符(对于 logogram,不超过 40 个字符)。
  • 避免使用对齐的段落,因为这会在文案中造成“空白河”。

无障碍排版要点

无障碍排版可以归结为根据您对用户需求的了解做出的常识设计选择。在设计和构建内容时,牢记本模块中的要点,将有助于您与尽可能多的用户清晰沟通。

检查您的理解情况

测试您对衡量无障碍功能的了解

为了确保文案清晰易读,我应始终在文案和背景之间使用高对比度。

正确。
虽然高对比度对某些视力障碍人士来说很有用,但其他障碍人士可能难以阅读高对比度内容。
错误。
如果对比度过高,部分残障人士将无法阅读您的内容。如果可能,请允许用户的操作系统设置确定对比度。

哪些字体最适合无障碍使用?

Arial 和 Verdana 等系统字体。
与不常见的字体相比,常见的字体可提高阅读速度并提升理解水平。
可访问的字体。
Adobe Fonts 上的 Google Foundry 等无障碍字体集合可帮助您为下一个设计选择最具包容性的字体。
没关系。
您可以通过选择字体来影响可读性。避免使用复杂的脚本和艺术字体。