掌握可访问的网页排版

null

响应式网页设计网络辅助功能已经成熟,并且已经出现了向在线用户呈现文本的新模式。因此,可访问的类型选择比以往任何时候都更重要。

网络类型:快速链接

关于可访问类型设计,应用程序和代码方法的大量信息非常惊人,但有一点是清楚的:内容的可读性是几乎每个网站的主要目标。

Fontsmith与Mencap合作,为残疾人研究,测试和设计无障碍字体。以下是我们的一些发现。

01.字体设计

易读性与可读性

易读性涉及的问题如下:你能认出这封信或字吗?你能解释和理解这个词吗?可读性关注:阅读体验有多舒适?可访问类型设计既清晰又易读。

Serif Vs Sans

我们使用Mencap进行的研究表明,无衬线字体是最易于使用的样式,因为阅读障碍者认为无衬线字母内的细节是复杂的。

Sans字体具有简化的结构;他们更接近我们学到的笔迹。即使在最恶劣的渲染环境中,单线性无形显示也能以更小的像素尺寸以更稳健的方式显示。

Fontsmith’s FS Untitled makes a clear distinction between I (eye) and 1 (one)

Fontsmith的FS Untitled明确区分I(眼睛)和1(一)

字母形状

选择具有强烈字符识别质量的字体有助于提高易读性。那些有视觉障碍的人会发现某些字母令人困惑,因此重要的是这些字母形状是明确定义的。常见的罪犯是'I'(大眼睛),'我'(低眼),'l'(el)和'1'(一个)。封闭的'C'看起来像'O'。

打开柜台形状有助于阅读。 'r'和'n'的组合可以读作'm'。长的上升和下降也很重要。它们有助于定义眼睛可以快速扫描和解释的外部单词形状。

字体比例

可以使用大的x高度和中等到宽的比例。较大的x高度通常会在字母内部推断出更大的空白区域,这有助于定义和清晰度。通常,压缩和压缩宽度样式被提升为启用流畅且响应更快的布局,但重要的是要意识到通过使用空间有限的压缩字体(例如在移动设备上),您还可能降低可访问性。

提示

提示描述了打开或关闭像素的程度,以提高特定像素大小的字母质量。尽管屏幕分辨率有所提高,但字体提示仍然是一种必不可少的类型设计过程。大多数代工厂自动化暗示并取得非常好的效果,但要保持预期:没有任何暗示会使重量看起来很好,12px。

02.键入申请

尺寸很重要。请注意,字体之间的实际大小可能会有很大差异

重量

通过为每种字体分配角色来建立层次结构。层次结构使眼睛能够将信息分解为清晰的体验。对子标题和正文使用开放的中音重量。设置一个测试来评估浏览器平台 - 权重可以从一个环境到下一个环境发生巨大变化。如果需要,实施输入渲染混合平衡外观。

尺寸

尺寸很重要。请注意,每种字体在字体上都有不同的比例,字体之间的实际尺寸可能会有很大差异:一种字体中的14px可能相当于另一种字体中的18px。身体的平均尺寸范围从14px到16px。作为一般规则,16px-plus被认为是最具包容性的。字体大小也会影响渲染质量。找到为您的主要平台提供最佳渲染效果的最佳位置。

线高和长度

给类型空间呼吸。你的眼睛需要能够轻松地从一条线到另一条线进行跟踪。该Web内容可访问性指南(WCAG)建议身体副本的行高为1.5。根据需要评估,减少或增加。扫描长行文字正在测试你的眼睛。研究表明,在线平均线长度约为70-80个字符。限制行数不超过16个字。

颜色

像所有视觉元素一样,类型必须具有足够的对比度如果灰度和字体重量太轻,则白色背景上的灰色类型可能难以阅读。 Fontsmith的FS无标题具有良好的“分级”重量,以帮助用户平衡其外观。深色背景上的白色类型将在屏幕上“发光”,使其看起来更紧,某些字体可能需要调整字母空间。

03.键入技术

Fontsmith的FS Untitled有很好的'分级'权重(点击右上方的箭头图标放大此图片)

字体加载策略

慢速连接和大字体文件使文本加载时间变慢。具有完整欧洲字符集的单个WOFF文件将大小为36-50KB。需要考虑FOUT的状态(无格式文本的闪烁)或FOIT(隐形文本的闪烁)。 FOIT是主要的浏览器默认值,在美学方面,FOIT是可取的,但在可访问性方面,FOUT肯定是要走的路。

那是因为看到一些内容比没有内容更好。目标是在所有Web字体加载之前以回退字体显示文本,这样可以避免对页面上的多个元素进行任何持续的抖动。使用Web Font Loader实现并设置cookie,因为这可以最大限度地减少进入站点的FOUT。

后备字体

选择受限于移动设备。乔丹摩尔的移动后备兼容性表说明了问题。选择后备时,拍摄相似的重量和比例。调整后备指标以匹配您选择的字体大小。通过在后备上覆盖可访问的字体并判断来通知您的选择决策。

文本渲染

使用optimiseLegibility启用字距调整并提高渲染质量。此设置还启用了连字,您可以根据需要通过设置.classname {font-feature-settings:“liga”0; }。

保护字体

开发高质量的字体需要多年的努力和投入。考虑到类型在所有Web项目中的重要作用,您采取措施保护其中的投资,这是公平的。使用CORS部署字体,确保只允许站点访问这些文件。

我们的目标是使类型尽可能地易于访问。我们与标牌和环保团队合作创建了一个21世纪的寻路字体FS Millbank,旨在帮助在繁忙的环境中进行导航。使用FS Untitled,我们的目标是创建一个更易读的网络,确保所有人都可以使用可访问的排版。

本文最初发表于网络杂志问题286。在这里订阅

相关文章



翻译字数超限