跳到主要内容

可访问性最佳实践

在世界许多地方，电子商务商店需要对残疾人士开放。作为 WooCommerce 扩展开发者，您的代码直接影响使用您的扩展的商店的可访问性，并可能影响商家遵守可访问性法律的情况。

本页面是为希望确保其扩展符合可访问性标准和最佳实践的开发者提供的资源。建议所有 WooCommerce 扩展都应遵循可访问性最佳实践，以提供最佳的商家和客户体验。

可访问性法律​

有两个例子说明了要求电子商务网站具有可访问性的法律，包括美国的《美国残疾人法案》（Americans with Disabilities Act (ADA)）和欧盟的《欧洲可访问性法案》（European Accessibility Act (EAA)），该指令适用于所有欧盟成员国。澳大利亚、加拿大、以色列以及许多其他国家也有要求网站可访问性的法律。W3C 维护着一份关于全球网站可访问性法律的列表，如果您想了解您所在国家/地区的法律，可以查阅该列表。

大多数法律要求网站符合 Web 内容可访问性指南 (WCAG)，作为衡量可访问性的标准。为了确保商家可以在其网站上使用您的扩展，您的扩展也应符合 WCAG 标准。

如果您的扩展不符合 WCAG 标准，您可能会收到商家关于可访问性问题的投诉。您也可能因您的扩展导致的可访问性问题而成为诉讼或法律案件的被告。

Web 内容可访问性指南 (WCAG)​

Web 内容可访问性指南 (WCAG) 是国际公认的标准，旨在使网站对所有人开放，包括残疾人士。WCAG 由 成功标准（具体的、可测试的规则）组成，这些标准涵盖四个关键原则：

四个关键原则​

  • 可感知 (Perceivable) 内容应以用户可以感知的方式呈现，即使他们不具备所有五种感官。信息应可以从一种形式转换为另一种形式（例如，图像的文本替代说明或视频的字幕）。

  • 可操作 (Operable) 用户应能够使用各种设备（例如，仅使用键盘或不使用鼠标的屏幕阅读器）轻松地与网站进行交互，并且不应存在时间敏感的操作。

  • 可理解 (Understandable) 内容和界面应清晰且一致，使用简单的语言和可预测的导航。

  • 稳健 (Robust) 网站应与辅助技术兼容，并在不同的设备上正常工作。

兼容性级别​

WCAG 有三个兼容性级别：

  • Level A – 基础
  • Level AA – 中级 (大多数法律要求)
  • Level AAA – 最高

大多数法规要求 Level AA，这意味着您需要满足所有 A 和 AA 的成功标准。

当前版本​

WCAG 的当前版本是 2.2。 扩展开发者应努力达到 WCAG 2.2 Level AA 的兼容性，这是一种最佳实践。

手动兼容性测试​

在您设计和开发新功能时，对您的扩展进行 WCAG 兼容性 测试非常重要。 针对可访问性的测试与针对安全性或 WordPress 编码标准的测试同样重要。 如果您之前没有对您的扩展进行可访问性测试，请立即开始测试，并在未来的版本中添加可访问性修复。

自动化测试​

开始可访问性测试最简单的方法是使用自动化测试工具。 自动化工具可以快速识别诸如空按钮、模糊链接、颜色对比度问题、缺少替代文本等问题。

Accessibility Checker 是一个免费的 WordPress 插件，您可以使用它来测试您的扩展。 简单地将其安装在您的测试环境中，并将由您的扩展创建的区块或短代码添加到网页中。 当您保存网页时，Accessibility Checker 将扫描区块或渲染的短代码，并提供一个问题列表供您解决。

WAVE 浏览器扩展 是另一个免费的自动化测试工具。 此浏览器扩展程序可用于任何网站，如果您想在您扩展的后台页面上查找可访问性问题，它会非常有用。

键盘测试​

在解决自动化测试中出现的问题后，下一步是确保您的扩展程序可以在没有鼠标的情况下，仅使用键盘进行操作。

要测试您的扩展程序的键盘可访问性，请访问由您的扩展程序控制的测试站点的相关部分。 使用 Tab 键，在网页上向前移动，并确保以下内容为真：

  • 所有交互式组件（按钮、链接、输入框等）都可以通过按下 Tab 键访问。
  • 焦点应从左到右，从上到下，以直观的方式在页面上移动。
  • 您可以通过按下 Shift + Tab 向后移动组件。
  • 不存在键盘陷阱。 键盘陷阱是指焦点停留在某个元素上，然后无法向前或向后移动。
  • 所有交互式组件都应具有可见的焦点轮廓。 此外，请确认您在样式表中是否从未将 :focus 设置为 outline:none; 或 outline:0;。 永远不应该移除焦点轮廓。
  • 如果一个按钮触发模态框或对话框，焦点应移动到对话框中，并且不应允许在关闭对话框之前通过 Tab 键退出对话框。
  • 按钮应可以通过空格键和回车键触发。
  • 链接应可以通过回车键触发。

在前端和管理后台测试您的扩展程序的各个方面，以确保在没有鼠标的情况下实现完整的功能。

缩放时的测试​

确保您的扩展程序可以被视力较弱的用户在浏览器缩放的情况下使用。 将浏览器的缩放设置为 200% 和 400%，并确保没有内容重叠或丢失，并且在站点缩放时，扩展程序的组件可以正常使用。

屏幕阅读器测试​

