一个 12 步的 WordPress 可访问性清单 [+来自 WCEU 2022 演讲者 Maja Benke 的提示]

提高 WordPress 的可访问性是该软件最新版本的主要关注点,即。 WordPress 6.0。此版本包括 50 多个专门针对增强平台可访问性的更新。 

在对核心进行改进的同时,用户应继续遵循最佳实践,以确保 尽可能多的用户可以访问 他们的WordPress 网站。

下面我们将涵盖以下主题,并包括 Maja Benke 在 WordCamp Europe 2022 会议“阅读障碍的可访问性”中的见解。随时单击任何链接以跳转到该部分:

  • WordPress 是否支持无障碍访问
  • 为什么 WordPress 可访问性很重要
  • 如何使您的 WordPress 网站易于访问

WordPress 可访问性准备好了吗?

WordPress 在其可访问性编码标准中规定了以下内容:“集成到 WordPress 生态系统中的代码——包括 WordPress 核心、WordPress.org 网站和官方插件,预计将符合 Web 内容可访问性指南 (WCAG) 2.1 版,网址为AA级。”
因此,期望为 WordPress 核心做出贡献或为其创建插件或主题的开发人员将遵守 WCAG 2.1。
也就是说,并非 WordPress 中的所有内容都符合该标准。
例如,主题存储库中标记为“可访问性就绪”的主题不一定符合 AA 合规性。正如 WordPress 的辅助功能手册中所述:“‘辅助功能就绪’并不意味着该主题符合 WCAG 指南 AA 级。这意味着该主题达到了主题审查小组设定的最低标准。”
与构建 WordPress 网站时的大多数因素(如速度、安全性和SEO)一样,所有者有责任确保 WordPress 的可访问性得到照顾。 

好消息是 WordPress.org 有一本专门针对该主题的完整手册:

您可以使用这些特定于 WordPress 的辅助功能提示(以及下面的提示)为所有访问者提供更好的用户体验。

为什么 WordPress 可访问性很重要

作为网站所有者,出于多种原因您应该关注网站的可访问性。这里仅仅是少数。

1. 有十亿多残疾人。

据世界卫生组织称,全世界有超过 10 亿残疾人 。随着全球人口接近 80 亿,您可以看到人们处理与视力、听力、运动技能、认知推理等相关的损伤是多么普遍。
然而,在 WordCamp Europe 2022 会议的后续采访中,WP1x1的 WordPress 贡献者和博主 Maja Benke强调,企业没有投资于网络可访问性的一个主要原因是“他们认为这不是他们的客户或者他们不会‘看到’有无障碍需求的人,所以他们认为他们不存在。” 因此,许多网站只有一部分访问者可以访问。
例如,下图显示了一个具有 80 年代复古氛围的网站,只能通过将移动的四分之一拖动到三角形中来访问该网站。虽然这种交互性很酷,但对于患有帕金森氏症等运动问题的人来说,就可访问性而言,它可能是一个糟糕的选择。  

2. 可访问性鼓励更好的设计实践。

虽然您可以使用 WordPress 网站做一些令人惊奇的事情,但有时少即是多。可访问性迫使我们缩减多余的部分,并真正考虑如何创建对每个人都有利的基准体验。
这并不意味着没有创造力的空间。这只是意味着简单性和清晰性应该优先于复杂性。这不仅会影响您网站的可访问性,还会影响其整体可用性。 
在她的 WCEU 会议的后续采访中,Benke 说她鼓励人们将可访问性视为可用性、搜索引擎优化和用户体验的延伸,而不是一个独立的类别。 

3.谷歌使用可访问性作为排名信号。

在新的 Core Web Vitals 更新中,可访问性是用于根据用户体验对网站排名进行评分的四个因素之一。
您可以在Core Web Vitals工具中亲自查看:

如果您希望您的网站在搜索结果中排名靠前,那么您需要考虑可访问性。

4. 无障碍设计实践将使所有用户受益,包括非本地用户。

