如何使您的 WordPress 网站可访问

理解和正确利用 WordPress 的可访问性对您网站的可用性至关重要。 如果您对这个主题不熟悉，那么可访问性就是它听起来的样子：任何人都可以访问和充分使用某物的程度。

“可访问性是让尽可能多的人可以使用您的网站的做法。 我们传统上认为这与残疾人有关，但使网站易于访问的做法也有利于其他群体，例如使用移动设备的群体或网络连接速度较慢的群体。” （来源）

您的网站越容易访问，使用它的人就越多。 当网站的可访问性较低或未优先考虑可访问性时，您的一部分受众会被阻止或完全禁止获取您的网站必须提供的所有信息。

在这篇文章中，我们将讨论为什么可访问性很重要，这意味着什么，WordPress 已经可以访问的程度，网站建设者如何使网站可访问，以及如何测试网站的可访问性。

让我们开始吧！

查看我们的网站可访问性视频指南

Web 可访问性意味着什么

Web 可访问性意味着网站的设计和开发使所有人都可以使用它。 这包括他们如何理解、导航、交互以及为网站做出贡献。

完全定义和理解 Web 可访问性的一个好方法是打破它的一些神话。

您的网站越容易访问，使用它的人就越多。 就是这么简单。 在本指南中了解更多信息。 ️ 点击推文

误区一：这只是为了盲人

一个完全可访问的网站应该可供有听觉、认知、神经、身体、语言和视觉障碍的人使用。 残疾人是无障碍工作的主要焦点。 但是，他们并不是唯一从可访问网站中受益的人。

Web 可访问性改善了以下所有类型的人和情况的用户体验：

• 有人使用具有较小屏幕和不同输入模式的移动设备。
• 由于衰老而导致能力、视力或行动能力受限的人。
• 有暂时困难的人，比如受伤的手。
• 在照明可能会改变屏幕对比度的区域中使用网站的人。
• 有人以有限的 Internet 连接或带宽访问该站点。

误解二：这是一种时尚或趋势

很有可能，您近年来越来越多地听到有关 Web 可访问性的信息。 随着网络的发展和越来越多的人依赖它，网络可访问性正成为一个更加紧迫的问题。 但这不仅仅是一种时尚。

“数字无障碍是全球残疾人的公民权利和人权。”
Lainey Feingold，残疾人权利律师和作家

随着时间的推移和网络的使用变得越来越普遍，对广泛的网络可访问性的需求也越来越大。 当网站根据 WCAG 指南无法完全访问时，个人可以对网站开发商或所有者采取法律行动。

只需查看围绕 Web 可访问性的诉讼数量，即可了解人们对此的重视程度。 从 2017 年到 2018 年，诉讼数量几乎增加了两倍。 从那时起，这个数字平均每年有 2,345 起诉讼。 即使在整个 2020 年 COVID-19 大流行期间，联邦法院的 ADA Title III 网站可访问性诉讼数量也比上一年增加了 12%。

Web 可访问性将继续存在。 在我们开发软件和网站时，我们需要将网络可访问性纳入我们前进的流程中。 这是必要的，不仅因为没有人喜欢被起诉，而且因为互联网需要满足所有人的需求，无论这些需求是什么。

误区三：您可以完全自动化可访问性

一旦你理解了为什么可访问性很重要——并且不优先考虑它可能会产生后果——你可能会急于确保你的网站符合 WCAG 标准。

关于 Web 可访问性的最流行的神话之一是，您可以下载一个简单的插件或安装一个软件，只需轻轻一按，您的网站就可以完全访问。 这简直是​​不可能的。

根据 a11yproject.com 的说法，可访问性问题要么是客观的，要么是主观的。 客观问题可以通过代码检测，主观问题需要人为判断。 代码永远无法准确解决属于后一类的问题，并且尝试这样做通常会在此过程中造成弊大于利。

“覆盖解决方案是自动化软件解决方案，正如我们所知，它首先只能检测到约 30% 的 WCAG 问题。 这是因为 WCAG 是细致入微且具有解释性的。 机器不擅长这个。” （来源）

请记住，可访问性不是为了规避风险，而是为所有用户提供优化的体验。

网页内容无障碍指南

