宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取

Squarespace可访问性:如何获得ADA合规性[2022]-风君子博客在这篇文章中,Squarespace可访问性评分:获得ADA合规性有多容易?Squarespace网站易访问性的快速解决方案Squarespace易访问性技巧不要指望Squarespace内置的易访问性功能Squaq

网站建设者本应为网站建设排忧解难,但他们在易访问性方面往往做不到。当我想让你知道这件事的时候,最简单的方法就是你最后一次上网。

但随着与ADA相关的诉讼不断增多,你必须了解如何让残疾用户访问你的网站。考虑到这一点,我测试了Squarespace,看看是否有可能单独用它的建设者设计一个符合ADA的网站。

不幸的事实是,Squarespace的可访问性支持受到严重限制。当然,你可以努力实现ADA合规性。在网站上添加alt文本、删除动画和输入自定义代码都很容易。但这就是你真正能做的。

内置的可访问性解决方案非常少,您有三个选择。你可以自己编写自定义代码解决方案;你可以雇佣一个开发者为你做修改;或者,你可以使用accessiBe,走上更快更简单的路线。

开始,让我们看看如何实现Squarespace ADA与accessiBe的一致性。

Squarespace可访问性得分:获得ADA合规性的容易程度如何

可访问性得分:2/5

Squarespace可能是一个很好的网站建设者,但当我在本文中测试它时,我惊讶于可访问性功能是多么有限。

谢天谢地,Squarespace确实有一些内置的辅助功能。DOM排序——屏幕阅读器在页面上的元素之间移动的顺序——是自动处理的。按tab键也会自动显示一个跳到内容按钮。

Squarespace不提供任何专门为可访问性设计的模板。甚至不能在模板库中对“可访问”进行自定义搜索。而且,虽然向图像中添加alt文本和管理标题很容易,而不必触碰一行代码,但这几乎是Squarespace本机可访问性功能的全部功能。别误会,我仍然认为Squarespace是一个很好的建设者,如果你想尽可能轻松地建立一个现代化的网站。但这是以内置可访问性解决方案为代价的。幸运的是,有几种方法可以解决这个问题,所以你不必放弃你的Squarespace网站。

开始用Squarespace构建网站>>

让Squarespace网站易于访问的快速解决方案

有一个让Squarespace易于访问的快速解决方案。accessiBe有一个奇妙的Squarespace扩展,为您实现可访问性功能。这个由人工智能驱动的扩展每隔24小时扫描一次你的网站,寻找可访问性问题,并根据最新标准自动为你修复这些问题。

从阅读过最新的Web内容可访问性指南(WCAG)的人那里得到的信息——如果你没有任何编码或开发专业知识,其中有很多技术信息可能很难解读。accessiBe的专家随时掌握最新的WCAG更新,因此您无需如此。

除此之外,accessiBe还提供闭路字幕和音频转录服务,如果你有一个包含大量媒体内容的网站,这些服务可能会派上用场。鉴于Squarespace是我们最喜欢的制作精美在线公文包的网站建设者之一(请查看Squarespace评论,了解更多相关信息),这可能是一项非常有用的附加服务。

Get accessiBe for Squarespace>

Squarespace可访问性提示

在网站建设过程中,你可能忽略了网站的可访问性级别,尤其是如果你自己从未遇到过访问在线内容的问题。然而,作为一个网站所有者,建立一个包容和可访问的网站是你的责任。我没有时间在这里介绍这个主题的各个方面,所以请阅读我们的完整的web易访问性指南,以获得关于这个主题的更完整的信息。

在测试了其内置的可访问性功能,以及使Squarespace站点达到当前标准的任何其他提示和技巧后,我提出了以下指南,以实现Squarespace与ADA的完全一致性。

关闭图像效果

Squarespace的图像效果为网站添加运动。这可能包括导航运动效果,如视差滚动,或连续动画,如电影颗粒效果。虽然这些动画可以让你的网站更吸引大多数用户,但它们也会对眩晕或其他运动处理问题的用户产生负面影响。

Squarespace可访问性:如何获得ADA合规性[2022]-风君子博客

幸运的是,图像效果仅适用于部分背景图像。要检查是否启用了图像效果,请将鼠标悬停在要编辑的部分上,然后单击铅笔图标。