请熟悉屏幕阅读器，这是一种辅助技术，供视力障碍人士使用。使用屏幕阅读器来测试您的扩展程序。以下是两个可用于测试的免费屏幕阅读器：

  • VoiceOver: 如果您使用的是 Mac，VoiceOver 已经内置于您的计算机中，是一个很好的入门选择，但它不是视力障碍桌面用户首选的屏幕阅读器。
  • NVDA: NVDA 是一款免费、开源的屏幕阅读器，您可以下载并在您的 PC 上使用。这是测试的首选屏幕阅读器，因为大多数视力障碍人士使用 Windows。

要测试您的扩展程序的屏幕阅读器可访问性，请启用屏幕阅读器，并使用键盘导航网页。让屏幕阅读器朗读整个网页，并注意以下内容：

  • 所有内容和元素都被朗读出来，没有遗漏任何重要信息。
  • 图像和图形具有准确的描述。
  • 装饰性图像会被跳过。
  • 元素具有正确的角色：按钮应该被宣布为按钮，链接应该被宣布为链接，等等。
  • 链接和按钮具有描述其用途的名称。
  • 表单字段已正确标记。
  • 组件的状态（例如，选项卡、折叠、切换按钮）会被宣布为折叠、选中、按下等。
  • 屏幕阅读器会宣布状态变化（例如，成功和错误消息，可见产品数量的变化，模态框或对话框的打开等）。
  • 隐藏的内容不会被朗读出来。

运动敏感性测试​

网站上的动画和运动可能会分散某些用户的注意力，甚至可能导致身体不适。为了确保您的扩展程序符合 WCAG 的运动相关成功标准：

  • 为任何持续时间超过 5 秒的自动播放内容提供暂停按钮（例如，视频、背景视频、滑块/轮播图或动画 GIF）。
  • 避免闪烁的内容，闪烁频率超过每秒三次，因为它可能会引发癫痫。
  • 确保所有动画在用户在他们的操作系统中启用了“减少运动”设置时都被禁用。

您可以测试您的动画是否尊重“首选减少运动”设置，方法是在您的操作系统中启用该设置。以下是操作方法：

  • 在 Windows 11 上: 转到 设置 > 可访问性 > 视觉效果 > 动画效果。
  • 在 macOS 上: 导航到 系统偏好设置 > 可访问性 > 显示 > 减少运动。

了解更多关于如何编写 prefers-reduced-motion media queries 的信息。

用户测试​

考虑邀请实际的残疾用户来测试您的扩展程序的无障碍性。 看到那些依赖屏幕阅读器或其他辅助设备的用户的体验，可能会非常有启发性。 询问您的客户群，看看您是否已经有残疾人士可以在您的受众中提供测试和反馈。 这里有一个很好的资源，介绍了如何进行用户测试。

如果您不想自己进行用户测试，有一些WooExperts可以提供帮助。

其他注意事项​

使您的网站无障碍​

除了测试您的扩展程序的无障碍最佳实践之外，您还应该考虑您自己的网站和文档的无障碍性。 如果您的业务达到某些收入门槛，那么人们购买您产品的电子商务商店必须是无障碍的，并且符合 WCAG 标准。

为您的视频添加字幕​

如果您的文档包含视频，则这些视频必须带有字幕，并包含文字稿。 这对于确保每个人都可以访问您的文档并学习如何使用您的扩展程序非常重要。

指导您的客户​

即使您的扩展程序是完全无障碍的，商家在配置您的扩展程序或添加内容时也可能会引入无障碍问题。 尽可能定义无障碍的默认设置。 例如，您的扩展程序中的默认颜色始终应满足 WCAG AA 颜色对比度要求。 商家可能会更改这些颜色，使其组合不符合对比度要求，但您可以说您的扩展程序是“无障碍就绪”的，如果默认设置符合要求。

考虑在管理后台添加功能，当商家做出可能对无障碍性产生负面影响的选择时，向他们发出警告。 例如，您可以标记不符合对比度要求的颜色组合，类似于 WordPress 核心中的实现方式。 您还可以警告商家关于其他问题，例如空字段标签、标题顺序错误、空的替代文本，或者选择您必须维护以实现向后兼容性，但已知不符合无障碍要求的设置。

创建可访问性合规性报告​

许多组织，尤其是在政府和教育领域，在购买软件之前通常需要一份可访问性合规性报告 (ACR)。 如果您的扩展程序销售给大型企业、政府或教育机构，一份 ACR 可以加快采购流程。

可访问性合规性报告是一份文档，它概述了数字产品的可访问性合规情况，并符合公认的可访问性标准，例如 WCAG、美国《第 508 条》和欧洲的 EN 301 549 可访问性标准。

ACR 是使用自愿产品可访问性模板 (VPAT) 创建的，VPAT 是一种用于评估和报告可访问性功能的标准化格式。 您可以免费下载此模板并自行填写，或者聘请可访问性专家来审核您的扩展程序，并为您完成 VPAT。

获取合规性方面的帮助​

WCAG 合规性不必让人感到不知所措！ 您可以一次修复一个问题，逐步改进您的扩展程序。 但是，如果不需要记住 WCAG 或学习如何进行测试，可访问性工作会更快。 考虑聘请可访问性专家来帮助审核或进行用户测试您的扩展程序。 合适的公司或顾问将帮助您快速找到问题，确定修复优先级，并培训您的团队，以便将来减少可访问性问题。

您可以在我们的 WooExperts 目录 中找到专注于可访问性的开发者。

了解更多关于可访问性的知识​

如果您想了解更多关于网站可访问性的知识，我们推荐以下资源：