引言
在本课程中，我们将讨论如何测试内容的可访问性。如果您观看过该主题的第一课，您已经熟悉可访问性这一术语并了解其重要性。让我们回顾一下：数字可访问性是一个广义术语，确保尽可能多的人能够使用网络，无论是操作在线服务还是消费在线内容。虽然可访问性具有法律和商业影响，但重要的是要记住，这些准则承诺为每个人提供更好的浏览体验。确保您的网站可访问的最简单方法是在设计和开发阶段就加以考虑。然而，基于区块的主题提供了极大的灵活性，而能力越大责任越大。幸运的是，许多技术可访问性问题通常可以通过自动化工具轻松检测和修复，例如正确的标题级别、颜色对比度、有意义的替代文本、链接文本等。具有讽刺意味的是，这些正是网络上最常见的可访问性失败案例。在本教程中，我们将重点扭转这一局面，向您展示如何在发布前测试您创建的内容，并确保您的文章和页面可用。
WordPress内置辅助工具
WordPress在编辑器中包含两个内置的可访问性辅助工具。第一，语义结构。点击文档概览，然后点击大纲，检查您的标题是否正确排序。从H2开始，按降序排列至H6，不得跳过任何级别。WordPress会用浅橙色标记错误的标题级别，并在您使用不正确标题级别时通知您。第二，颜色对比度。如果您选择的文本和背景颜色组合未能提供足够的对比度，WordPress会发出警告，指出这种颜色组合可能难以阅读。尝试使用对比色作为背景和文本以增强可访问性。修复这些问题，您就已经比互联网上的大多数大型网站做得更好。要修复颜色对比度，选择相关区块（本例中为按钮区块），然后在右侧边栏设置中打开样式。接着，在颜色下方，我们可以更改背景颜色和文本颜色，确保颜色对比良好。
插件
接下来，让我们探索一些可访问性插件。WP Tota11y、Sa11y和Editoria11y是彼此的变体。
WP Tota11y
WordPress Tota11y是一个轻量级插件，检查前端和编辑器中的常见可访问性合规问题，通知您任何不正确的标题级别、颜色对比度、不良链接文本、表单元素中缺失的标签以及图像中缺失的替代文本。该工具有一个简洁的实验性功能，称为屏幕阅读器魔杖，可以像屏幕阅读器一样查看元素。您可以浏览每个类别中的警报并查看建议的修复，但建议在前端进行操作，因为在编辑器中检查整个浏览器窗口可能会令人困惑。
Sa11y
第二，Sa11y Sally在前端提供全面的检查集。您可以在设置下切换一些额外检查，如可读性、高级链接、颜色对比度和表单标签，在那里您还可以找到颜色过滤器，以测试您的页面在几种类型的色盲用户看来会是什么样子。虽然错误被清晰标记，但描述较为高级，修复不如预期直接。Sa11y允许管理员在其高级设置管理页面上定义和控制各种功能。
Editoria11y
Editoria11y专注于内容和结构。不会检查颜色对比度等设计元素。启用后，它会在前端和编辑器显示警报，通知您文档大纲、标题级别、链接文本和目标（也称为在新标签页中打开）以及图像中缺失的替代文本。其目标是帮助作者和编辑捕捉常见问题，用通俗语言描述失败，建议修复，并允许用户在警报不相关时隐藏或忽略它。Editoria11y还生成报告，并允许管理员根据CSS选择器排除警报、跳过某些测试或包含元素。
Accessibility Checker
另外，还有流行的Accessibility Checker，它在文章或页面编辑器窗口添加一个新部分，并在前端添加一个悬浮按钮。它显示错误摘要、详细解释（包括相关代码片段）、潜在修复选项以及忽略单个警报的选项。
操作系统应用和浏览器扩展
如果您想更进一步测试其他技术方面，可以执行以下操作。第一，尝试用键盘浏览您的网站。不使用鼠标。使用Tab键在链接、按钮和表单字段之间导航，按Enter或空格键激活这些交互元素。记录需要修复的非功能元素和缺失的视觉指示器。第二，您可以更改设备的颜色方案，确保在黑暗或高对比度模式下外观和功能正常。
结论
总之，创建或维护内容的作者和内容管理员直接控制关键方面，如标题级别、文本大小、颜色对比度、链接、图像的替代文本等。换句话说，您可以在不接触代码的情况下避免产生不可访问的内容。只需保持注意力和同理心。
实践
使用WordPress Playground测试您的知识：
进行标题审核：创建一个包含多个标题的示例文章。您可以使用以下示例文本。使用WordPress列表视图中的大纲工具检查标题的语义结构。为了测试页面的语义结构，故意将其中一个标题更改为不正确的级别，然后使用大纲功能查看它如何突出显示错误。确保标题从H2开始并按顺序降序排列，不跳过级别。
颜色对比度检查：添加一个带有文本的组区块。更改组区块和文本的颜色。背景颜色：浅黄色（#FFFFE0）文本颜色：浅灰色（#CCCCCC）使用WordPress内置的颜色对比度工具识别有问题的颜色组合。调整颜色以实现足够的对比度，确保可读性。
示例文本
页面标题：引言
子标题1.1：什么是Lorem Ipsum？
Lorem Ipsum是设计中用作占位符的虚拟文本。它帮助开发人员和设计人员无需实际文本即可可视化内容。
子子标题1.1.1：Lorem Ipsum的起源
Lorem Ipsum起源于1500年代排字工人使用的一种填充文本，用于测试印刷过程。
子标题1.2：为什么使用Lorem Ipsum？
使用Lorem Ipsum可以实现更真实的内容模型，有助于保持设计一致性并专注于布局。
子标题1.3：Lorem Ipsum的应用
Lorem Ipsum可用于各种设计领域，如网页开发、平面设计和印刷媒体。