harborandpine.example

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：键盘焦点被困在 Cookie 横幅中（WCAG 2.1.2）。
位置：1 个页面上共 1 个实例，例如 /。

一个未通过的元素（浏览器渲染后的代码）：
```html
Settings
```

为什么重要：如果焦点被困住，仅使用键盘的用户和屏幕阅读器用户将完全无法购物（WCAG 2.1.2 无键盘陷阱）。

需要修改的内容：
- 在您的 Cookie 或同意横幅应用的设置中查找无障碍或焦点陷阱相关选项，或请供应商修复。
- 模态框只能在打开期间将焦点保持在其内部，并且必须能用 Escape 键关闭，然后将焦点返回到原来的位置。

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：无法用键盘选择产品选项（WCAG 2.1.1）。
位置：1 个页面上共 1 个实例，例如 /products/trail-daypack。

一个未通过的元素（浏览器渲染后的代码）：
```html
<div class="size-option" data-fr="opt-1">S</div>
```

为什么重要：仅使用键盘的购物者（包括许多屏幕阅读器用户）无法通过此步骤（WCAG 2.1.1）。

需要修改的内容：
- 用带可见标签的原生单选按钮（或 <select>）构建选项选择器；将标签设置为色块样式。
- 如果保留自定义元素，每个选项都需要 tabindex="0"、位于 role="radiogroup" 内且带 aria-checked 的 role="radio"，以及方向键和空格键处理。原生单选按钮会自动提供这些功能。

建议的修改（您主题中产品表单的变体选择器）：
```html
<fieldset class="variant-picker">
  <legend>Size</legend>
  <input type="radio" id="size-s" name="Size" value="S" class="visually-hidden">
  <label for="size-s" class="size-option">S</label>
  <input type="radio" id="size-m" name="Size" value="M" class="visually-hidden">
  <label for="size-m" class="size-option">M</label>
</fieldset>
```

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：按钮必须有可辨识的文本（WCAG 4.1.2）。
位置：9 个页面上共 41 个实例，例如 /、/collections/all、/products/trail-daypack、/cart。

一个未通过的元素（浏览器渲染后的代码）：
```html
<button type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="7"></circle><path d="M20 20l-3.5-3.5"></path></svg></button>
```

为什么重要：WCAG 4.1.2 要求每个控件都有名称。缺少名称的按钮通常包括数量增减按钮、关闭按钮和轮播箭头。

需要修改的内容：
- 在下面的示例中找到这些按钮。
- 添加可见文字、视觉上隐藏的文字，或说明按钮作用的 aria-label（例如 aria-label="Close" 或 aria-label="Increase quantity"）。

建议的修改（您的主题代码，可在其中搜索所示的标记）：
```html
<button type="button" aria-label="[What this button does]">…</button>
```

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：图像必须有替代文本（WCAG 1.1.1）。
位置：7 个页面上共 22 个实例，例如 /、/collections/all、/products/trail-daypack、/products/pine-wool-beanie。

一个未通过的元素（浏览器渲染后的代码）：
```html
<img src="/img/hero-photo.jpg" loading="lazy">
```

为什么重要：WCAG 1.1.1 要求有意义的图片提供文本替代内容。没有它，屏幕阅读器用户无法分辨照片展示的是哪件产品。

需要修改的内容：
- 在 Shopify 后台打开“产品 > [产品] > 媒体文件”，点击每张图片并填写“替代文本”。对于分区中的图片，请打开“在线商店 > 模板 > 自定义”，在分区设置中设置图片的替代文本。
- 描述对购物者重要的信息：产品名称、颜色和展示角度（例如“橄榄绿帆布托特包，正面”）。
- 装饰性图片应使用空的 alt 属性（alt=""），让屏幕阅读器跳过它们。

建议的修改（产品照片：Shopify 后台 › 产品 › 媒体文件 › 替代文本。其他图片：您的模板代码）：
```html
<img src="/img/hero-photo.jpg" loading="lazy" alt="[Describe the image for a shopper]">
```

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：表单元素必须有标签（WCAG 4.1.2）。
位置：6 个页面上共 7 个实例，例如 /products/trail-daypack、/cart、/products/pine-wool-beanie、/products/enamel-camp-mug。

一个未通过的元素（浏览器渲染后的代码）：
```html
<input type="number" value="1" min="1">
```

为什么重要：WCAG 1.3.1、3.3.2 和 4.1.2 要求表单字段具有标签。新闻通讯订阅和搜索字段是常见的问题来源。

需要修改的内容：
- 为每个字段添加 <label for="field-id"> 元素，至少也要添加 aria-label。
- 仅有占位符文字不能算作标签。

