如何满足Shopify主题商店新的可访问性要求

与网上商店2.0的推出欧宝体育官网入口首页还有重新开放的Shopify主题商店主题提交，这是一个伟大的时间来考虑建立一个Shopify主题。为了确保所有Shopify主题都是可用和可访问的，我们为所有新主题提交引入了新的要求和指导方针。

当商家选择主题时，可访问性变得越来越重要。我们希望与我们的主题合作伙伴分享清晰、简洁的期望，以便在设计新主题时遵循，这样您就可以从一开始就考虑到包容性的最佳实践。

在本文中，我们将回顾这些新的主题可访问性要求，以及如何使您的主题兼容。

可访问性的重要性

作为主题设计人员和开发人员，您有很大的责任在默认情况下包含可访问性和包容性设计最佳实践。这一点至关重要，原因如下:

• 提供包容性访问有助于残疾人士——大约占全球人口的15%——独立而有尊严地生活。
• 存在增加收入的潜力从你的主题，越来越多的人能够成功地使用主题。
• 可访问性有助于提高性能和增加搜索引擎优化。
• 不歧视残疾人士依靠谁?辅助技术有助于为使用您主题的商家建立积极的公众认知。
• 从一开始就将易用性融入你的主题中会帮助商家避免基于数字无障碍的诉讼。许多世界各地的无障碍法律和政策要求最低WCAG2.0 AA级合规。

使您的主题可访问是一个优先事项，所以，让我们深入到您的主题必须满足在Shopify主题商店发布的可访问性要求。

如何测试可访问性

如上所述，可访问性应该融入主题构建的各个方面。为了确保你已经成功地做到了这一点，彻底的易访问性测试是关键。

并不是所有的主题页面都需要测试(尽管我们鼓励你这样做)。具体来说，我们希望合作伙伴关注“关键路径”。也就是说，在使用辅助技术的情况下，从主页到结帐相对容易。

我们希望合作伙伴专注于“关键路径”。也就是说，在使用辅助技术的情况下，从主页到结账相对容易。”

例如，某人能否仅使用键盘就成功地从主页、产品页面、向购物车中添加商品，然后进行结帐?

此外，并不是所有的主页部分都需要测试(尽管我们鼓励您这样做)。关注关键部分，如页眉导航、产品标注和页脚导航。

测试主题默认值

确保主题设置、颜色、布局、图像和内容与可访问的默认值捆绑在一起。如果一个主题附带了多个演示，请专注于测试默认主题演示。

创建可访问默认值的目的是为商家的成功做好准备。想象一下这样一个场景:商家安装了主题，只上传他们的产品内容。在没有任何其他更改或自定义的情况下，主题应该提供高度可访问的用户体验。

测试客观的可访问性问题

在提交主题到主题商店之前，请测试客观的可访问性问题。运行灯塔可访问性测试工具套件这是内置的谷歌Chrome浏览器。

平均分包括以下主题页面的Lighthouse测试结果:

1. 主页
2. 产品页面
3. 收藏页面
4. 购物车页面

通过在每个单独的页面上运行Lighthouse可访问性测试来查找平均分数。把每一页的分数加在一起，然后除以4(因为我们测试的是四页)。另外,创建一个新的谷歌电子表格然后使用平均函数求平均分。

我们的主题审查小组也将运行相同的测试方法。根据Lighthouse的说法，我们通过针对基准商店运行Lighthouse可访问性测试来实现这一点，然后分配单个分数来显示主题的可访问性。

为了纠正发现的任何问题，请按照Lighthouse提供的说明进行操作。检查可访问性审计发现可能问题的文档。回顾视频易访问性测试—完全工具提示从Google Chrome开发人员如何使用灯塔。

测试主观可访问性问题

除了上面概述的自动化测试需求外，团队还将进行一系列手动测试，以确定具体的主观的可访问性问题。这样做的目的是帮助在使用辅助技术时发现常见的访问障碍。下面我们来看看这八个主观可访问性问题。

1.页面的所有部分都必须是可通过键盘访问的

并非所有用户都能使用鼠标。单独使用键盘来测试主题的可导航性和功能。从主页到结帐，所有工作流都必须只使用键盘。所有自定义控件、链接、按钮和表单输入必须是可操作的。

