John C Barstow 2021年11月23日0评论添加一个阅读障碍友好模式到一个网站12分钟阅读CSS，可用性，可访问性，技术，用户体验分享在推特席上，LinkedIn
关于作者
John C Barstow已经写了软件超过30年，目前是一个在新西兰的网络开发者。他的特殊兴趣包括Unicode，…更多关于John的信息↬
电子邮件时事通讯关于前端和用户体验的（精彩的）电子邮件“KDSP”每周提示。受到19万人的信任。
构建现代HTML电子邮件了解更多关于HubSpot的CMS前端新冒险，2022版快速总结↬ 通过一点CSS，我们可以调整我们的网页设计，使之更适合患有阅读障碍的人。在本文中，我们将通过在现有设计中添加一个对阅读障碍友好的模式来探索这些技术。
诵读困难症可能是世界上最常见的学习障碍，影响世界人口的10-20%。它会导致阅读、写作和拼写困难，尽管损伤的程度差别很大——有些人几乎没有受到影响，而另一些人则需要大量额外的支持。
现有的最佳实践和指导，如Web内容可访问性指南（WCAG），为我们的包容性设计提供了坚实的基础，并且已经包含了许多影响诵读困难的读者的细节。例如，WCAG关于线路长度和间距的指导与我在研究中发现的建议相匹配。事实上，其中一些资源与WCAG 2.1谅解文件相关联，该文件提供了对指南的扩展评论。
“KDSP”我们可以在这些基础上为不同的社区提供更集中的支持，使我们更容易按照自己的条件与我们的网站互动。在本文中，我们将探讨如何使现有的设计对诵读困难症友好。
本文以英语语言研究为基础，可以概括为涵盖大多数使用拉丁语和西里尔语脚本的欧洲语言。对于其他语言和脚本，您会发现需要定制甚至忽略这些准则。
字体选择“正文副本的字体应根据其屏幕可读性进行选择，然后再考虑样式。”-Nathan Ford的
一书中写道：“如何将宏观排版技术应用于更具可读性的网页”。当我第一次开始研究这个主题时，我错误地认为我必须限制字体的选择。幸运的是，研究表明，Helvetica和Times New Roman等标准字体的可读性与专为阅读障碍或开放式阅读障碍而设计的字体一样。
这对字体选择意味着，您只需在选择字体时考虑字迹的易读性。好了，问题解决了，我们回家吧！
嗯，不是真的。事实证明，这些特制字体有一些特殊之处。
空白“似乎至少对一些患有阅读障碍的人来说，他们在阅读时容易受到一种称为“视觉拥挤”的现象的影响。”詹妮·汤姆森博士的“KDSP”一项又一项研究表明，字体的选择几乎没有什么好处，但他们也一致认为字母和单词之间的间距是支持阅读困难者的最重要因素。Jon Severs引用了许多顶尖研究人员的话，对这些研究进行了很好的概述。
漫画SAN在诵读困难者社区中的流行似乎是由该字体中更宽的间距所驱动的，该间距已内置于为其社区设计的其他字体中。
作为设计师，我们有能力将此间距扩展到任何字体，使我们能够在不进行重大重新设计的情况下支持我们的读者。当我们这样做的时候，我们可以通过减少分心和设计选择来进一步改善事情，这些选择会产生视觉拥挤，影响阅读困难的读者。
在跳跃之后更多！继续阅读下面的内容↓ “KDSP”将在前端和用户体验方面举办精彩的在线研讨会，包括实用外卖、现场会议、视频录制和友好的设计系统问答，CSS/JS和UX。与Carie Fisher、Stefan Baumgartner和其他许多人合作。
跳转到在线研讨会↬ 
现有设计
下面的代码笔示例展示了一个有趣的小设计，它带有语义和可访问的标记，100%来自Lighthouse审计。它遵循最佳实践，试图呈现强烈的视觉标识，具有良好的对比度，并使用天桥作为标题和正文，从而提供统一且清晰的无衬线字体系列：
“KDSP”见笔[阅读困难不友好设计](https://codepen.io/smashingmag/pen/jOLXpgg)作者：约翰·C·巴斯托。
见John C Barstow笔式诵读困难症不友好设计。“KDSP”这将是我们的起点，我们将扩展它来构建我们的阅读障碍友好版本。
初始更改
我们希望整个文档一起工作以支持我们的诵读困难读者，因此我们将首先向body元素添加一个类。
这将允许我们通过JavaScript轻松地打开和关闭我们的新更改，并使我们能够轻松找到相关的CSS规则。
英国诵读困难症协会于2018年发布了一份风格指南，我们可以以此为出发点：
“较大的字母/字符间距（有时称为跟踪）提高可读性，理想情况下为平均字母宽度的35%左右。”“字间距应至少为字母间距的3.5倍。”
CSS中的ch单位基于0字形的进阶，但实际上比例字体通常可以用作平均字符宽度的近似值。如果您使用的字体具有特别窄或宽的零，您可能会发现需要调整下面的数字。
我们在示例中使用的是Overpass，它有一个相当标准的零，因此我们可以直接表示建议的数字：
。诵读困难模式{字母间距：0.35ch；}
现代浏览器默认启用字体的通用连字，如果使用非官方文本呈现：OptimizeIberability属性，旧浏览器也会这样做。对于我们大多数人来说，这提高了易读性，因为它将近距字符合并到单个字形中。例如，“f”和“i”经常合并为“f”。另一方面，
阅读困难的读者可能很难将连字识别为两个字母，特别是我们增加了间距，使得连字比平时更为突出。虽然一些浏览器可能会因为增加了字母间距而自动禁用连字，但为了保持一致的行为，我们应该通过CSS
明确禁用连字。诵读困难模式{字距：1.225ch；/*3.5倍字母间距*/}行距“KDSP”WCAG指南建议最小行距为1.5，段落设置至少为行距的1.5倍。遵循此指南的
对于阅读困难的读者已经非常有用，但最小值基于标准单词间距。因为我们在增加单词间距，所以我们应该按比例增加行距。
我发现2.0的行高度工作得很好。它比BDA的1.5倍字间距的指导稍多一些，MDN文档中建议的无单位，并且易于与设计的垂直节奏同步。
为了达到推荐的段落间距，在本例中，我们在p元素上应用了上边距。在一个更大的项目中，您可能希望使用Heydon Pickering著名的owl选择器，尤其是当您有嵌套内容时。
根据WCAG的建议，顶部边距应至少为3em，以获得所需的段落间距。在我的诵读困难症读者的反馈之后，我将其增加到3.5em，这对他们来说更舒服。
“KDSP”与任何包容性设计一样，来自真实用户的反馈对于确保最佳效果至关重要。
“KDSP”虽然我们可以将这些设置应用于整个页面，但我更倾向于将其定位于主要内容区域，尤其是在修改现有设计时。网站页眉、页脚和导航往往没有段落内容，并且可能对垂直空白更改特别敏感。
。诵读困难模式主要{}.阅读障碍模式{边缘顶部：3.5em；}在这一点上，我们进行了大规模的改变，这将对阅读困难的读者产生最大的影响。现在，我们可以把我们的想法转向有助于优化设计的小技巧。
我们引入的额外空白将使许多字体看起来更轻、更薄或对比度更低，因此我们可以增加字体重量或调整颜色以进行补偿。
。诵读困难模式{字体大小：600；/*半黑体*/}“KDSP”这反过来可能使粗体（字体重量为700）更难区分。您可以通过增加字体的重量或通过其他方式（如更改大小或颜色）来区分粗体字。对于我的设计，我选择保持相同的重量，但使其比常规文本更暗。
。阅读障碍模式强{}“KDSP”现在是使用开发人员工具检查对比度的好时机。对于阅读困难的读者，你的目标应该是对比度至少为4.5:1，这符合WCAG 2.1最低对比度指南。
“KDSP”为什么是最低准则？嗯，有两个问题需要考虑。一是，在对比度非常高的情况下，一些诵读困难的读者会看到他们的文本模糊或旋转。这就是所谓的“模糊效果”。这是我们前面引用的BDA样式指南建议避免纯黑色文本或纯白色背景的原因之一。第二个考虑因素是许多诵读困难的读者发现较大的字体更容易阅读。研究表明，基本尺寸为18pt，符合WCAG对大规模文本的定义，因此4.5:1的对比度仍然符合增强对比度准则。
提醒我们，我们应该增大基本字体大小！
。诵读困难模式{}“KDSP”响应性设计往往能很好地与浏览器缩放设置进行缩放，因此这里的另一个策略可能是保持字体大小不变，并建议读者在浏览器中增加页面缩放。遵循WCAG指南的
“KDSP”意味着我们的设计没有使用经过验证的文本，因此我们不必进行调整。因为对正可以改变字母和单词之间的间距，如果您已经使用了对正，那么您应该确保在阅读障碍友好模式下禁用对正。
减少混乱“KDSP”我们添加的额外空白使我们更容易关注字母和单词。这意味着我们可以通过减少设计中令人困惑、混乱或可能分散注意力的东西来提供更多帮助。
“KDSP”web设计中的最佳实践往往强调渐进式增强和移动优先设计，这有助于降低页面权重并使网页具有弹性。这些做法自然会导致最小的默认状态，更少的装饰和干扰（因为这些会压倒小屏幕）。我们可以在阅读障碍友好模式下保持这种最小状态。
作为背景，这意味着默认为纯色，并在增强功能中使用：not伪类，以避免将它们应用于新模式。
我们可以使用类似的构造来避免创建装饰性边框和阴影，只留下功能上必要的边框和阴影。
@media（最小宽度：700px）{/*仅适用于更宽的屏幕*/背景图片：url(https://res.cloudinary.com/jbowtie/image/upload/v1631662164/exclusive_paper_dyitgt.webp);}}“KDSP”在现有的设计中，我们故意通过稍微旋转标题使其看起来像一个应用不完善的打印标签。这是为了唤起一种好玩的或人性化的触感，我们经常看到设计出于类似的原因采用类似的小触感。
然而，这种类似标签的外观是产生视觉拥挤的装饰元素的主要例子。因此，即使它在移动环境下运行良好，我们也需要消除这种接触，为我们的诵读困难的读者提供更好的体验。
。诵读困难模式h2{边界：无；边框底部：薄灰色实体；/*只保留此元素的底部边框，以保留一些分隔*/转换：无；/*不要旋转*/背景色：继承；/*我们不再像一个标签，所以我们不需要自己的背景*/}
斑马条纹一直被用于显示表格数据，但Jessica Enders的研究表明，其好处并不一定像我所想的那么明显，我也没有发现任何针对阅读障碍的研究。
我所发现的是我的诵读困难症读者的一个请求，即为表格和列表实现斑马条纹！再一次，真正的用户反馈是无价的。
我选择将其限制在主要内容中，以避免重新审视站点导航的设计。在我们的示例中，实际上没有任何表，但是CSS的更改非常类似。
。诵读困难模式主李：第N种类型（奇数）{背景颜色：淡黄花；常量isPressed=窗口。本地存储。getItem（‘诵读困难’）==‘true’；文件身体班级名单。添加（“诵读困难模式”）；//如果合适，将按钮设置为按下const toggle=文档。getElementById（“诵读困难-切换”）；切换。setAttribute（'aria-pressed'，'true'）；}切换。addEventListener（'单击'，（e）=>{e、 目标。setAttribute（'aria-pressed'，String（！pressed））；窗本地存储。setItem（'诵读困难'，字符串（！按下））；
内容来源网络，如有侵权，联系删除，本文地址：https://www.230890.com/zhan/141873.html
