排版

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

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

字体

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

使用无障碍字体对有阅读、学习和注意力障碍(例如诵读困难和注意力缺陷多动障碍 [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 之间的排版。否则,类似“yarn”的单词可能会变成“yam”或“stern”变成“stem”,会彻底改变文案的含义。

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

当您寻找新的字体时,请特别注意以下几点:

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

字体大小和排版样式

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

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

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

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

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

结构和布局

虽然字体、字体大小和排版样式对于无障碍排版很重要,但对于用户的理解,网页上的文案的结构布局同样重要。

对于低视力、阅读障碍和美国 610 万多动症患者来说,复杂的布局是一个真正的障碍。由于缺乏清晰的线性路径、缺失的标题和未分组的元素,这些类型的残障让人们更加难以保持位置并遵循文案的流动。

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

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

间距

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

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

内容对齐方式

让许多残障人士感到另一个困扰是阅读正当的文案。在两端对齐的文案中,字词间的间距不均匀可能会导致“河道”在页面下方形成,使文案难以阅读。

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

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

有关结构和布局的最佳实践

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

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

无障碍排版要点

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

检查您的理解情况

测试您对衡量无障碍功能的掌握情况

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

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

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

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