排版

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

本模块着眼于基本的设计注意事项,以使您的内容更具包容性并覆盖更多人。

字体

字体是可能强烈影响文案无障碍功能的主要因素。您对字体和样式的选择可能会成就或毁掉任何页面设计。

患有阅读、学习和注意力障碍(如阅读障碍和注意力缺陷多动障碍 (ADHD))的人,以及视力低下的人,都可以在您使用无障碍字体时受益。

选择常用字体 创建无障碍设计的最快方法是选择常用字体(例如 Arial、Times New Roman、Calibri、Verdana 等等)。

许多字体研究测试了残疾人士,结果表明,与非常用字体相比,常用字体可以提高阅读速度和更深层次的理解水平。虽然常用字体本身并不比其他字体更具无障碍功能,但一些残疾人士更容易阅读它们,因为他们在使用(或围绕)这些字体方面有很多经验。

除了选择常用字体外,请务必避免华丽或手写字体,以及仅提供一种字符大小写(例如,仅大写字符)的字体。这些具有草书设计、古怪形状或艺术特征(如细线)的特殊字体可能看起来不错,但对于一些残疾人士来说,它们比常用字体更难阅读。

字母特征和字距调整

关于衬线字体或非衬线字体是否更易于阅读的研究尚无定论,但某些数字、字母或组合可能会使患有语言学习和认知障碍的人感到困惑。对于患有这些类型障碍的人来说,每个字母和数字都必须明确定义并具有独特的特征,这样字母才不会与数字混淆。

常见的可读性问题是:大写字母“I”(India)、小写字母“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。
  • 检查某些字母组合,以确保它们不是彼此完全的镜像。
  • 检查字距调整,尤其是在 rn 字母对之间。

字体大小和排版样式

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

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

不要
h2 {font-size: 16px;}
应该
h2 {font-size: 1rem;}

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

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

结构和布局

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

复杂的布局可能成为视力低下、阅读障碍以及美国 610 万患有 ADHD 的人的真正障碍。由于缺乏清晰的线性路径、缺少标题和未分组的元素,这些类型的障碍使人们更难以保持位置并跟随文案的流程。

无障碍布局设计的一个重要方面是使关键元素彼此区分开来,并将相似的元素分组在一起。如果元素太靠近,则很难分辨一个元素从哪里开始和结束,尤其是在它们具有相似样式的情况下。

将您的文案视为轮廓上各个项目符号的集合。这将帮助您规划整体页面结构,并使您能够在适当的时候使用标题、副标题和列表。

间距

段落、句子和单词间距有助于读者保持对文案的关注,并增加页面的整体视觉理解。长行文案可能成为残疾读者的障碍,因为他们难以保持位置并跟随文案的流程。

较窄的文案块使读者更容易继续阅读下一行。

内容对齐方式

许多残疾人士的另一个挫败感是阅读两端对齐的文案。两端对齐文案中单词之间不均匀的间距可能会导致“空格之河”在页面上形成,从而使文案难以阅读。

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

值得庆幸的是,关于间距和工具(如 Good Line-HeightGolden Ratio Calculator)有明确的指南,可以帮助我们使文案更易于访问。采用这些指南有助于患有注意力缺陷障碍、阅读障碍和视力障碍的人更专注于文案,而不是布局。

结构和布局的最佳实践

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

  • 使用标题、副标题、列表、数字、引用块和其他视觉分组等元素将页面分成多个部分。
  • 使用明确定义的段落、句子和单词间距。
  • 构建宽度小于 80 个字符的文案列(表意文字为 40 个字符)。
  • 避免两端对齐的段落对齐方式,这会在文案中创建“空格之河”。

无障碍排版要点

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

检查您的理解情况

测试您衡量无障碍功能的知识

为了文案的可读性,我应该始终在文案和背景之间使用高对比度。

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

哪些字体最适合无障碍功能?

系统字体,如 Arial 和 Verdana。
与非常用字体相比,常用字体可以提高阅读速度和更深层次的理解水平。
无障碍字体。
诸如 Adobe Fonts 上的 Google Foundry 之类的无障碍字体系列可以帮助您为下一个设计选择最具包容性的字体。
无关紧要。
您的字体选择会影响可读性。避免使用精细的脚本字体和艺术字体。