可访问性

让商业更有利于每个人,就意味着深切关注生产高质量的产品。一个高质量的产品应该有一个出色的用户体验(UX)。

这包括:


适用于所有人

重要的是Shopify产品和合作伙伴产品——对每个人都有用。

每个人都是一个相当大的群体。它包括我们的商家,他们的客户,我们的开发伙伴,我们的员工,以及更大的技术社区。这也包括我们社区的所有残疾成员。

残疾可能会影响人们的行动、视觉、听觉、交流、学习、理解和处理信息的方式。因此,考虑如何设计和开发您的产品以支持广泛的需求和体验是很重要的。

在美国,多达四分之一的成年人至少有一种残疾[来源:疾病预防控制中心].在加拿大,这一数字为22%,而在世界其他地方,这一数字接近七分之一[来源:加拿大统计局世界银行].


打造包容性体验

使用我们的组件是为Shopify构建产品时提高可访问性和一致性的一种方式。

  • 本样式指南中的组件库包含了可以跨应用程序使用的代码
  • 该组件代码包括可访问的标记
  • 由于代码存在于可重用的单个组件中,因此更容易更新和修复任何错误

“一次构建,随处使用”的模式意味着构建这些组件的设计人员和开发人员的可访问性知识对所有Shopify和我们的合作伙伴都是可用的。因此,商家可以获得一致的体验,并将其转化为可访问的产品。

组件中的许多可访问性特性都是免费的。但是,重要的是要确保组件以不会产生不可预见的可访问性障碍的方式集成。根据组件的使用方式,可能会有更多的设计和实现方面的考虑。确保在集成后测试用户任务流。

管理焦点以支持商家工作流

不要在没有商家输入的情况下通过编程将焦点转移到新内容上。北极星组件使用控件来显示覆盖,如模态和弹出窗口,自动管理焦点。

  • 当商家激活一个链接到页面的其他地方时,将焦点转移到该内容上
  • 当商家必须访问覆盖时,将焦点移到该覆盖上
  • 当商家提交的表单导致错误时,将焦点转移到错误消息上

  • 当内容在后台更新时移动焦点
  • 当用户正在页面的其他地方工作时,移动焦点

在没有得到商家同意的情况下管理焦点的唯一情况是,当商家因为无法继续当前的工作流而需要中断时。

限制非标准交互

商家将期望按照浏览器、平台和辅助技术的默认方式与控件和内容进行交互。引入非标准功能可以为商家提供更好的完成任务的方式,但也会制造障碍。

例如,依赖键盘的商家希望按钮可以用键盘激活输入/返回键或空间关键。如果按钮被编程为与不同的键一起使用,商家将需要指导如何使用它们。

在设计或构建使用非标准控件或交互的自定义功能之前,首先考虑使用本机功能是否可以达到目标。

如果是非标准交互要求:

  • 仔细遵循在平台上设计、构建和测试自定义功能的指导方针和最佳实践
  • 向商户提供使用自定义功能的明确说明
  • 提供一种额外的、标准的方式来完成任务

辅助技术支持

我们的组件通过自动和手动技术测试可访问性。商家应该期望能够使用现代辅助技术访问由我们的组件构建的功能。这些工具包括原生工具和第三方工具,比如:

  • 屏幕阅读器
  • 语音识别程序
  • 支持低视力和色盲
  • 替代键盘
  • 开关设备
  • 可读性工具

编码标准

北极星组件从HTML、CSS和JavaOB欧宝娱乐APPScript的web标准开始。可访问富Internet应用程序(WAI-ARIA或ARIA)规范中的特性用于构建原生HTML中无法提供的功能。

替代文本

为了帮助那些依赖于辅助技术的人,例如屏幕阅读器或其他文本到语音程序,我们的组件使用替代文本用于传递信息和操作的图标和图像(如按钮和链接)。

符合网页内容无障碍指引(WCAG)

北极星目标WCAG 2.1 A级和AA级成功标准,并寻求为每个人提供高度可用的体验。

有关更多信息,请参阅以下资源:

反馈

有时候,构建无障碍和包容性的体验可能很困难。如果我们在这份风格指南中有任何错误,请指正通过创建一个GitHub问题来接触帮助我们变得更好。