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