主题小组将审查的常见问题包括:

• 下拉导航元素打开点击，不上的焦点。这使得键盘用户可以轻松地绕过导航区。打开输入或空间。接近Esc，将焦点返回到父元素。
• 模态窗口必须转移焦点在自身之内。这有助于引导键盘用户使用新显示的内容。Esc将焦点返回到启动器元素。
• 从屏幕的侧面或顶部动态“飞出”的购物车抽屉必须将注意力转移到自身或内部。这有助于引导键盘用户使用新显示的内容。Esc将焦点返回到启动器元素。
• 产品卡通常具有指向同一页面的多个链接(图片、标题、“更多详细信息”等)，应该以一种方式构建，导致单个选项卡停止，但允许所有详细信息通过辅助技术导航。

如何测试

关于如何使用键盘测试主题的一些建议:

• 使用选项卡此键用于在页面上可聚焦的元素之间移动
• 使用转变+选项卡向后移动
• 使用输入要激活链接，输入或空间要激活按钮，空间激活复选框/单选/选择输入控制
• 使用箭头在分组无线电控件之间导航的键

需要注意什么

在键盘辅助性测试中，感兴趣的项目可能包括:

• 锚元素用于打开新页面或将焦点转移到同一页面/上下文的内容上。
• 表单提交控件是不禁用默认情况下。
• 按钮元素用于激活模态窗口/购物车抽屉，当激活时，焦点转移到窗口。
• Esc支持取消模态、购物车和下拉上下文，将焦点返回到激活器控件。
• 只有本机可对焦的元素应该是可对焦的。链接、按钮、表单控件等。静态内容，如纯文本，图像等，应该不focusable。使用tabindex谨慎属性。

资源

• WCAG 2.1.1键盘——W3C
• 披露(显示/隐藏)- WAI-ARIA创作实践
• 对话框(模态)- WAI-ARIA创作实践
• 卡片-包容性组件
• 键盘访问基础——谷歌开发者
• 确保所有的交互功能都是键盘可访问的——迪克大学
• 键盘——MDN
• 键盘可访问性——WebAIM

你可能还喜欢:考虑键盘可访问性设计应用程序的5个步骤。

2.形式输入元素必须具有标签年代为属性

形式输入，文本区域,选择控件需要以编程方式关联的标签。为了提供上下文输入目的是通过可访问名称计算标签元素必须有其为属性匹配id相关的输入元素。如果没有标签，屏幕阅读器用户可能不知道或不理解所需数据的目的。语音听写用户可能无法调用命令来选择指定的表单输入。

使用占位符属性是不标签的替代品，其目的是提供样本数据。

❌坏例子:只实现一个视觉“标签”

名字
 

✅好例子:实现标签元素，以编程方式赋值给其相关的输入

名字

或者，应用aria-label属性，使用显式文本值或aria-labelledby将现有内容容器直接引用到输入元素提供了一个可访问的名称，并且将满足测试需求。在适当的时候使用这些技巧。

✅好例子:应用aria-label属性以提供标签

如何测试

如果表单字段缺少标签关联，那么Lighthouse报告将包含该字段。手动测试:

1. 打开Chrome DevTools
2. 确保表单标签元素存在于DOM中
3. 检查为属性值，确保它与id相关的输入

需要注意什么

形式输入年代必须与…有关联标签，最好是始终可见的标签。或者，应用aria-label属性，具有显式文本值或aria-labelledby将现有内容容器直接引用到输入元素提供了一个可访问的名称，并且将满足测试需求。

资源

• WCAG 3.3.2标签或说明——W3C
• 标签表单元素——谷歌开发者
• 使用标签的形式，以最大限度地提高屏幕阅读器兼容性——迪克大学
• 标签——MDN
• 将表单标签与控件关联——WebAIM

3.主题必须使用有效的HTML构建

有效的HTML有助于确保一个健壮的、与设备/浏览器无关的体验。它还有助于确保可访问的用户体验。通过提供有效的HTML，浏览器将从DOM获取信息，并提供辅助技术使用所需的详细信息。这些细节构成了所谓的可访问性树。

如何测试

• 如果测试存储是公共的，复制URL并粘贴进去Nu Html检查器
• 如果存储有密码保护:

