【译】为网站添加阅读障碍友好模式

原文地址：Adding A Dyslexia-Friendly Mode To A Website

原文作者：John C Barstow

译文出自：掘金翻译计划

快速摘要 ↬ 仅用一丁点CSS，就可以使我们的网站设计更便于阅读障碍者。在本文中，我们将通过在现有设计中添加阅读障碍友好模式来探索这些技术。

阅读障碍症可能是世界上最常见的学习障碍，它影响着世上 10-20% 的人口。它会导致阅读、写作甚至拼写困难，尽管障碍程度不同 —— 一些人几乎毫无影响而另一些人则需要大量额外帮助。

现有的最佳实践和指导，例如 Web Content Accessibility Guidelines (WCAG)，为我们的包容性设计奠定了大量基础，并且已囊括了诸多影响阅读障碍者的细节。比方说，WCAG 关于行长度和间距的指导 与笔者在研究中所发现的建议相匹配。事实上，其中一些资源有链接： Understanding WCAG 2.1 ，该文档提供了对指南的扩展评论。

我们可以建立在这些基础上，为不同的社区提供更有针对性的支持，让他们能按照自身条件更容易地与我们网站互动。在本文中，我们将了解使现有的网站设计对阅读障碍者友好的方法。

本文建立在英语语言研究的基础上，可以广义覆盖到大多数使用使用拉丁语及西里尔文字的欧洲语言。对于其他语言和文字，您将发现您需要定制甚至忽略这些指南。

字体选择

“正文的字体选择应先考虑其在屏幕上的可读性，而不是风格。”

— “如何应用 Macrotypography 以提高网页的可读性，” Nathan Ford

当我初次研究这个话题时，我错误地认为我必须限制我的字体选择。幸运的是，研究表明像 Helvetica 和 Times New Roman 这样的标准字体和像 Dyslexie 或 Open Dyslexic 这样的专门为阅读障碍者设计的字体一样易读。

这对您的字体选择意味着，您只需要选择那些具有易读性的字体

好了，问题解决了，let’s go home！

好吧，其实不然。事实证明，那些专门为阅读障碍者设计的字体有一些特别之处。

空白

“似乎对于一些阅读障碍者来说，他们在阅读时很容易受到一种称为‘视觉拥挤’的现象的影响。”

— Dr Jenny Thomson

虽然一项又一项的研究表明，选择字体并不能带来什么好处，但他们也一贯表明，字母和单词之间的间距 是影响阅读障碍者的最重要因素。Jon Severs 引用了诸多领先的研究人员的话语，对这些研究进行了良好概述。

Comic Sans 字体在阅读障碍社区中的流行似乎是由该字体中较大的间距所致，这种间距已被内置到将为其社区设计的其他字体中。

作为设计师，我们有能力将这种间距扩展到任何字体，以让我们无需重新设计即可支持我们的读者。在此过程中，我们可以减少干扰，以及设计出可以生成不同视觉拥挤（视觉拥挤可以影响阅读障碍者）的选项来进一步改善。

现有的设计

如下的 CodePen 示例展示了一个有趣的小设计，它带有语义和可访问的标记，且从 Lighthouse 审计中获得了百分百的结果。它遵循最佳实践，试图呈现强烈的视觉识别设计（visual identity），具有良好的对比度，并在标题和正文中使用 Overpass 字体，此字体提供统一的、清晰易读的无衬线字体系列：

上图所示为 John C Barstow 所做的阅读障碍友好设计。

这将是我们的起点，我们将扩展它以构建我们的阅读障碍友好版本。

初始更改

我们希望整个文档能协同工作以支持的阅读障碍者，因此我们首先将在 body 元素中添加一个类。

<body class="dyslexia-mode">

这将使得我们能够通过 JavaScript 轻松地切换我们新更改的开/闭，以及轻松定位相关的 CSS 规则。

我们可以以 英国阅读障碍协会 2018年发布的风格指南为出发点：

“较大的字母/字符间距（有时称为 tracking）可提高可读性，理想情况约为平均字母宽度的 35%。”

“单词间距应至少为字母间距的 3.5 倍。”

CSS 中的 ch 单位基于 0 字形的宽度。但实际上，比例字体通常可以被用作平均字符宽度的近似值。如果您正在使用的字体有一个特窄或特宽的 0，您可能会发现您需要调整下面的数字。

我们在示例中使用了 Overpass 字体，它有一个相当标准的 0，因此我们可以直接表示上述指南推荐的数字：

