引言
在本课中,我们将讨论如何测试您的内容是否具有可访问性。如果您已经观看了本主题的第一课,那么您应该已经熟悉“可访问性”这个术语,并了解其重要性。让我们回顾一下。数字可访问性是一个广义术语,旨在确保尽可能多的人能够使用网络,无论是操作在线服务还是消费在线内容。虽然可访问性具有法律和商业影响,但重要的是要记住,这些指南旨在为每个人提供更好的浏览体验。确保您的网站可访问的最简单方法是在设计和开发阶段就考虑这一点。然而,基于区块的主题提供了极大的灵活性,而能力越大,责任越大。幸运的是,许多技术性的可访问性问题通常可以通过自动化工具轻松检测和修复。例如,正确的标题层级、颜色对比度、有意义的替代文本、链接文本等。讽刺的是,这些正是网络上最常见的可访问性失败点。在本教程中,我们将重点扭转这一趋势,向您展示如何在发布前测试您创建的内容,并确保您的文章和页面是可用的。
WordPress 内置辅助工具
WordPress 在编辑器中包含两个内置的可访问性辅助工具。第一点:语义结构。点击“文档概览”,然后选择“大纲”,以检查您的标题是否按正确顺序排列。从 H2 开始,依次降序到 H6,不能跳过任何级别。WordPress 会用浅橙色标记错误的标题级别,并在您使用了不正确的标题级别时通知您。第二点:颜色对比度。如果您选择的文本和背景颜色组合未能提供足够的对比度,WordPress 会发出警告,提示这种颜色组合可能对读者来说难以辨认。尝试为背景和文本使用对比色,以增强可访问性。修复这些问题后,您的网站就已经比互联网上的大多数大型网站更好了。要修复颜色对比度,请选择相关区块(在本例中为按钮区块),然后在右侧的侧边栏设置中打开“样式”。接着,在“颜色”下方,我们可以更改背景颜色和文本颜色,以确保颜色对比度良好。
插件
接下来,让我们探索几个可访问性插件。WP Tota11y、Sa11y 和 Editoria11y 是彼此的不同变体。
WP Tota11y
WordPress Tota11y 是一个轻量级插件,可检查前端和编辑器中的常见可访问性合规性问题,通知您任何不正确的标题级别、颜色对比度、糟糕的链接文本、表单元素中缺失的标签以及图片中缺失的替代文本。该工具具有一个很酷的实验性功能,称为“屏幕阅读器魔杖”,可以像屏幕阅读器一样查看元素。您可以在每个类别中浏览警报并查看建议的修复方法,但建议在前端进行操作,因为在编辑器中可能会令人困惑,因为它会检查整个浏览器窗口。
Sa11y
第二点:Sa11y 在前端提供了一套全面的检查。您可以在“设置”下切换一些额外的检查,例如可读性、高级链接、颜色对比度和表单标签,您还可以在那里找到颜色滤镜,以测试您的页面在几种色盲类型的人看来是什么样子。虽然错误被清晰地标记出来,但描述较为笼统,修复方法也不够直接。Sa11y 允许管理员在其高级设置管理页面上定义和控制各种功能。
Editoria11y
Editora11y 专注于内容和结构。不会检查颜色对比度等设计元素。启用后,它会在前端和编辑器中显示警报,通知您关于文档大纲、标题级别、链接文本和目标(也称为“在新标签页中打开”)以及图片中缺失的替代文本。其目标是帮助作者和编辑发现常见问题,并用通俗语言描述失败点,建议修复方法,并允许用户在警报无关时隐藏或忽略它。Editora11y 还会生成报告,并允许管理员排除警报、跳过某些测试或基于 CSS 选择器包含元素。
Accessibility Checker
另外,还有流行的 Accessibility Checker,它在文章或页面编辑器窗口中添加了一个新部分,并在前端添加了一个悬停按钮。它显示错误的摘要、详细解释(包括相关代码片段)、可能的修复方法,以及忽略单个警报的选项。
操作系统应用和浏览器扩展
如果您想更进一步,测试更多技术方面,可以执行以下操作。第一,尝试仅使用键盘浏览您的网站。不要使用鼠标。使用 Tab 键在链接、按钮和表单字段之间导航,并按 Enter 或空格键激活页面上的这些交互元素。记录下需要修复的功能失效元素和缺失的视觉指示器。第二,您可以更改设备的配色方案,以确保在深色或高对比度模式下内容看起来正常且功能良好。
结论
总之,创建或维护内容的作者和内容管理者可以直接控制关键方面,如标题级别、文本大小、颜色对比、链接、图片替代文本等。换句话说,你无需接触代码就能避免生成不可访问的内容。只需保持用心和同理心。