PrestaShop 1.7.8 WAG2无障碍检测两项报错修复咨询

所有修改均通过后台自带配置或子主题覆盖实现，不会修改原主题核心文件，无升级兼容问题。

问题1：默认主题图片滑块控制箭头对比度不达标 #

Wave工具检测的是控制箭头的默认状态和底层容器的对比度，直接通过自定义CSS覆盖样式即可：

• 登录后台，进入「设计」→「主题与LOGO」→「高级设置」，找到自定义CSS输入区域
• 粘贴以下样式代码：

/* 给滑块箭头加半透黑背景，与白色箭头对比度≥7:1，满足WCAG AA级要求 */
.swiper-button-prev, .swiper-button-next {
  background: rgba(0, 0, 0, 0.6);
  width: 44px;
  height: 44px;
  border-radius: 4px;
}
/* 补充focus状态的轮廓标识，适配键盘导航场景 */
.swiper-button-prev:focus, .swiper-button-next:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

如果你不想加背景，也可以直接把箭头颜色改成深灰色，替换上面的样式即可：

.swiper-button-prev::after, .swiper-button-next::after {
  color: #111827;
  font-weight: 700;
}

• 保存后清空站点缓存，重新检测即可。

问题2：商品数量加减按钮空文本报错 #

报错原因是按钮仅包含图标，没有可被屏幕阅读器识别的文本内容，不需要删除原有代码，任选以下一种方法修复即可：

方法1：补充无障碍属性（无需修改模板，推荐） #

直接通过自定义JS给按钮添加aria-label属性，屏幕阅读器会自动识别该属性值作为按钮描述：

• 进入后台「设计」→「自定义代码」，找到自定义JavaScript输入区域
• 粘贴以下代码：

document.addEventListener('DOMContentLoaded', function() {
  const minusBtn = document.querySelector('.js-qty-btn-minus');
  const plusBtn = document.querySelector('.js-qty-btn-plus');
  if(minusBtn) {
    minusBtn.setAttribute('aria-label', '减少商品购买数量');
    minusBtn.setAttribute('title', '减少数量');
  }
  if(plusBtn) {
    plusBtn.setAttribute('aria-label', '增加商品购买数量');
    plusBtn.setAttribute('title', '增加数量');
  }
});

• 保存后清缓存生效。

方法2：添加屏幕阅读器专属文本（兼容旧设备） #

如果需要兼容更早版本的屏幕阅读器，可以修改商品加购模板，给按钮加视觉隐藏的文本：

• 进入后台「设计」→「主题编辑器」，找到模板路径 templates/catalog/product/_partials/product-add-to-cart.tpl
• 分别在减号、加号按钮的内部插入以下代码：

<!-- 减号按钮内插入 -->
<span class="sr-only">减少商品数量</span>
<!-- 加号按钮内插入 -->
<span class="sr-only">增加商品数量</span>

PrestaShop默认主题已内置sr-only类，插入的文本仅会被屏幕阅读器识别，不会在前端界面显示。

内容的提问来源于stack exchange，提问作者IriathenGR