Web Accessibility Initiative 制定了一套 Web Content Accessibility Guidelines (WCAG)，可以帮助您确保您的网站合规且完全可访问。 如果您设计、开发或支持网站，您应该非常熟悉这些指南。

可访问性不仅是开发人员关注的焦点，也是设计师、营销人员、内容作者、项目经理等更多人关注的焦点。 在从规划到启动的整个网站建设过程中，可访问性应该是一个优先事项。 您还应该在网站上线后不断改进其可访问性。

开箱即用的 WordPress 可访问性如何

这是许多人在考虑将 WordPress 作为网站建设选项时提出的大问题之一：它的可访问性如何，以及要使 WordPress 可访问性需要做多少工作？ 由于对此没有非黑即白的答案，让我们看看 WordPress 已经可以访问的程度。

WordPress 在可访问性方面做得很好

好消息是，随着时间的推移，WordPress 变得越来越容易访问。 每个版本都会在考虑到可访问性的情况下进行小步骤和改进。 随着可访问性在更多人的脑海中成为一个更大的话题，更多的人可以优先考虑它。

此外，WordPress 社区中的许多人都对这些主题充满热情和直言不讳。 每个新的默认 WordPress 主题都采取了额外的步骤来变得更易于访问。 开发人员一直在想出新的辅助工具，并编写有关 WordPress 可访问性的指南和文章。 因此，您在 WordPress 可访问性之旅中永远不会孤单。

如果您有兴趣直接从社区成员那里了解有关 WordPress 和可访问性的更多信息，请访问 WordPress.tv 并观看这些有关可访问性的讲座。

WordPress错失良机的地方

尽管最近取得了进步，但 WordPress 并不总是 100% 开箱即用。 每个 WordPress 版本都面临一些批评，因为它的不足之处。 2019 年初，WPCampus 对当时最新的 Gutenberg 版本进行了广泛的审核。 这样的工作非常重要； 自那次审计以来，与无障碍相关的 116 个问题已经结案。

残疾内容创建者可能很难使用 WordPress 进行发布。 因为不可能自动化所有可访问的设计和开发方面，所以任何人都可以使用 WordPress 创建不可访问的网页。

“WordPress 的前端几乎与多年来一直在同一个地方：完全可以访问，但这完全取决于构建网站的开发人员。 糟糕的主题或无法访问的插件使一切变得不同。 管理员不断改进——将 Gutenberg 编辑器移向更好的可访问性是一条艰难的道路，但正在取得进展。 也就是说，避免任何新界面组件的可访问性回归是一场持久战。” （来源）

那么，作为 WordPress 开发人员或设计师，这对您意味着什么？ 当您开始使用 WordPress 时，您访问一个完全可访问的网站的旅程会更短一些。 然而，距离终点线还有一段距离。

如何制作可访问的 WordPress 网站

现在，让我们进入您可以采取的步骤，以确保所有用户都可以访问 WordPress 网站。

无论如何，永远不要将可访问性作为在项目结束时解决的任务。 它应该是从您的流程一开始就整合的优先事项。 一旦网站启动，它应该是一个持续的目标。

没有一个可以遵循或自动化以确保 100% 可访问性的单一清单。 大部分工作取决于您的插件、主题和内容。

创建一个可访问的网站就像建造一座安全的建筑——当然，有指导方针，但个人的关注、维护和周到的翻新对于确保你达到目标至关重要。

无障碍设计的最佳实践

让我们从 WordPress 网站可访问设计的一些最佳实践开始，按类型细分。 此信息应为您的无障碍教育奠定坚实的基础。

图片

您网站上的所有图像都需要可供所有用户访问。 鉴于并非所有用户都能看到图像，有些用户可能会使用辅助技术来理解视觉元素，因此您的网站应该准备好使用该技术。

替代（或“替代”）文本是您附加到图像的书面描述。 屏幕阅读器将向可能看不到图像的任何客人大声朗读该描述。 替代文本应用于在页面上提供有用信息的任何图像。 这包括从照片到图标再到信息图表的所有内容。

唯一的例外是图像被认为是纯粹的“装饰性”。 背景图像、分隔线或显示页面本身显示的文本的图像不一定需要替代文本。