点击背景,向下滚动至图像效果下拉菜单,然后选择无 就这样!

确保对包含背景图像的每个部分重复此过程,因为没有通用的开关来关闭这些图像效果。

将Alt文本添加到图像中

Alt文本帮助有视觉障碍的用户理解网站上图像的内容。不仅如此,搜索引擎爬虫——影响网站在搜索引擎上分类的机器人——也会使用alt文本来解密内容。

幸运的是,在Squarespace上为图像添加alt文本非常容易。与前面的技巧一样,只需将鼠标悬停在包含图像的区域上。这一次,单击编辑内容按钮。单击内容以显示该部分中包含的所有图像的列表。

Squarespace可访问性:如何获得ADA合规性[2022]-风君子博客

单击要编辑的图像,向下滚动,直到看到图像Alt Text。在此框中添加alt文本。保持简短——例如,不需要添加“图片…”或“图片…”之类的措辞。Alt text应该是对图像中内容的非常简洁的解释。

我建议在你建立Squarespace网站时添加alt文本,这样你就不太可能错过任何图片。

添加自定义代码以提高可访问性

Squarespace为您提供了添加自定义代码的各种选项。您可以向网站的特定部分或页面添加代码块。您可以使用自定义CSS使样式更清晰(更改字体、颜色对比度等),从而使其适用于整个网站。或者,您可以使用代码注入将可访问性元数据添加到整个站点的特定功能中。

I已经详细介绍了下面最有用的技术,但显然,您需要至少了解一点关于编写HTML和CSS代码的知识,以及各种类型的ARIA角色。这些信息在网上很容易获得。

添加代码块

代码块非常适合添加辅助功能代码,比如向屏幕阅读器突出显示内容类型的ARIA landmark角色——例如,这可以包括表单字段或导航元素。

您可以将自定义代码块添加到除列表、图库或人物之外的任何分区类型。您可以使用模板上的现有部分,也可以添加新部分。

要添加一个全新的分区,请将鼠标悬停在与新分区相邻的分区上,然后单击“添加分区”

找到要编辑的部分后,将鼠标悬停在该部分的某个元素上,然后单击顶部或底部的加号按钮。这将打开一个弹出菜单。单击代码添加代码块。

Squarespace可访问性:如何获得ADA合规性[2022]-风君子博客

除了新的代码块,您还将看到一个带有内置代码编辑器的弹出菜单。转到此菜单顶部的下拉选择器,选择要输入的代码或文本类型。您可以从HTML、CSS、JavaScript、标记或纯文本中进行选择。

自定义CSS

添加自定义CSS将改变模板的外观和功能,如果您想微调某些元素,例如字体、配色方案,甚至是平板电脑或智能手机等其他设备上布局的响应性,这是理想的选择。

要添加自定义CSS,请单击侧栏菜单上的设计,然后单击自定义CSS

从这里,您可以添加自定义CSS代码来调整Squarespace模板。

自定义代码注入

这是一个更高级的选项,我只建议您在对自己的编码能力有信心的情况下使用它。在这里添加自定义HTML和JavaScript代码可以改变整个网站的运行方式。

这允许您覆盖Squarespace的一些内置功能,使其更易于访问。例如,Squarespace的builder目前只允许在图像上使用alt文本。通过代码注入,您可以在按钮、表单中的输入字段和链接等元素上添加alt text或ARIA标签,以支持辅助技术。

要执行此操作,请单击侧边栏上的设置,然后单击高级 然后,转到代码注入打开内置代码编辑器。在这里,您可以向网站页眉、页脚、锁定页面或订单确认页面添加自定义HTML或脚本。

值得注意的是,该功能仅在Squarespace的商业计划中可用。

使用第三方扩展如果你不是一个自信的程序员,别担心,你仍然可以用Squarespace构建一个完全符合ADA的网站。但是,您需要安装第三方可访问性扩展。

我建议将accessiBe与Squarespace结合使用,因为它会为您提供可访问性。这个人工智能驱动的解决方案每24小时扫描一次你的Squarespace网站(以评估你对内容所做的任何更改),并自动为你调整其代码,因此你无需担心找出响应性设计原则或alt-text和