分类： SEO与无障碍

引言

在本课中，我们将讨论如何测试您的内容是否具有可访问性。如果您已经观看了本主题的第一课，那么您应该已经熟悉“可访问性”这个术语，并了解其重要性。让我们回顾一下。数字可访问性是一个广义术语，旨在确保尽可能多的人能够使用网络，无论是操作在线服务还是消费在线内容。虽然可访问性具有法律和商业影响，但重要的是要记住，这些指南旨在为每个人提供更好的浏览体验。确保您的网站可访问的最简单方法是在设计和开发阶段就考虑这一点。然而，基于区块的主题提供了极大的灵活性，而能力越大，责任越大。幸运的是，许多技术性的可访问性问题通常可以通过自动化工具轻松检测和修复。例如，正确的标题层级、颜色对比度、有意义的替代文本、链接文本等。讽刺的是，这些正是网络上最常见的可访问性失败点。在本教程中，我们将重点扭转这一趋势，向您展示如何在发布前测试您创建的内容，并确保您的文章和页面是可用的。

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 或空格键激活页面上的这些交互元素。记录下需要修复的功能失效元素和缺失的视觉指示器。第二，您可以更改设备的配色方案，以确保在深色或高对比度模式下内容看起来正常且功能良好。

结论

总之，创建或维护内容的作者和内容管理者可以直接控制关键方面，如标题级别、文本大小、颜色对比、链接、图片替代文本等。换句话说，你无需接触代码就能避免生成不可访问的内容。只需保持用心和同理心。

引言

在本教程中，你将了解无障碍性：它是什么、为什么重要，以及无障碍网站如何惠及所有人。

首先，讲一下“是什么”。作为数字无障碍性的一个子集，网页无障碍性意味着构建所有人都能使用的网站，无论其能力如何。在最普遍、最直接的意义上，无障碍性保证了内容和服务的普遍和平等访问。

技术术语

在学习或实践无障碍性时，你会遇到一些技术术语。我们来澄清一下：

• A11Y 是“accessibility”一词的数字缩写，其中“11”代表字母“a”和“y”之间的字母数量。
• WCAG 是“网页内容无障碍指南”的缩写，这是一套由 W3C 制定的国际无障碍标准。
• WCAG 的基本原则被称为 POUR：可感知（Perceivable）、可操作（Operable）、可理解（Understandable）和健壮性（Robust）：
  1. 可感知意味着传递信息的方式要让任何人都能理解。例如，为图像或视频等视听内容提供文本替代方案。
  2. 可操作指的是让人们能够使用界面并与网站进行交互。例如，支持键盘功能，而不仅仅是鼠标交互。
  3. 可理解确保人们能够理解信息并使用界面。例如，表单元素需要对应的标签来传达清晰的指示。
  4. 健壮性意味着随着技术的发展和演进，内容仍然保持可访问。例如，使用正确的标记来确保与当前和未来的浏览器及辅助技术的兼容性。

常见误解

所有这些听起来都很合理，但企业和网站开发者却常常以常见的误解为由而犹豫不决。是时候纠正这些错误观念了：

1. 无障碍性很难。是的，编码、写作和制作舒芙蕾也很难。尽管如此，人类几十年来甚至几个世纪以来都成功完成了这些任务。
2. 无障碍性 = 设计糟糕的网站。一个无障碍的网站可以像你的技能和项目要求所允许的那样美观。
3. 无障碍合规成本高昂。有时确实如此。这就是为什么应该从一开始就创建包容性体验。将其视为事后补救——比如在发布前用插件“解决”问题——总是更不明智且成本更高的做法。
4. 无障碍性是可选项。恰恰相反，它对网站的重要性不亚于客户的品牌形象、团队的编码标准或你语言的语法规则。你不会故意引入错误，那为什么要让东西变得不可访问呢？

更好的思考方式是将无障碍性视为“同理心”的代号。这样，它就变得难以忽视且易于采纳。它不仅仅是法律合规、商业责任和财务影响——它关乎基本人权。

统计数据

2006 年，联合国《残疾人权利公约》将获取信息和通信技术定义为一项基本人权。

根据 W3C 2018 年的报告，全球有超过 10 亿残疾人。

WebAIM 的最新报告发现，排名前百万的首页中有 95.9% 存在无障碍问题。检测到的错误中有 96.4% 属于以下六类：

自 1999 年 WCAG 1.0 发布以来的 25 年里，这六个问题一直困扰着网络。

为什么重要

无障碍性在许多国家不仅是法律要求，而且对商业也有好处。残疾人拥有巨大的消费能力。然而，绝大多数网站都忽略了他们的需求——以下演示有助于说明他们许多人需要克服的一些困难：

1. 在第一个示例中，我们将看到非视障用户（在最佳条件下）如何查看页面。设计包括非默认样式：小字体、无下划线链接以及不足的颜色对比。如果这对非视障人士来说都不易导航，那么对视障人士来说会有多困难呢？
2. 接下来的两个示例模拟了视力缺陷用户如何查看页面。第一个示例展示了低对比度、小字体和无下划线链接的影响。在第二个示例中，我们将看到有时屏幕可能完全模糊。
3. 在下一个示例中，我在一篇文章中添加了一个手风琴组件，然后用鼠标与之交互。接着，我禁用了浏览器中的 JavaScript（在 0:09 处），并尝试与之交互。如视频所示，没有 JavaScript 就无法使用。
4. 在最后一个例子中，我模拟了用户使用键盘浏览页面，通过 Tab 键向前移动，Shift + Tab 键向后移动。链接、搜索表单和 YouTube 视频在聚焦时都有正确的标记，但 “是/否”按钮却没有。当开发者/设计师改变交互元素（本例中为按钮）的默认样式，隐藏聚焦元素的视觉指示时，用户就无法判断它们是否处于激活状态。

关键在于，无障碍网站并非额外福利——它们对我们许多人来说是必不可少的。残疾的范围和人类本身一样多样，涵盖从身体到认知到心理的各个方面。从永久性失明到与年龄相关的视力障碍，从暂时性听力损失到注意力难以集中，从手腕骨折到癫痫，从阅读障碍到多动症，从色盲到多发性硬化症。

这意味着有大量的人无法填写表单、浏览网站、识别文本中的链接、辨别图像、收听播客和观看视频，或者将商品加入购物车。

结论

无障碍性，即使仅局限于网络领域，也是一个广泛且多层面的主题，不可能在几分钟内涵盖所有内容。我们鼓励你进一步学习——阅读、实验，并倡导变革。由于网络上超过三分之一的热门网站使用 WordPress，我们的社区在让网络更加无障碍方面发挥着关键作用。你不需要成为（认证的）无障碍专家。任何参与在线创作的人都可以做出改变。在下一课中，你将学习非技术用户如何在不接触一行代码的情况下提供帮助。