扩大影响范围:创建无障碍 WooCommerce 商店

Web 可访问性与网站的编码和设计方式有关。 它的目标是确保有不同残疾的人可以访问您网站的每个部分。 如果您在线销售产品,那么拥有一个可访问的 WooCommerce 商店非常重要。

许多网站和应用程序的一个共同问题是可访问性障碍阻止残疾人访问您的 WordPress 网站上的信息和功能。 考虑可访问性障碍对于 WooCommerce 商店很重要。 它们可能会阻止潜在客户访问您网站的每个部分。

在本文中,我们将了解 WooCommerce 开箱即用的可访问性以及如何获得自己的可访问 WooCommerce 商店。

可访问的 WooCommerce 商店

作为代理商,您的目标应该是设计一个更易于访问的 WooCommerce 商店。 有听觉、视觉、运动或认知障碍的人应该能够访问您的 WooCommerce 商店,而不必担心任何可访问性问题。 根据世界卫生组织的一项研究,世界上 15% 的人口 患有某种残疾,因此如果未能提供无障碍商店,您可能会排除多达 1/6 的人无法访问您的服务。

为客户提供更好、更易于访问的网站对于增强 SEO 和降低页面加载速度也至关重要。

WordPress 中发布的所有新代码和更新代码都应符合 WordPress 的指南 可访问性编码标准. 此外,WordPress 期待使 WordPress 管理员和主题完全符合 WCAG 2.0 AA 级标准。 这 创作工具可访问性指南 2.0 版是指导如何制作用于创建网页的工具的指南,该网页既可访问又鼓励创建更易于访问的内容。 WordPress 可访问性编码标准还要求新更新的代码满足 AA 级 Web 内容可访问性指南或 WCAG 2.0 版的要求。

代理商应旨在提供良好的可访问性,同时牢记建立不合规的 WooCommerce 商店的潜在风险。 其中包括人们无法正确访问或使用您的网站,这导致潜在客户放弃购买,并最终失去销售。

还值得一提的是,由于政府和监管机构正在强制制定法律和政策,以加强残疾人参与任何在线服务时的权利,因此未能提供网络可访问性可能会产生法律后果。

WooCommerce 开箱即用的可访问性如何?

现在,您可能想知道: WooCommerce 开箱即用的可访问性如何?

简短的回答是视情况而定。

WooCommerce 可以访问,但这取决于您的商店是如何建立的。 您当然可以通过对组件做出正确的决定来使 WooCommerce 易于访问,例如使用核心 WooCommerce 功能和可访问的 WordPress 主题和第三方插件。 唯一的问题是大多数商店目前没有所有这些列出的组件都可以访问。

例如,店面主题是完全可访问的,并且与 WooCommerce 完美配合。 然而,这并不意味着所有其他主题都可以访问。 您可以使用“可访问性”标签搜索 WordPress 主题目录,以查找内置可访问性的主题。

但是,拥有一个可访问的主题并不是让整个 WooCommerce 商店都可以访问的全部内容。 用于构建 WooCommerce 商店的第三方插件可能并不总是符合核心 WooCommerce 插件所具有的可访问性标准。

即使您使用的是可访问的插件,但这并不意味着您的整个商店都可以访问。 您需要添加 ALT 文本、可访问的颜色和可访问的标题。 手动实施这可能具有挑战性 – 但这些是拥有可访问的 WooCommerce 商店的必要步骤。

什么样的东西需要被访问?

让我们看一下应该改进的一些事情,以使您的整个 WooCommerce 商店更易于访问:

图片

如果添加了 ALT 文本,图像可以帮助视障人士。 这可以帮助这些人使用屏幕阅读器“阅读”图像并了解图片中发生的情况。 在您的 WooCommerce 商店中,您可以使用 WordPress 的内置功能将 ALT 文本添加到图像中。

向图像添加 ALT 文本

通过提供有关图像的清晰、中肯的信息,您可以创建高质量的 ALT 文本,以便用户轻松理解。 您也不需要弄乱并在 WooCommerce 商店的每张图片中添加 ALT 文本。 背景或壁纸之类的图像没有太多上下文可供用户“阅读”。

首字母缩略词