编写替代文本时，请记住不要按原样描述图像。 相反，在页面的上下文中传达图像的含义。 以下是一些很好的指导方针，可帮助您编写出色的替代文本：

• 简短而简单是最好的。
• 屏幕阅读器会传达这是一张图片，因此请避免在替代文本中说“这是一张……的图片”。
• 如果图像是链接，则替代文本应说明如果用户选择该图像会发生什么。
• 替代文本应包括图像上出现的任何文本。 例外情况是当相同的文本也出现在图像附近时，例如在标题中。

向 WordPress 网站上的图像添加替代文本比您想象的要容易。 您可以在添加图像标题的同一位置添加此文本。

打开您的媒体库并选择您要编辑的图像。 该图像的设置屏幕将打开。 在替代文本字段中，添加您的替代文本，然后单击保存：

颜色

在设计一个可访问的网站时，提供足够的颜色对比是必不可少的。 在许多情况下，较差的颜色对比度会影响您网站的可读性，例如视力不佳的用户、色盲用户或使用某些设备的用户。 图像、文本和按钮等元素都需要适当的颜色对比。

颜色对比度是指当彼此相对或非常靠近时出现的亮色或暗色。 例如，白色背景上的黑色文本具有比白色背景上的黄色文本 (1.08:1) 高得多的颜色对比度 (21:1)。 WCAG 2.0 AA 要求普通文本的最小比例为 4.5:1，较大的文本（粗体 18 像素或标准 24 像素及更大）为 3:1。

订阅时事通讯

想知道我们是如何将流量提高到 1000% 以上的吗？

加入 20,000 多人的行列，他们会通过 WordPress 内幕技巧获得我们的每周时事通讯！

现在订阅

这到底是什么意思呢？ 确定您的颜色是否能很好地协同工作的最简单方法是将它们插入到对比度测试工具中，例如 WebAIM 对比度检查器。 网上有大量免费的检查工具。

查看我们的测试部分以了解有关测试颜色的更多信息。

随着您测试越来越多的颜色组合，您将更好地通过视觉来确定哪些颜色组合有效，哪些无效。

您还需要确保避免使用颜色作为主要区别因素。 例如，许多网站的链接颜色与周围的正文不同。 但是，如果用户由于某种原因难以看到颜色，则他们可能无法区分链接词和非链接词。 使用颜色修饰链接，但在文本下方添加下划线以使链接易于访问。

文本

我们在网络上体验到的大部分内容都是文本。 我们使用网站来阅读文章、食谱、故事等等。 你现在正在阅读这篇文章！ 因此，文本需要针对所有读者进行优化——无论他们是用眼睛还是耳朵阅读。

在谈论可访问性时，有两种主要的方式来讨论文本：字体和大小。

易于阅读的字体无论大小都易于阅读。 Tahoma、Calibri、Helvetica、Arial、Verdana、Times New Roman、Arvo、Museo Slab 和 Rockwell 等字体都是可访问的选择。 有阅读障碍的读者可能会发现阅读某些字体很困难，包括许多衬线字体。 正文的无衬线字体往往是更安全的选择。 最好避免显示字体（如手写样式或草书），除非文本较大、稀疏且主要是装饰性的。

字体大小对于可访问性非常重要。 让我们讨论一些关于可访问字体大小的经验法则。

默认字体应至少为 9pt 或 12px。 建议使用 12pt 或 16px。 根据 WCAG 指南，文本在放大到 200% 时应该能够被阅读。 建议使用百分比或 em 而不是像素或点来设置字体大小。 使用不同的字体粗细就可以了，但请确保如果您的文本使用轻量级，则它足够大以供查看。

这不是最终的全部，如何在考虑到可访问性的情况下进行设计。 但重要的是要知道从哪里开始。 如果您想更深入地了解可访问性设计，请查看以下资源：

• W3C 网页设计和应用
• 面向设计师的 Web 可访问性入门
• 无障碍设计并不难
• 符合 ADA 的无障碍网页设计的 10 个示例
• 设计中的可访问性

无障碍开发的最佳实践

在构建网站或其补充软件（如主题和插件）时，有一些重要的事情需要牢记于可访问性。 其中一些与设计重叠，但下一部分主要关注您的网站如何工作以及您的用户将如何与之交互。

