可访问性对您的在线商店的重要性

已发表: 2016-11-16

每个在网上购物的人都会有所不同。 我们按照自己的节奏做出决定,使用不同的设备,并以我们觉得最舒服的方式与商店互动。

对于一些购物者来说,查看或购买产品的过程与您的预期大不相同。 由于生活在发展中国家,他们的互联网连接可能很慢,他们可能由于视力障碍而依赖屏幕阅读器,或者由于无法可靠地使用鼠标,他们可能使用键盘导航。

这些差异产生了设计和维护每个人都可以访问的商店的需求。 这就是电子商务的可访问性目标:创建一个每个人都可以使用的在线商店,无论他们的年龄、技能水平、位置或是否存在残疾。

今天我们将看看为什么你应该让你的 WooCommerce 商店更容易访问,以及一些你可以用来为所有购物者改进其设计和功能的资源。

准备好学习了吗? 让我们先仔细看看我们谈论可访问性时的含义。

电子商务可访问性:它是什么以及它为何重要

万维网联盟(简称 W3C)表示,“可访问性意味着残障人士可以使用 [互联网] 。” 他们的 Web Accessibility Initiative (WAI) 介绍详细说明:

Web 可访问性包括影响 Web 访问的所有障碍,包括视觉、听觉、身体、言语、认知和神经障碍。

客户访问或使用在线商店的能力也可能受到外部因素的影响,例如他们的互联网连接速度或计算机硬件的可用性。 它也可能受到临时因素的影响,例如手臂骨折或眼镜处方不正确或老化。

可访问性措施确保每个人都可以使用您的网站,无论他们需要帮助、识别为残障人士,还是无法使用计算机等传统浏览方法。
可访问性措施确保每个人都可以使用您的网站,无论他们需要帮助、识别为残障人士,还是无法使用计算机等传统浏览方法。

无论您是开发商、商店建设者还是商店所有者,您都有责任确保每个人都能有效地使用您的商店。 这不仅仅让您的客户满意:正如 W3C 所展示的,它可以对您的盈利能力、搜索引擎可见性和长期投资回报率产生非常实际的影响

可访问性涉及的不仅仅是向图像添加替代文本和优化您的商店以快速加载。 因此,您可以更好地理解,让我们来看看您的一些客户的在线体验可能有多么不同。

探索在线体验之间的巨大差异

当我们处于这篇文章的早期计划阶段时,我们与一位联系我们寻求支持的 WooCommerce 客户进行了一次令人大开眼界的接触。 我们的一位团队成员要求客户向我们发送错误截图。 他们不能,并给了我们理由:

我们是盲人,电脑会读给我们听。

这个特定的客户使用屏幕阅读器和其他辅助技术建立了他们的整个商店。 然后,他们通过使用音频与 WooCommerce 的客户以及我们的支持团队进行了互动。

可以肯定的是,对于我们的支持团队来说,这是一个令人震惊的时刻。 但这也是建立无障碍商店的绝佳提醒——因为如果盲人可以使用屏幕阅读器建立可用的商店,那么我们这些完全或部分视力的人应该能够建立一个可以使用屏幕阅读器的商店

无论您的愿景水平如何,您都应该能够使用——甚至建立——WooCommerce 商店。
无论您的愿景水平如何,您都应该能够使用甚至建立一个 WooCommerce 商店。

除了屏幕阅读器,还有一些客户不能使用电脑鼠标,可能是因为身体残疾。 这些购物者使用标签和箭头键浏览网站,并使用回车键“点击”链接。

还有一些购物者需要帮助下订单。 一些客户只是觉得通过电话提供他们的账单信息更舒服。 其他人无法查看或使用在线订单。 而其他人只能使用无法可靠支持在线订购的技术。

这只是不同人使用互联网和在线购物的多种方式中的一个示例。 众多的背景、经验和设备确保我们做的事情都有些不同……并创造了对适合每个人的商店的需求。

迈向更便利商店的第一步:尝试已有的东西

随着对可访问性的重要性有了更好的理解,您可能会问“我怎么知道我是否可以访问?”

您应该做的第一件事是尝试自己使用您的商店。 将自己置于色盲、无法使用鼠标或视力不佳的购物者的立场。

当您浏览您的商店时,您是否注意到任何图像或按钮在没有全色彩感知的情况下可能看起来很奇怪? 您可以使用键盘进行导航,还是一个乏味的过程? 如果您将缩放增加到 150% 或更多,您的商店是否仍然可用?

根据您商店中的媒体,您也可能会在那里发现一些问题。 如果您有产品视频,它们有字幕吗? 您的产品描述是否说明了衬衫的感觉(质地)以及它是什么颜色?

您通常可以通过简单地放慢速度并集中注意力来发现弱点。 这些弱点通常很容易解决——例如,更改按钮的颜色或将导航推到页面上更高的位置——但它们需要你愿意过上自己的生活,即使是暂时作为一个不同能力的人。

使用真实的购物者反馈、免费在线工具和官方资源来改善您的商店

当然,除非您残障、弱势群体或处于其他阻碍您以典型方式使用在线商店的情况,否则可能很难确切知道您是如何挑战购物者去做一些简单的事情的。

我们鼓励您使用 - 甚至可能积极征求 - 购物者的真实反馈,以了解如何使访问商店的过程更容易。 获得此反馈可能很困难,但如果您主动提出要求(例如,在购买后的电子邮件中?)它会随着时间而来。