根据网络可访问性指南,应提供一种机制来识别缩写的扩展形式或含义。 您的目标应该是在扩展表单之前(或之后)的页面上首次出现的首字母缩写词的扩展。

例如,而不是简单地写 世界卫生组织 然后将其称为 在文章的其他地方,你会写 世界卫生组织 (WHO) 第一次出现。

另一种方法是使用 HTML 中的 abbr 元素。 一个例子是 <p>Sugar is commonly sold in 5 <abbr title="pound">lb.</abbr> bags.</p>.

联系表格

让所有类型的用户都可以访问 WooCommerce 商店中的联系表格和结帐表格,这一点很重要。 例如,不是简单地用红色勾勒出一个表单域来表示一个必填字段,你可以写 必填项目 在它旁边或使用一个图标,其 ALT 文本指示该表单域是必需的。

必填字段已标记

对于表单,重要的是尽可能使用图标、符号和错误消息,而不是单独使用颜色来指示填写表单时的错误。

链接

“读取”图像的屏幕阅读器可能还需要读取链接。 通过在超链接上添加有用的信息,您可以使屏幕阅读器更易于访问。 它让用户在用户实际点击链接之前知道链接的作用或导致的结果。

例如,提供“单击以继续”超链接不是放置超链接的可访问方式。 相反,通过说“单击此处阅读有关床垫产品的更多信息”,我们为您的 WooCommerce 商店创建了一个更易于访问的超链接。 您还可以使用 aria-label 属性为需要它的链接添加描述性标签。

字体和文字

您决定使用的字体样式和颜色对提高 WooCommerce 商店的可访问性有巨大影响。 首先,为您的 WooCommerce 商店中的所有文本使用易于阅读的字体大小。

这不仅可以提高视障用户的可访问性,还可以提高想要扫描您的网站以获取信息的人的可访问性。 使用 16px 字体通常是正文的可靠起点。 即使您使用装饰性字体,这也使用户可以轻松阅读文本。

请记住,草书字体不应用于重要文本,以提高可读性和可访问性。 在您的 WooCommerce 商店中使用 2 到 3 种不同样式的字体。 仅为签名或设计元素保留装饰性字体,并为您的 WooCommerce 商店的主要文本保留干净的字体。

您如何获得可访问的 WooCommerce 商店?

那么,您如何获得可访问的 WooCommerce 商店?

一种方法是手动审核并自行添加所有内容。 但是,更好的选择是 使用像 accessiBe 这样的解决方案 为你打理一切。 accessiBe 负责审核并提供各种功能,帮助您使您的商店更易于访问。

访问调整

以下是您可以通过 accessiBe 获得的:

  • 自动屏幕阅读器调整。 accessiBe 使用 AI 学习来分析和扫描数据,以便它可以像有视力的用户一样解释。 通过使用 ARIA 属性和行为调整,accessiBe 允许盲人用户轻松浏览您的 WooCommerce 商店并进行购买。
  • 键盘导航调整。 用户可以使用键盘上的 Tab 键、箭头键和 ESC 键等键来浏览您的整个站点。 accessiBe 允许用户在没有鼠标的情况下访问网站的所有正常功能,例如弹出窗口、表单、下拉菜单和按钮。
  • 用户界面和设计调整。 accessiBe 在可访问性界面的帮助下,允许用户调整网站的设计和 UI。 用户可以自定义字体、放大光标以及更改对比度和颜色级别,以实现更好的可访问性。 accessiBe 还允许用户更改文本的缩放、大小和间距。 您可以在不牺牲可读性或可用性的情况下完成所有这些操作。
  • 每日合规监控。 accessiBe 还为您提供可靠性。 它通过每 24 小时重新扫描和修复可访问性问题来保护企业免受诉讼。
  • 每月合规审计。 您不必担心错过审核。 accessiBe 每月通过电子邮件向您发送专业的合规审计。
  产生经常性收入的最佳 WordPress 和 WooCommerce 订阅插件

结论

希望您对 WooCommerce 开箱即用的可访问性以及可以使哪些内容更易于访问有更好的了解。 使用 accessiBe,您可以通过几个简单的步骤使您的在线商店更易于访问。

准备好开始让您的 WooCommerce 商店更易于访问了吗? 立即访问iBe

类似文章