互动元素

无论如何，用户应该能够相对轻松地与您的网站进行交互和使用。 这不仅包括欣赏图像和阅读文本，还包括与菜单、表单、按钮和视频进行交互。

在构建您的网站时，请确保可以轻松识别所有交互元素。 所有导航菜单——从页眉到页脚——都应该可以与键盘控件一起使用。 hover 、 focus和click上的链接和按钮的外观应该改变。

跨网站页面的导航应该一致且清晰。 您如何命名、样式和定位导航链接非常重要。 周到的面包屑和清晰的标题将使用户能够自信地与您的内容进行交互。

很有可能，您的网站上有一两个表格。 您可能会惊讶地发现有多少表格无法访问。 您的表单元素必须在字段左侧或上方包含相关标签。 （复选框和单选框可以放在右边。）用户应该清楚每个表单字段的用途。

如果您的网站上有任何自动播放的内容，例如 GIF、滑块、轮播、视频或音乐，则应该有可见的控件允许用户停止动画或声音。 最好提供完全停止、暂停或隐藏元素的选项。

如果您是一名想要深入研究 Web 可访问性开发的开发人员，请直接从 W3C 查看这些提示。

WordPress 主题

如果你是一个 DIY 网站建设者，你可以通过选择一个易于访问的主题来完成这篇文章讨论的很多内容。 对于开发人员来说，了解是什么使主题易于访问以在他们的项目中对其进行优先级排序非常重要。

WordPress 主题控制您网站的外观。 许多主题都预装了配色方案和字体系列。 必须确保这些颜色和字体符合上述要求。 许多主题将自己标榜为“完全可访问”，但这并不总是正确的。 使用您自己的测试来确定主题是否可访问。

WordPress.com 的可访问性团队在 WordPress 存储库中准备了 92 个免费主题的列表，您可以立即开始使用。

在构建可访问的主题时，请确保您从一开始就熟悉 WCAG 要求。 在开发过程中要解决的共同领域包括：

• 预设调色板中足够的颜色对比度
• 使用键盘轻松浏览网站的能力
• 使用适当的 ARIA 角色和/或 HTML5 地标来确保屏幕阅读器就绪体验
• 正确的 HTML 语义标记
• 避免在页面上重复 ID
• 允许用户停止或控制任何自动运动

开始创建主题时，请务必将 WordPress 可访问性指南添加为书签，以便于参考。

WordPress 插件

WordPress 插件允许您向 WordPress 网站添加即插即用功能。 有两种类型的 WordPress 可访问性插件：帮助您构建可访问网站并使现有网站可供用户访问的那些。

请注意 WordPress 插件可为您提供“一键式可访问性”或“自动可访问性”等保证。 这些事情是不可能的。 插件是可以帮助您实现可访问性目标的工具，而不是为您完成所有工作的魔杖。 有时，插件甚至会阻碍您的可访问性工作——因此请谨慎行事！

有大量以可访问性为重点的插件承诺改进、监控或修复可访问性问题。 他们可能会审核该站点并让您知道在哪里进行改进。 或者，他们可能会提供前端工具，以便更轻松地在您的网站上创建可访问的体验。

其中一些非常有帮助。 然而，其他人则提供虚假承诺。 在提交之前，请务必确保彻底审查这样的插件。

一些插件创建交互式内容，如测验和滑块。 如前所述，这些元素需要特别注意和测试，以确保它们完全可访问。 在发布之前，始终在登台或开发站点上彻底测试交互式插件。

表单插件也是如此。 不幸的是，许多都存在可访问性问题。 如果您发现这种情况，自定义编码表单是一个不错的选择。

一种流行的插件类别是页面构建器插件。 这些非常适合让您快速构建强大而复杂的拖放设计。 但是，它们通常会引入比它们解决的更多的可访问性问题。 这个问题没有单一的解决方法，所以请保持您的设计简单，并确保您测试所有元素以确认可访问性。

可访问性声明

可访问性声明是您网站上的一个页面，您可以在其中传达您的内部政策、可访问性目标以及过去与残障人士合作的成功经验。

出于以下原因，您应该在您的 WordPress 网站上生成并发布可访问性声明：