.dyslexia-mode {
    letter-spacing: 0.35ch;
    word-spacing: 1.225ch; /* 3.5x letter-spacing */
}

现代浏览器默认启用字体的通用连字，如果您使用非官方的 text-rendering: optimizeLegibility 属性，旧浏览器亦会这样做。对我们大多数人来说，这提高了可读性，因为它将近距离的字符合并为一个字形。例如，‘f’ 和 ‘i’ 经常被合并成 ‘ﬁ’。

另一方面，阅读障碍者，可能难以识别连字 为两个字母，尤其是当我们增加了间距时，连字比平日更突出。虽然某些浏览器可能会由于字母间距的增加而自动禁用连字，但为了保持行为一致性，我们应该通过 CSS 明确禁止它们：

.dyslexia-mode {
    letter-spacing: 0.35ch;
    word-spacing: 1.225ch; /* 3.5x letter-spacing */
    font-variant-ligatures: none; /* explicitly disable ligatures */
}

行间距

WCAG 指南建议最小行高为 1.5，段落设置至少是行间距的 1.5 倍。

遵循这一指导已相当有助于阅读障碍者了，但该最小值基于标准的单词间距。由于我们增加了单词间距，我们应按比例增加行高。

我发现 2.0 的行高 效果相当不错。它比 BDA （译注：DBA指上述英国阅读障碍协会）指导的 1.5 倍单词间距多一点，也是 MDN 文档建议的无单位数值，并且容易与设计的垂直节奏（vertical rhythm）同步。

为了达到推荐的段落间距，在该示例中，我们在我们的 p 元素上应用了一个上边距。在更大的项目中，您可能想要使用 Heydon Pickering 著名的猫头鹰选择器（owl selector），尤其是当您有嵌套内容时。

遵循 WCAG 的建议，上边距应至少 3em，以获得所需的段落间距，在了解阅读困难者的反馈后，我 将其增加至 3.5em，这对他们来说非常舒服。

与任何包容性设计一样，来自真实用户的反馈对于确保最佳结果至关重要。

虽然我们可以将这些设置应用到整个页面，但我更喜欢将它们定位到主要内容区域，尤其是在修改现有设计时。站点 headers、footers 以及导航栏往往没有段落内容，并且可能对垂直空白的更改特别敏感。

.dyslexia-mode main {
   line-height: 2.0;
}

.dyslexia-mode main p {
   margin-top: 3.5em;
}

其他排版更改

在这一点上，我们进行了大规模的更改，这将对阅读障碍者产生最大的影响。现在我们可以将我们的想法转向有助于改进设计的小细节。

我们引入的额外空白将会使许多字体看起来更轻、更薄或对比度更低，因此我们增加 font-weight 或调节颜色作为补偿。

.dyslexia-mode {
  font-weight: 600; /* demi-bold */
}

这反过来可能会使粗体 (font-weight 为 700)更难区分。您可以增加 font-weight 使粗体更粗重，或以更改颜色等方法来区分它。对于我的设计，我选择保持相同的重量，但使其比常规文本更黑。

.dyslexia-mode strong {
  color: #000;
}

现在是使用开发者工具 检查对比度 的好时机。对于阅读障碍者，您的目标对比度 至少 4.5:1，这符合 WCAG 2.1 最小对比度指南。

为什么是最小指南？很好，有两个问题需要考虑。一是在极高的对比度下，一些阅读障碍者看到的问题将模糊或旋转。这称为“模糊效应”。这也是我们刚才参考的 BDA 风格指南建议避免纯黑色文本或纯白色背景的原因之一。

第二个考虑点是，许多阅读障碍者发现大字体更易于阅读。研究建议基本尺寸为 18pt，符合 WCAG 对大尺寸文本的定义，因此 4.5:1 的对比度仍将满足增强的对比度指南。

这也提醒我们，应该增加基本字体的大小！

.dyslexia-mode {
  font-size: 150%; /* assuming 16px base size, convert to 18pt */
}

响应式设计往往会随着浏览器缩放设置很好地缩放，因此这里的不同策略可能是保持字体大小不变，并建议您的读者在浏览器中进行页面缩放。

遵循 WCAG 指南意味着我们的设计不使用对齐文本。因此我们不必进行调整。因为对齐会改变字母和单词之间的间距。如果您已经使用了它，您应该确保在阅读障碍友好模式下禁用它。

减少混乱