1. 打开DevTools检查器
2. 从检查器窗口复制代码
3. 粘贴到Nu Html检查器-文本区域

需要注意什么

地址全部报告错误。警告通常是可以忽略的，但要做出最好的判断。

资源

• WCAG 4.1.1解析——W3C
• HTML规范——WHATWG
• 无障碍树——谷歌开发者
• 使用有效的标记来防止可能的可访问性问题——迪克大学
• 超文本标记语言——MDN

4.必须输出image.alt查看所有产品图像

演示商店产品形象alt文字必须描述产品;它是什么，它的物理特征，模特是如何穿着/使用产品的，等等。提供足够的信息来在用户的脑海中建立心理形象，但不要提供太多的细节来压倒用户。这有助于屏幕阅读器用户理解什么产品是。

提供代替图像描述的产品标题是不令人满意。

产品alt文本应提供在每个模板的图像出现;首页特色产品板块、收藏页面、产品变型图片、购物车等。这有助于在整个用户旅程中提供产品上下文。

❌错误示例:使用产品标题作为图像alt文本

< img src = " {product.image。年代rc}" alt="{product.title}">

✅好例子:使用图像alt商户提供的文字

< img src = " {product.image。年代rc}" alt="{product.image.alt}">

考虑下面的产品图像。你会如何向看不到图片的人描述你的产品?

为这个图像生成的标记可能是这样的:

如何测试

使用Chrome DevTools检查产品图像。

或者，在你选择的平台上使用屏幕阅读器:macOS的画外音或Windows上的NVDA。使用虚拟光标浏览页面内容，并聆听每个产品图像是如何描述的。

需要注意什么

的alt值应该描述该产品。提供足够的信息来在用户的脑海中建立心理形象，但不要提供太多的细节来压倒用户。

好的替代文本分享图像所传达的内容的细节。在本文中阅读更多细节书写Alt文本时的注意事项在Shopify UX博客上。

资源

• WCAG 1.1.1非文本内容——W3C
• 包括图像和对象的替代文本——谷歌开发者
• Alt文本应该描述图像的目的——迪克大学
• Image Embed元素——MDN
• 替代文本——WebAIM

5.测试色彩对比

的颜色对比背景和前景之间的内容(通常是文本)应该足够大，以确保易读性。弱视、色盲或阳光直射的用户需要足够的对比度，以使文本和非文本内容清晰可见。

如何测试

如果发现对比度问题，灯塔将报告。

手动测试颜色(如背景图像上的文本)使用macOS数字式色彩计或者用类似的工具来选择颜色值，然后使用对比度来测试对比。

需要注意什么

• 处于默认、悬停、焦点或活动状态的文本内容和控件文本必须满足1.4.3:对比度(最小)：
• 的对比度4.5: 1对于正常大小的文本(低于24像素或18像素，粗体)
• 的对比度3:1大文本(大于或等于24像素或18像素，粗体)
• 控件边框、相邻背景(如果没有边框)、图标和自定义焦点环必须满足1.4.11:非文本对比：
• 的对比度3:1对于相邻背景下的非文本内容
• 审查活动用户界面组件示例了解更多详情。

不受上述限制的组件:

• 处于禁用状态的控件禁用属性
• 默认浏览器焦点环
• 文本嵌入图像，这是为了装饰
• 标志

资源

• WCAG 1.4.3对比度(最小值)——W3C
• 1.4.11非文本对比——W3C
• 颜色和对比度可及性——谷歌开发者
• 检查文本和背景是否有足够的颜色对比度——迪克大学
• 颜色对比——MDN
• 对比度和色彩可及性——WebAIM

6.可对焦元素必须具有可见的焦点状态

仅使用键盘、语音听写、弱视和其他不能使用鼠标的用户组必须了解当前键盘光标的位置。

控件表示键盘光标的位置关注环。在CSS中，焦点环通常使用大纲财产。我们强烈建议不移除默认的对焦环。

❌坏例子:移除所有用户的对焦环

*:专注{
大纲:没有;
}

✅好例子:没有去掉默认的对焦环