• 向您的用户表明您关心可访问性和他们
• 提供有关您的内容的可访问性的信息
• 展示对可访问性和社会责任的承诺

您可以按照 W3C 提供的这些指南或使用可访问性声明生成器编写自己的可访问性声明。

如何测试 WordPress 网站的可访问性

可访问性不是按正确的按钮，然后走开。 测试是确保网站完全可访问的重要部分。 自动和手动测试都可以帮助确保您已覆盖所有基础。

如何进行自动化测试

自动化测试有助于衡量从哪里开始。 如果您不熟悉可访问性或不确定从哪里开始，请从自动测试和评估开始。

大多数自动化测试将识别颜色对比度差、缺少替代文本、空链接、结构元素问题等。 您可以使用这些测试来生成要解决的问题列表。 像这样的测试对于发现基于代码的错误特别有帮助，这些错误肉眼可能不太明显，但对您的一些用户来说非常重要。

您可以使用的免费可访问性测试的一个示例是 WebAim 工具。 它会检查您的整个网页并生成错误列表。 它甚至会准确地显示这些错误发生在页面上的哪个位置。

您可以找到大量单独的可访问性工具来帮助解决特定问题。 例如，在您开始设计之前使用对比度检查器，以确保调色板中的颜色可以很好地融合在一起。

请记住，没有任何自动化测试是完美的、万无一失的，或者可以替代手动测试。

如何进行手动测试

因为 WordPress 可访问性是关于真实的人类用例，所以必须由真实的人类来对网站是否可访问做出最终决定。 因此，为手动测试预留时间和资源非常重要。

那么，如何进行手动测试呢？ 在没有花哨或昂贵的工具或程序的情况下，您可以做以下几件事来测试网站的可访问性：

1. 放弃鼠标：确保您可以仅使用键盘按键合理且轻松地浏览网站的所有功能。 这包括在部分之间移动、访问菜单、从一个页面到另一个页面、向下跳过页面以及与链接和表单进行交互。
2. 使用屏幕阅读器：设身处地为能见度低或低的人着想。 使用屏幕阅读器应用程序或网站并查看您网站上的内容，以确保在大声朗读时它仍然有意义且听起来流畅。
3. 在不同的环境中测试网站：去有公共 WiFi 的地方，以确保您的网站在没有高质量互联网连接的情况下正常加载。 记下因连接不良而滞后或完全消失的网站区域。
4. 增加缩放：在浏览器中打开您的网站并使用浏览器设置放大 200%。 您仍然可以在此设置中使用、导航和参与网站吗？ 是否有内容消失或被截断？
5. 关注交互性：确保花大量时间测试视频、表单和按钮等交互元素。 链接和表单域应始终使用轮廓、下划线、特殊光标突出显示。
6. 仔细检查您的 alt 标签：如果您不确定图像是否有附加的替代图像，请使用检查元素工具进行确认。
7. 换个思路：如果您网站上的所有图片都消失了，还有人可以使用它吗？ 如果您网站上的所有颜色突然变成黑白，这将如何影响可用性？ 如果装饰元素受到某种影响，请确保您网站的重要部分仍然有效。

如有疑问，请联系提供手动可访问性测试的公司。 可访问性和网页设计与开发方面的专家可以快速进行手动审查，并准确告诉您哪些领域需要工作。

不要忘记，您的真实受众是您最好的资源之一。 在您的网站上有一个清晰的区域，用户可以在其中提供可访问性反馈。 如果有人在使用您的网站时遇到困难，那么从您收集反馈的努力中应该可以清楚地看出您愿意听取这种体验并纠正问题。

您的网站是否可供所有访问者访问？ 在本指南中了解有关如何测试可访问性的更多信息️ Click to Tweet

概括

互联网已成为我们日常生活中最重要的工具之一。 每个人都需要有访问它的自由，无论是浏览娱乐还是重要信息。 您的网站有责任满足网络公平标准。

了解对这些指导方针的需求是做出重大而持久改变的第一步。 从长远来看，建立一个可访问的网站意味着更多的人会从您的网站所提供的服务中受益。

您对 WordPress 可访问性有任何疑问吗？ 请在评价部分留下您的意见！