您也可以尝试像 UserTesting.com 这样的服务,或与​​提供测试的当地机构合作以收集反馈,但您需要先询问可访问性特定测试

有色盲的购物者能看到他们应该点击的按钮吗?使用屏幕阅读器的人可以成功浏览您的商店吗?用户测试总是有帮助的,但在这里更是如此。
有色盲的购物者能看到他们应该点击的按钮吗? 使用屏幕阅读器的人可以成功浏览您的商店吗? 用户测试总是有帮助的,但在这里更是如此。

我们推荐的一种免费工具是 Web Accessibility Tool WAVE。 将任何 URL 插入此工具,您将看到可能给购物者带来问题的错误和警报列表,范围从缺少替代文本(屏幕阅读器必需)到损坏或空链接(通常只是糟糕的设计)。

WAVE 的输出将帮助您整理任何可能给购物者带来问题的错误。
WAVE 的输出将帮助您整理任何可能给购物者带来问题的错误。

WAVE 还为每个错误或警报提供文档,因此您可以了解标记某些内容的原因并决定如何解决它。

特别是在视觉方面,您可以尝试使用 Vischeck 来模拟存在色盲的网站,或者使用 ACTF aDesigner 检查您商店的内容是否与屏幕阅读器等工具兼容。

对于速度测试——因为缓慢的互联网连接会影响发展中国家用户的体验——我们推荐 Pingdom,它既可以测试你的商店,也可以提供改进它的详细建议。 这篇文章中还有一些很好的技巧,专门针对优化 WooCommerce。

最后,如果您位于美国(或向居住在那里的客户销售产品),您可以略读政府的第 508 节电子和信息技术标准。 这些标准(尤其是第 1194.22 节中的标准)为网站等可访问技术提供了要求,包括替代文本、色盲可查看的项目以及定时响应的警报。

这些标准的样本——即使您不在美国,也应遵循良好的规则。
这些标准的样本——即使您不在美国,也应遵循良好的规则。

这不仅仅是关于商店:当您使用电子邮件、社交媒体等时,请记住可访问性

就像我们上面给出的盲人 WooCommerce 客户的示例一样,记住每个客户与您的互动方式有多么不同是至关重要的。 但可访问性超越了您商店的页面——它包含了您的整个在线形象

每当您回复电子邮件、发送营销信息或发布推文时,您都在与以非常不同的方式访问 Internet 的客户进行交互。 想一想:

  • 电子邮件通信——您是否包含电子邮件的纯文本版本? “在线查看”选项怎么样? 大多数客户端会默认生成这两个。
  • 您如何支持您的购物者——如果您通常要求提供问题的屏幕截图或缺陷照片,请考虑提供替代选项。 例如,我们允许 WooCommerce 客户创建临时登录,以便我们自己检查问题。
  • 您提出的请求,尤其是链接请求——诸如“点击这里”或“点击我们简历中的链接”之类的短语不仅对屏幕阅读器用户,而且对平板电脑或移动设备上的用户(他们正在点击,而不是点击! )。
  • 如何简化流程——你能接受电话而不是电子邮件吗? 亲自或通过电话而不是通过您的商店订购? 或者,如果您依靠电话,您可以通过哪些流程在线帮助客户解决焦虑等问题?

最后一句忠告:不要以“足够好”为目标

您之前可能已经看到此图像的变体:

平等是给每个人一个盒子,但公平是给每个人看比赛所需的一切。 (图片来源:社会变革互动研究所,由 Angus Maguire 绘制
平等是给每个人一个可以站立的盒子,但公平是给每个人看比赛所需的一切。 (图片来源:社会变革互动研究所,由 Angus Maguire 绘制)

阅读一些关于可访问性的提示,使用键盘或单一在线测试尝试您的商店,并称其为“足够好”,这可能很诱人。 但足够好并不是真正的好

专门更新您的商店以为不同能力的购物者提供更好的体验令人钦佩的。 但这并不一定有助于连接速度较慢或设备屏幕非常小的购物者。 这就是为什么我们建议您将最终目标定为改善多种购物者、设备和需求的体验

我们认为,这个目标甚至超越了可访问性——它是一个更广泛的客户整体幸福目标。 这样想:你能做些什么来让每个客户更有可能从你那里购买,无论他们是台式电脑的盲人用户还是发展中国家的全视力移动购物者?

您可能必须针对这些特定场景对的商店进行特定更改。 但这就是为什么我们认为你应该关注公平与平等——因为给每个人他们需要的东西会让他们更有可能从你那里购买

这是为了创造更具包容性的购物体验

可访问性不是一个容易涵盖的主题,更不用说了解了。 我们已尽最大努力向您展示它为何如此重要,但我们建议您对此主题进行一些额外的研究和阅读。 W3C 是一个很好的起点。

目前,我们希望这篇文章能给您一些思考的食物,以及一些有用的提示或资源,以帮助您建立一个每个人都可以使用的商店。

对本文推荐的任何可访问性工具、提示或想法有任何疑问吗? 或者您自己对这个主题有什么反馈意见? 我们很乐意听取您的意见——在下面发表评论以开始讨论。

谢谢阅读!

推荐阅读:

  • 我们如何使 Storefront 主题更易于访问
  • 规划商店导航时应考虑的事项

标题图片来源:#WOCinTech Chat (CC)