无障碍设计实践有利于所有用户,而不仅仅是残障用户。例如,在她的 WCEU 会议中,Maja Benke 提到了内容创建者可以实施的几种可访问性设计实践来帮助有阅读障碍的用户,包括使用主动和简单的语言、避免不常见的缩写、使用转录、隐藏式字幕和视频字幕等做法。 
“所有这些都对非本地人或方言很重的人有帮助,”她说。 

5.交通不便会影响您的赚钱能力。

拥有一些用户无法访问的网站会导致明显的收入损失。根据新英格兰低视力和失明协会的一篇文章,美国残疾人估计拥有 2000 亿美元的消费能力。
但诉讼的可能性也越来越大。
根据Seyfarth 数据,美国残疾人法案 (ADA) Title III 相关诉讼(与数字和物理无法访问相关)的数量逐年上升:

2020年显然是反常的,但预计会出现强劲反弹。
根据美国研究所的一份报告,“重要的是,残疾人不是一个孤立的市场;他们周围都是家人和朋友,他们也认识到适合社会所有人的产品和服务的价值。”
因此,一个无法访问的网站和因此而对您提起的诉讼不仅会让您的残疾用户付出代价。这也可能会让您失去他们信任的关系。
好的,很明显,可访问性是必须的。同样清楚的是,WordPress 不负责确保您的网站可访问。
因此,让我们回顾一下您可以做些什么来使您的网站易于访问。

如何使您的 WordPress 网站易于访问

熟悉 W3C、WAI 和最新的 WCAG 指南。使用 WordPress 无障碍主题。安装 WordPress 辅助功能插件以发现主要问题。确保您的代码可访问。为图像、GIF 和视频使用标题。使您的站点键盘可导航。选择易于访问的颜色。选择可访问的字体。确保您的内容可访问。避免自动播放视频。使用清晰简单的布局。定期测试您的 WordPress 网站的可访问性。

在我们深入研究这些战术策略之前,请务必注意并非每个解决方案都适用于每个用户。在 WCEU 2022 的演讲中,Benke 强调可访问性是一个范围:“对我有帮助的东西并不一定意味着它可以帮助另一个患有阅读障碍或类似问题的人。”
这就是为什么实施尽可能多的可访问性最佳实践如此重要的原因。每个最佳实践都有助于使您的网站更容易被更广泛的用户访问。牢记这一点,让我们深入了解下面的清单。 

1. 熟悉 W3C、WAI 和最新的 WCAG 指南。

万维网联盟( W3C) 是一个制定旨在实现“人人共享的网络”标准的组织。可访问性只是其使网络变得更美好的使命的一部分。
Web Accessibility Initiative (WAI) 是 W3C 的一个分支机构,它开发了 Web 的全球可访问性标准以及人们可以用来在其网站上实施这些标准的资源和策略。
而Web Content Accessibility Guidelines (WCAG) 是 WAI 发布的官方标准。
通过熟悉这些准则及其来源,您可以更轻松地将它们应用到您的网站。

2. 在您的网站上使用 WordPress 无障碍主题。

特别是对于 WordPress,您不仅要考虑您的设计和内容选择如何影响可访问性,还要考虑您的 WordPress 主题如何影响可访问性。
如果您访问WordPress.org 主题存储库,您可以筛选那里提供的 4,000 多个主题:

在功能下,您会找到“辅助功能就绪”选项。
请记住:可访问性就绪的 WordPress 主题不一定符合 WCAG 的 AA 级合规性。因此,虽然这些主题将让您在为更易于访问的网络做出贡献方面有一个良好的开端,但您还需要做其他工作。

3. 安装 WordPress 辅助功能插件以捕获主要问题。

如果您曾经访问过带有 accessiBe 小部件的网站,您可能会想,“为什么我不用它来让我的网站易于访问?”
例如,Billabong安装了以下小部件之一:

问题是像 accessiBe 这样的外部可访问性解决方案在 WordPress 中并不总是有效。
一些元素有几个可访问性问题。如果联系表设计不当,任何访问者都很难填写联系表。
使用WordPress 辅助功能插件可能是更好的解决方案。

