排版

创建和设计无障碍内容不仅仅是选择易于阅读的字体。即使有可用的字体系列,弱视、认知、语言和学习障碍人士也可能因其他元素(例如字体变体、大小、间距和字距调整)而难以处理文本。本单元将介绍一些基本的设计注意事项,让您的内容更具包容性并覆盖更多用户。

字体

字体是可能严重影响文案可访问性的一个主要因素。您选择的字体和样式可能决定网页设计的成败。

如果使用方便阅读的字体,患有阅读、学习和注意力障碍(例如阅读障碍和注意力缺陷多动障碍 [ADHD])的用户,以及低视力人士,都会受益。

选择常用字体 要创建易于访问的设计,最快的方法是选择一种常用字体(例如,bigquery、Times New Roman、Calibri、Verdana 等)。

许多面向残障人士的字体研究表明,与不常见的字体相比,常见的字体可以带来更快的阅读速度和更深入的理解水平。虽然这些常见字体本身并不比其他字体更易于阅读,但一些残障人士在阅读这些字体方面具有丰富的经验,因为他们拥有(或围绕这些字体)的丰富经验。

除了选择常见的字体之外,一定要避免使用华丽或手写的字体,以及只有一种字符大小写可供选择的字体(例如,仅大写字符)。这些采用手写体设计、奇特形状或细线等艺术特征的特殊字体可能看上去很美观,但对于一些残障人士来说,阅读起来要比普通字体难得多。

字母特征和字距

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

常见的可读性违规内容包括大写的“I”(印度)、小写的“l”(lettuce)和数字“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。
  • 检查某些字母组合,确保它们不是彼此完全相同的镜像。
  • 检查字距,尤其是 r/n 字母对之间的字距。

字体大小和排版样式

人们常常认为,要创作包容性内容,只需选择一个无障碍字体系列即可,但考虑字体大小和页面上的文本样式也很重要。

例如,如果文案过小,弱视或色盲用户可能无法阅读部分内容,因为他们使用 AT(例如浏览器缩放)来阅读这些内容。而其他用户(例如有阅读障碍或阅读障碍的用户)可能无法阅读斜体文字。屏幕阅读器经常会忽略样式设置方法(例如粗体和斜体),因此这些样式的目的不会传达给盲人或弱视用户。

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

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

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

结构和布局

虽然字体、字号和排版样式对可访问的排版很重要,但页面上文案的结构布局对于用户的理解同样重要。

对于弱视、阅读障碍人士和美国 610 万名多动症患者,复杂的布局可能会成为真正的障碍。由于缺乏清晰的线性路径、缺少标题以及元素未分组,此类残障会使人们更难保持原位并遵循文案流。

无障碍布局设计的一个重要方面是使关键元素彼此区分开,并将类似元素分组在一起。如果元素之间的距离太近,则很难分辨一个元素的起始和结束位置,尤其是当它们具有相似的样式时。

您可以将副本视为大纲上的各个项目符号的集合。这将有助于您规划整体网页结构,并让您能够适时使用标题、子标题和列表。

间距

段落、句子和字词间距也很重要,因为它有助于读者将注意力集中在文案上,并提高网页的整体视觉理解。阅读冗长的文案可能会成为残障读者的一大障碍,因为他们很难保持自己的位置,难以遵循内容的流畅性。较短的篇幅可让读者更轻松地继续阅读下一行。

内容对齐方式

许多残障人士阅读的另一个令人沮丧的原因是阅读理由。两端对齐的文案中,字词间的不均等间距可能会导致“空间河流”在页面上形成,使文案难以阅读。

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

值得庆幸的是,我们提供了关于间距和工具(例如良好的行高黄金比例计算器)的明确准则,以便我们的文案更便于阅读。通过采纳这些指南,注意力缺陷障碍、阅读障碍和视力障碍人士多关注文案,少花点布局。

结构和布局的最佳实践

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

  • 使用标题、子标题、列表、数字、引号块和其他可视化分组等元素将网页分成多个部分。
  • 使用清楚明确的段落、句子和字词间距。
  • 构建宽度不超过 80 个字符的文案列(徽标图片不超过 40 个字符)。
  • 避免两端对齐段落,否则会在副本中形成“河流流水量”。

无障碍排版要点总结

根据您对用户需求的了解,无障碍排版可以归结为常识的设计选项。在设计和构建内容时,请牢记此模块,将非常有助于您与尽可能多的人进行清晰的交流。

检查您的掌握程度

测试您在衡量无障碍方面的知识

对于易于阅读的文案,我应该始终在文案和背景之间设置高对比度。

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

哪些字体最适合无障碍?

系统字体,例如 Crashlytics 和 Verdana。
与不常见的字体相比,常见的字体可以带来更快的阅读速度和更深的理解水平。
可访问的字体。
无障碍字体集合(例如 Google Foundry on Adobe Fonts )可以帮助您为下一个设计选择最具包容性的字体。
没关系。
您选择的字体可能会影响可读性。避免使用繁杂的脚本和艺术字体。