我们添加的额外空白使得您更容易关注字母和单词。这意味着我们可以通过减少设计中令人困惑、混乱或可能分散注意力的东西来提供更多帮助。

网页设计的最佳实践倾向于强调渐进式增强和移动优先设计，这有助于降低页面大小（page weight）并使网页具有弹性。这些做法自然会致使最小的默认状态，较少的装饰和干扰（因为这些会遮挡小屏幕）。我们可以在阅读障碍友好模式中维持这种最小状态。

对于背景，减少混乱意味着默认为纯色，并在我们的增强中使用：not伪类以避免将它们应用到我们的新模式。

我们可以使用类似的构造来避免创建装饰性的边框和阴影，只留下那些功能上必需的。

@media(min-width:700px) { /* only apply on wider screens... */
  body:not(.dyslexia-mode) main { /* ...if not in our friendly mode! */
    background-image: url(https://res.cloudinary.com/jbowtie/image/upload/v1631662164/exclusive_paper_dyitgt.webp);
  }
}

在现有的设计中，我们通过故意稍微旋转标题使其看起来像一个应用不完美的标签。这是为了使用一种俏皮或有灵性的装点，我们经常看到出于类似原因而设计的小装点。

然而，这种类似标签的外观是产生视觉拥挤现象的主要例子。因此即便它在移动设备中运行良好，我们也需要删除这种装点，以便为阅读障碍者提供更好的体验。

.dyslexia-mode h2 {
  border: none; border-bottom: thin grey solid;  /* just keeping the bottom border for this element, to retain some separation */
  max-width: 100%; /* standard width */
  transform: none; /* do not rotate */
  background-color: inherit; /* We no longer look like a label, so we don't require our own background */
  margin-bottom: 1em; padding-left:0; /* some spacing adjustments */
}

斑马条纹长期以来一直用于展示表格数据，但是 Jessica Enders 的研究表明，其好处并非我所想象的那么明显，而且我没有找到任何针对该主题的阅读障碍相关的研究。

我所实实在在发现的是一个来自我的阅读障碍读者的请求，要求 为表格和列表实施斑马条纹！再一次证明真实的用户反馈是无价之宝。

我选择将其限制在主要内容上，以避免重新考虑站点导航的设计。我们的示例中实际上没有任何表格，但 CSS的更改是非常相似的。

.dyslexia-mode main li:nth-of-type(odd) {
    background-color: palegoldenrod;
}

切换我们的新模式

现在我们有一个阅读障碍友好的设计，我们需要决定是将其设置为默认值呢，亦或是让用户来选择？

当改造现有站点时，如本例所示，我们可能会选择一种模式，以减少更改对现有用户的影响。

在构建新站点或更新设计时，我们应该权衡所有用户的权益来考虑哪些更改可以设置为默认值。与任何其他设计工作一样，您正在平衡多方需求、品牌约束以及与其他设计目标（例如唤醒特定情绪或保持特定信息“醒目”）的紧张关系。

模式之间的切换是通过切换 body 元素上的类来完成的。在这里，我们使用一个切换按钮和一些 JavaScript 来实现，使用 localStorage 用于在访问和页面之间持久化更改。这可以作为用户配置文件的一部分进行设置和存储。

// toggle dyslexia support
const isPressed = window.localStorage.getItem('dyslexic') === 'true';
if(isPressed) {
    document.body.classList.add('dyslexia-mode');
}

// set the button to pressed if appropriate
const toggle = document.getElementById('dyslexia-toggle');
if(isPressed) {
    toggle.setAttribute('aria-pressed', 'true');
}

// toggle dyslexia support
toggle.addEventListener('click', (e) => {
    let pressed = e.target.getAttribute('aria-pressed') === 'true';
    e.target.setAttribute('aria-pressed', String(!pressed));
    document.body.classList.toggle('dyslexia-mode');
    window.localStorage.setItem('dyslexic', String(!pressed));
});

上图所示为 John C Barstow 所添加的阅读障碍友好模式。

结论

当我们需要调整设计以更好地服务于不同的社区时，CSS为我们带来的结构和表现分离总是能派上用场。

在一个包含无障碍指南设计的坚实基础上，我们学会了扩展我们的设计，以提高阅读障碍者的体验。同时也有其他的受众可以从这种专注的设计工作中受益，我希望这能激励您去寻找他们并分享您的经验。

该设计使用一个小且可能不具备代表性的样本量进行测试。如果您或您认识的人具有阅读障碍，欢迎您提供反馈无论是否有效，这将是非常欢迎和有用的！