虽然这些插件不会完全解决您网站上发现的任何和所有可访问性问题,但它们可以帮助您找到并解决一些更明显的问题。
有几个插件可供选择。然而,WordPress.org 和 HubSpot 都将WP Accessibility评为最好的 WordPress 辅助功能插件之一。所以这是一个很好的起点。

4. 确保您的代码可访问。

即使您不打算自己编写任何代码,在 WordPress 中配置功能和设置时所做的各种选择也可能导致无法访问代码。这会严重影响依赖屏幕阅读器帮助他们浏览网站并阅读网站内容的用户。
以下是一些可以帮助您的网站代码更易于访问的内容:

  • ARIA 地标:这将帮助屏幕阅读器了解如何浏览页面。
  • 语义 HTML:这将告诉视障访问者他们正在使用什么类型的元素。
  • 语言属性:这将帮助屏幕阅读器确定网页使用的语言。如果没有语言属性,屏幕阅读器将默认使用操作系统的语言,这可能会导致标题和页面上其他内容的发音错误。在她的 WCEU 会议上,Benke 说,“例如,如果文本是德语并且没有 lang 属性,那么屏幕阅读器可能会使用英语语音,这对于有阅读障碍的用户和其他用户来说很难理解。”
  • 跳过链接:这些可以帮助使用辅助设备的用户轻松返回到菜单、搜索栏和其他导航功能。
  • 标题标签:一个有逻辑的、分层的标题结构可以阐明内容之间的关系。
  • 联系表格:带有适当标签、帮助文本、成功消息和错误消息的表格更容易完成。
  • 图片替代文字:描述性替代文字可帮助每个人“看到”图片中的内容。但是,替代文本对于装饰性图像不是必需的。

其中一些内容,例如 ARIA 地标和跳过链接,需要由开发人员编写代码。其他内容,如图像替代文本和标题标签,可以由内容创建者在 WordPress 编辑器中完成。
例如,您可以在图像设置中添加替代文本:

然后,这会将替代文本添加到您的代码中,并使其对屏幕阅读器以及那些无法以其他方式看不到图像的人可读。

5. 为图像、GIF 和视频使用标题。 

虽然替代文本非常适合屏幕阅读器和视障人士,但字幕非常适合为您的多媒体内容添加上下文,包括图像、GIF 和视频。字幕的一个主要优点是它们显示在主要内容中,而替代文本是“隐藏的”。由于有视力的用户和辅助技术可以阅读说明,因此它们提供了对图像信息的最大访问量。 
以下图为例:

6. 使您的站点键盘可导航。 

可访问性涉及使行动不便的访问者可以轻松地使用键盘控件浏览您的站点。 
这意味着您网站的某些部分,如菜单、导航元素、主页和其他部分必须可以通过键盘命令访问。 

7. 选择易于理解的颜色。

颜色是使设计易于理解的一个重要方面。
对于颜色,您必须注意您的选择如何影响以下视觉和认知障碍:

  • 低视力
  • 色盲
  • 阅读障碍
  • 对比不敏感
  • 感光性

因此,选择网络可访问的颜色不仅仅是避免色盲用户的不良配对。您还必须考虑颜色对比如何影响不同类型用户的内容可读性。
例如,在她的 WCEU 会议上,Benke 说,“高对比度对视力低下的人有好处,但可能会让有阅读障碍的人分心。所以不要太高对比度。棕褐色背景颜色和深灰色字体颜色是好一对。”
这是一个例子:

8. 选择无障碍字体。 

排版也会影响 WordPress 网站的可访问性。 
特别是字体大小是 WordPress 可访问性的一个关键因素。通常,您的最小字体不应小于 16 像素。
另一个需要考虑的因素是您的字体选择。在选择(大多数)访问者能够轻松阅读的字体时,WebAIM有一套很好的指南可供遵循。以下是对它们的快速回顾,以及来自 Benke 的 WordCamp 会议的更多见解:
选择简单而不是复杂的样式。