*:专注{
/* outline: none;* /
}

作为替代方案，可以考虑使用: focus-visible伪类。这将删除鼠标和触摸用户的可见焦点环，但保留仅键盘用户的焦点环。谨慎使用本地浏览器支持是有限的。

✅好例子:使用: focus-visible伪类，仅为鼠标/触摸用户删除焦点环

*:专注:不(focus-visible) {
大纲:没有;
}

如果存在自定义对焦环，则其颜色对比度必须遵循3:1比率。

如何测试

使用选项卡键将键盘焦点向前移动，转变+选项卡向后移动

需要注意什么

当你只用键盘在页面上导航时，你能看到一个视觉焦点环吗?您知道键盘焦点在页面上的位置吗?

可操作的页面元素，如链接、按钮、表单控件等，在处于焦点位置时，应该有一个视觉焦点环。

资源

• WCAG 2.4.7焦点可见——W3C
• 风格的焦点——谷歌开发者
• 增强视力键盘用户的视觉焦点——迪克大学
• 大纲——MDN
• : focus-visible——MDN
• 关注的指标——WebAIM

7.可见焦点顺序必须与DOM顺序匹配

键盘焦点环应该以线性、可预测的顺序移动:从上到下、从左到右(当适当的焦点顺序应该与阅读顺序匹配时，本地化为从右到左)。注意力转移到一个意想不到的方向，因为CSS内容重排可能导致低视力，认知障碍或神经分化使用者的问题。

“由于CSS内容重新排序，焦点向意想不到的方向转移可能会导致低视力、认知障碍或神经分化用户出现问题。”

例如，CSS属性，如flex-direction值为row-reverse应尽可能避免。要遵循的基本经验法则是确保可见焦点顺序与DOM顺序匹配。这也适用于断点，包括“移动”布局。

❌坏例子:只在视觉上反转内容

.box {
显示:flex;
flex-direction: row-reverse;
}

✅好例子:DOM中概述的内容流

.box {
显示:flex;
flex-direction:行;
}

如何测试

使用选项卡键将键盘焦点向前移动，转变+选项卡向后移动

需要注意什么

键盘对焦环应该从上到下、从左到右移动(适当时本地化为从右到左)。

资源

• WCAG 2.4.3焦点顺序——W3C
• 内容重新排序——谷歌开发者
• 导航顺序——WebAIM

8.触摸目标尺寸

有精细运动控制障碍的用户需要大的触摸目标尺寸才能使用。如果触摸目标太小，用户可能会错过并无意中激活另一个控件。这包括鼠标/触摸用户以及老龄化人口。

WCAG 2.5.5目标大小的目标大小44通过44CSS像素。这适用于移动导航开关、表单输入、导航项等——所有关键的导航和输入方法。正文内的链接除外。

请注意:使用CSS填充属性可以在不破坏预期设计的情况下增加控件的物理尺寸。

❌坏例子:通过像素值使用固定的宽度和高度

.navigation-toggle {
高度:32像素;
宽度:32像素;
}

✅好例子:使用灵活的单位和填充来增加触摸目标的大小

.navigation-toggle {
高度:2 em;
宽:2 em;
填充:1.25 em;
}

如何测试

使用Chrome DevTools快速检查控件的物理大小。尺寸在检查窗口的右上角显示。

需要注意什么

至关重要的诸如移动导航开关、表单输入/按钮等，应该至少有一个物理触摸目标尺寸44通过44CSS像素。

资源

• WCAG 2.5.5目标大小——W3C
• 可访问的tap目标——谷歌开发者
• 大触摸目标- A11Y项目

使主题易于访问

主题可访问性的其他文档可以在主题店要求和Shopify主题的可访问性最佳实践页面上Shopify.dev。

开发人员使用VS代码建议安装无障碍衬板插件。当您编辑主题模板时，这个过滤器会监视并报告任何可能导致可访问性障碍的标记问题。

为了将您的主题可访问性提升到一个新的水平，请考虑与Shopify合作伙伴联系Fable技术实验室。整合来自依赖辅助技术的人们的反馈将增加主题的可访问性和可用性。

如果你对这些新主题商店的要求有任何疑问，或者对数字可访问性有任何疑问，请联系我们的团队# a11y频道在Shopify主题合作伙伴Slack。

满足这些要求不仅可以让您在Shopify主题商店中发布主题，还可以让您的商家和他们的购物者获得成功。