建议的修改（您的主题代码，可在其中搜索所示的标记）：
```html
<input type="number" value="1" min="1" aria-label="Quantity">
```

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：select 元素必须有一个可访问的名称（WCAG 4.1.2）。
位置：1 个页面上共 1 个实例，例如 /collections/all。

一个未通过的元素（浏览器渲染后的代码）：
```html
<select><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

为什么重要：WCAG 4.1.2 要求选择菜单具有无障碍名称。

需要修改的内容：
- 添加与该选择菜单关联的 <label>，或添加 aria-label，例如 aria-label="Sort by"。

建议的修改（您的主题代码，可在其中搜索所示的标记）：
```html
<select aria-label="[Field label]"><option>Featured</option><option>Price, low to high</option><option>Price, high to low</option></select>
```

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：链接必须有可辨识的文本（WCAG 2.4.4、4.1.2）。
位置：9 个页面上共 36 个实例，例如 /、/collections/all、/products/trail-daypack、/cart。

一个未通过的元素（浏览器渲染后的代码）：
```html
<a href="/cart"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 4h2l2.4 11h11l2-8H6.5"></path><circle cx="9" cy="20" r="1.5"></circle><circle cx="18" cy="20" r="1.5"></circle></svg></a>
```

为什么重要：WCAG 2.4.4 和 4.1.2 要求链接具有描述其目的的无障碍名称。

需要修改的内容：
- 在下面的示例中找到这些链接。大多数是 <a> 标签内的图标或图片。
- 在链接内添加视觉上隐藏的文字，或添加 aria-label，例如 aria-label="Instagram" 或 aria-label="Cart"。
- 如果链接包裹的是图片，请改为给图片添加有意义的替代文本。

建议的修改（您的主题代码，可在其中搜索所示的标记）：
```html
<a href="/cart" aria-label="Cart">…</a>
```

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：元素必须满足最小颜色对比度比率阈值（WCAG 1.4.3）。
位置：9 个页面上共 22 个实例，例如 /、/collections/all、/products/trail-daypack、/cart。

一个未通过的元素（浏览器渲染后的代码）：
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

为什么重要：WCAG 1.4.3 要求普通文字的对比度至少达到 4.5:1，大号文字至少达到 3:1。颜色浅淡的价格、徽标和横幅，对低视力用户以及在强光下的所有人来说都难以阅读。

需要修改的内容：
- 打开下面列出的未通过元素，记下未通过摘要中的前景色和背景色。
- 在“在线商店 > 模板 > 自定义 > 模板设置 > 颜色”中，为受影响的配色方案加深文字颜色或调浅背景颜色，直到对比度至少达到 4.5:1。
- 请特别注意促销徽标、占位符文字、页脚链接和图片上的按钮。

建议的修改（模板设置 › 颜色，或您主题的 CSS 文件）：
```css
.announce {
  background-color: #b95941; /* was #e76f51: 3.09:1, now 4.59:1 */
}
```

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：所有页面内容应包含在 landmark 中。
位置：9 个页面上共 18 个实例，例如 /、/collections/all、/products/trail-daypack、/cart。

一个未通过的元素（浏览器渲染后的代码）：
```html
<div class="announce">Free shipping on orders over $75 · Easy 30-day returns</div>
```

为什么重要：地标区域让屏幕阅读器用户可以在页面中快速跳转。这是支持 WCAG 1.3.1 和 2.4.1 的最佳实践。

需要修改的内容：
- 将游离的内容（公告栏、弹窗、聊天小组件）包裹在合适的地标区域中，或放入 <main> 内。

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。

我在 harborandpine.example 上运营一家 Shopify 店铺（Online Store 2.0 模板，Liquid 模板文件）。一项无障碍测试发现了这个问题，我想在我的主题中修复它。

问题：标题级别只应递增一。
位置：7 个页面上共 7 个实例，例如 /collections/all、/products/trail-daypack、/pages/about、/products/pine-wool-beanie。

一个未通过的元素（浏览器渲染后的代码）：
```html
<h3>Trail Daypack 22L</h3>
```

为什么重要：屏幕阅读器用户会借助标题浏览页面。这是支持 WCAG 1.3.1 的最佳实践。

需要修改的内容：
- 调整受影响区块中的标题层级，使其按顺序排列、不跳级。
- 只修改标签，不修改视觉样式（用 CSS 类控制字号）。

建议的修改（您的主题代码，可在其中搜索所示的标记）：
```html
<h2 class="h3">Trail Daypack 22L</h2>
```

回答要求：
- 以修改前和修改后的形式给出确切的改动，并说明应改在哪个文件或设置中。如果需要先看我的文件，请让我粘贴给你。
- 保持视觉设计和所有现有功能不变。
- 不要编造产品名称、价格或文字；请使用我可以自行填写的占位符。
- 最后说明我可以如何自行检查修复效果。
- 请说明如何用键盘和屏幕阅读器确认修复效果。