在她的会议中,Benke 解释说手写字体对大多数用户来说都很难阅读,包括有阅读障碍的用户。 
当涉及到字符时,选择清晰而不是模糊。

Benke 还解释说,一些字体系列的字符看起来相似甚至相同,这会影响读者的理解。在这种情况下,最好避免使用它们或至少提供多种选择。一种选择可能是专门为有阅读障碍的用户设计的字体系列,例如 Open Dyslexic。
选择不超过两种或三种字体以在整个站点范围内使用。

重要的是限制您在网站上使用的字体数量,以帮助有阅读障碍的用户和所有用户快速解析文本并处理其含义。 
选择字符间距足够大的字体。

字符间距与行间距一样重要,因为一些有阅读障碍的用户会交换字母,这会完全改变句子的意思。 
选择具有某种物质的字体粗细。

Benke 说,更细的字体更难阅读。虽然您可以将字体加粗,但最好选择更粗的字体。我们将在下面解释原因。
注意字体的样式和大小。

Benke 解释说,文本转换,比如大写,会改变单词的形状,这会让​​一些有阅读障碍的用户更难阅读。加粗和斜体文本也可能具有挑战性,因为这种样式会打断文本的流动。 

9. 确保您的内容是可访问的。

最后一件事是您的内容。
您在编码和设计方面所做的一些工作会影响内容的可访问性。例如,使用分层标题标签将改善页面的组织和可读性。此外,为文本链接选择正确的颜色可以帮助它们从周围的文本中脱颖而出,从而增强点击信心
您还可以采取其他措施来提高内容的可访问性:

  • 锚文本:编写描述性锚链接文本,以便人们确切知道链接会将他们带到哪里。
  • 链接目标:不要在新的浏览器选项卡中打开链接。
  • 内容长度:避免写大块文本。较短的句子和段落是最好的。
  • 图片:使用相关图片来分解您的内容并提供额外的上下文。
  • 字幕:为嵌入的视频添加字幕,以便听不到音频的人仍然可以跟随。
  • 成绩单:包括嵌入式视频和音频文件的页面成绩单。它们也有利于 SEO。

您将能够在 WordPress 中实现其中的大部分。下面是一个示例,说明如何为链接编写描述性锚文本,然后将其定向到在同一窗口中打开:

对于视频字幕之类的内容,您需要自己添加。像 YouTube 这样的平台会自动为您生成它们,尽管它并不总是完美的执行。大多数视频托管平台(包括 YouTube)都允许您上传自己的视频。

10.避免自动播放视频。

自动播放视频对大多数用户来说很烦人,对有认知障碍的人来说尤其令人沮丧。
如果视频还自动播放音频,可能会让使用屏幕阅读器的用户感到困扰,并影响页面的阅读。
因此,如果您想将视频添加到您的网站,请考虑使用 像SmartVideo这样的视频插件 ,它允许您选择是否要自动播放视频。

11. 使用清晰简单的布局。

另一种提高可访问性的方法是使用清晰简单的布局,使每个访问者都能更轻松地阅读和处理您的内容。以下是 Benke 在她的 WCEU 会议上提供的一些技巧:

  • 使内容区域紧凑:限制内容区域,使用户不会像看电报那样扫描页面,从而使有阅读障碍的用户更容易换行。越紧凑越好。 
  • 慷慨地使用空白:因为一些有阅读障碍的用户(和其他人)会从页面上的一个点跳到下一个点,空白让他们的眼睛得到休息并再次集中注意力。没有空格,内容对每个人来说都更难阅读。
  • 将文本块与其他元素分开:将文本块与视觉元素(如图像)以及空白分开,可以更轻松地理解和处理您的内容。这些视觉元素还可以在解释复杂主题时添加更多上下文信息。

例如,1% for the Planet致力于通过使用高对比度文本、包含大量空白以及在图像和文本之间取得平衡来实现可访问性。该网站的简单布局使用户可以轻松浏览它而不会迷路或感到困惑。

12. 测试您的 WordPress 网站的可访问性。

审核您的 WordPress 网站的可访问性非常重要——不仅是在您构建网站时,而且每年一次。
有大量的可访问性测试工具可以轻松完成这项工作。让我们看一些:
核心网络生命力第一个要检查的是谷歌的 Core Web Vitals。

如果 Google 可以检测到任何可访问性问题,您希望尽快处理它们,以免影响您网站的排名。

斧开发者工具

您可以使用的另一个工具与您的 Chrome 浏览器集成。它是由 Deque 创建的 DevTools 扩展,它的工作原理如下:

当您检查您网站上的任何页面时,ax DevTools 将向您显示有多少可访问性问题以及在哪里可以找到它们。

WAVE 评估工具

如果您从未在浏览器中使用过 Inspect 工具,WebAIM 创建的WAVE Evaluation Tool可能是更好的选择:

它是一个浏览器扩展,就像 ax 一样,但是这个会标记您正在查看的页面上的错误。

颜色安全

使用颜色安全工具查找符合 WCAG 级别 AA 合规性的颜色:

您所要做的就是输入该部分的背景颜色以及您打算对其使用的字体和字体大小。然后,该应用程序将生成满足可访问性所需的 4.5 对比度的所有颜色。

科布利斯

您可以使用Coblis检查您网站的图像甚至整页设计是否存在与色盲相关的问题:

只需将您的文件上传到系统中,然后运行每种色盲类型,以查看您的图形对于不同用户的外观。
如果您需要帮助掌握使您的站点易于访问所需要做的一切,请查看此Web 可访问性清单。

关于 WordPress 辅助功能的常见问题

到目前为止,我们已经介绍了很多内容——但您可能仍有疑问。以下是有关 WordPress 可访问性的一些最常见问题的答案。

如何使我的 WordPress 网站易于访问?

您可以做十一件事情来提高 WordPress 网站的可访问性。这些在上面有详细说明:

  1. 熟悉 W3C、WAI 和最新的 WCAG 指南。
  2. 使用 WordPress 无障碍主题。
  3. 安装 WordPress 辅助功能插件以发现主要问题。
  4. 确保您的代码可访问。
  5. 为图像、GIF 和视频使用标题。
  6. 使您的站点键盘可导航。
  7. 选择易于访问的颜色。
  8. 选择可访问的字体。
  9. 确保您的内容可访问。
  10. 避免自动播放视频。
  11. 使用清晰简单的布局。
  12. 定期测试您的 WordPress 网站的可访问性。

WordPress 是否符合 WCAG 标准?

WordPress.org 设定了所有写入核心和贡献的主题和插件的代码都符合 WCAG 2.1 AA 级标准的期望。但是,最终由站点的所有者或构建者来确保它最终可以访问。

什么是 WordPress 中的辅助功能模式?

可访问性模式是旧版 WordPress 中的一项设置,它使用户可以轻松地将小部​​件添加到他们的页面。您可以使用经典编辑器在仪表板上的外观>小部件屏幕的右上角找到它。这在使用古腾堡编辑器的最新版本的 WordPress 中不再可用。 

WordPress 主题可访问性准备好了吗?

他们之中有一些是。在 WordPress.org 网站上,使用“辅助功能就绪”功能过滤主题。

什么是最好的 WordPress 辅助功能插件?

虽然有几个很棒的 WordPress 辅助功能插件,但 WordPress 和 HubSpot 推荐的插件称为 WP Accessibility。

您的 WordPress 网站准备好为所有人服务了吗?

优先考虑 WordPress 可访问性的原因有很多。这里有一些:

  • 允许所有用户从他们对您的网站和品牌的体验中获得最大收益。
  • 可以提高您的网站在搜索结果中的排名。
  • 避免与无法访问网站相关的金钱和声誉处罚。

好消息是 WordPress、它的贡献者和一整套免费在线工具可以帮助您构建、测试和改进您的网站以获得更好的可访问性。

Newsletter Updates

Enter your email address below and subscribe to our newsletter

留下评论

您的电子邮箱地址不会被公开。 必填项已用 * 标注