accessibility-commerce

电商无障碍访问

概述

符合 WCAG 2.1 AA 级标准，涵盖动态购物车更新的屏幕阅读器播报、交互组件（轮播、数量调节器、模态框）的键盘导航、焦点管理以及颜色对比度要求。无障碍商店可降低 ADA、AODA 和 EAA 相关的法律风险，而且通常能提高所有用户的转化率。

何时使用此技能

• 无障碍审计发现违反 WCAG 的问题，影响 ADA、AODA、EAA 合规时
• 屏幕阅读器用户反馈无法完成购买时
• 仅使用键盘的用户无法浏览结账流程时
• 自动化工具（axe、WAVE）发现需要修复的严重问题时
• 构建新店面并从一开始就融入无障碍设计时

核心说明

步骤 1：确定商家的平台并选择合适的方案

平台	推荐方案	原因
Shopify	从 Theme Store 选择符合 WCAG 标准的主题（Dawn、Sense）；安装 AccessiBe 或 EqualWeb 应用以添加自动化覆盖层；编辑 Liquid 进行自定义修复	Shopify 内置主题的无障碍性已有显著提升；主题编辑器和 Liquid 编辑可处理大多数问题
WooCommerce	选择无障碍主题（Astra、Kadence）；安装 WP Accessibility 插件（免费），以添加跳过链接、ARIA 角色和表单标签	WP Accessibility 无需编写代码即可添加关键修复；Gutenberg 区块内置的无障碍功能也较为完善
BigCommerce	使用 Cornerstone 主题（无障碍性最佳）；在主题编辑器中启用内置无障碍检查器；从应用市场安装 ADA 无障碍应用	Cornerstone 开箱即满足大多数 WCAG AA 要求
自定义 / 无头架构	使用步骤 4 中的技术手动实现 ARIA 模式；使用 NVDA+Firefox 和 VoiceOver+Safari 进行测试	完全的控制权也意味着完全的责任——请使用下方的组件模式

步骤 2：进行无障碍审计

进行更改之前，先确定需要修复的问题：

1. 自动扫描：在首页、商品页、购物车和结账页面上运行 axe DevTools 浏览器扩展
2. WAVE 工具：访问 wave.webaim.org 并扫描商店网址
3. 键盘测试：不使用鼠标，通过 Tab 键浏览整个结账流程——每个交互元素都必须可访问且可操作
4. 屏幕阅读器测试：使用 VoiceOver（Mac/iOS）或 NVDA（Windows/Firefox）进行测试——浏览商品列表并完成购买

大多数商店常见的问题：

• 图片缺少有意义的替代文本
• 仅使用颜色作为提示（例如，红色的“缺货”提示没有文本说明）
• 表单字段没有标签
• 模态框未能锁定焦点，或无法响应 Escape 键
• 添加到购物车按钮未向屏幕阅读器播报成功信息

步骤 3：特定平台的修复

---

Shopify

主题级修复（无需编写代码）：

1. 前往 Online Store → Themes → Customize
2. 为所有图片设置替代文本：Products → Media → Edit alt text
3. 在 Theme settings → Typography 下，确保正文的字号至少为 16px
4. 在 Header settings 中启用 Skip to content 链接（Dawn 和大多数现代主题均提供此功能）

自定义主题的 Liquid 代码修复：

为购物车更新添加 ARIA 实时区域——编辑 cart-notification.liquid 或相应的代码片段：

<div aria-live="polite" aria-atomic="true" class="sr-only" id="cart-live-region">
  {{ cart.item_count }} items in cart
</div>

对于变体选择器中的颜色色块，请用 <fieldset> 包裹，并添加 <legend>：

<fieldset>
  <legend>{{ option.name }}: <span>{{ selected_value }}</span></legend>
  {% for value in option.values %}
    <label class="swatch {% if forloop.first %}selected{% endif %}">
      <input type="radio" name="{{ option.name }}" value="{{ value }}"
             {% if value == selected_value %}checked{% endif %} />
      <span class="sr-only">{{ value }}</span>
      <span class="swatch-color" style="background-color: {{ value | downcase }}" aria-hidden="true"></span>
    </label>
  {% endfor %}
</fieldset>

应用选项：

• AccessiBe（Shopify App Store，约 $49/mo）——自动化 WCAG 2.1 AA 覆盖层；无需修改主题，即可添加屏幕阅读器调整和键盘导航功能
• EqualWeb——采用类似的覆盖层方案，并提供免费套餐

---

WooCommerce

基于插件的修复：

1. 安装 WP Accessibility（免费，wordpress.org）——添加跳过导航链接和 ARIA 地标，移除链接的 title 属性，并修复表单标签
2. 安装 Accessibility Suite for WooCommerce——自动为购物车和结账元素添加 ARIA 标签

基于主题的修复：

• 使用 Astra 或 Kadence 主题——两者都内置了完善的 WCAG AA 支持
• 在 外观 → 自定义 → 排版 中，将基础字体大小设为至少 16px

WooCommerce 结账字段的手动修复——添加到子主题的 functions.php：

// Associate checkout field labels with inputs
add_filter('woocommerce_checkout_fields', function($fields) {
    foreach ($fields as $fieldset => &$fieldset_fields) {
        foreach ($fieldset_fields as $key => &$field) {
            if (!isset($field['label'])) {
                $field['label'] = ucfirst(str_replace('_', ' ', $key));
            }
        }
    }
    return $fields;
});

---

BigCommerce

1. 从 Cornerstone 主题开始——它是所有 BigCommerce 主题中无障碍基线支持最好的
2. 前往 店面 → 我的主题 → 自定义，并启用无障碍设置面板
3. 对于颜色对比度：在主题编辑器中，将按钮背景色设为与白色文字形成足够对比的颜色（最低比例为 4.5:1）
4. 从 BigCommerce 应用市场 安装无障碍应用（搜索“accessibility”），以进行覆盖层式修复

---

自定义 / Headless

在 React/Vue/Svelte 组件中实现以下模式：

用于购物车更新的 ARIA 实时区域：

// Place once at the app root; update message after add-to-cart
export function CartLiveRegion({ message }) {
  return (
    <div role="status" aria-live="polite" aria-atomic="true"
         style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0,0,0,0)' }}>
      {message}
    </div>
  );
}

使用单选输入框的无障碍变体选择器：

<fieldset>
  <legend>Color: <strong>{selectedColor}</strong></legend>
  {colors.map(color => (
    <label key={color.value} className={`swatch ${!color.available ? 'unavailable' : ''}`}>
      <input type="radio" name="color" value={color.value}
             checked={selectedColor === color.value}
             disabled={!color.available}
             onChange={() => onColorChange(color.value)}
             className="sr-only" />
      <span className="swatch-visual" style={{ background: color.hex }} aria-hidden="true" />
      <span className="sr-only">{color.label}{!color.available ? ' (out of stock)' : ''}</span>
    </label>
  ))}
</fieldset>

模态框的焦点管理——使用原生 <dialog>，它会自动处理焦点限制：

const dialogRef = useRef(null);
useEffect(() => {
  if (isOpen) dialogRef.current.showModal();
  else dialogRef.current.close();
}, [isOpen]);

return (
  <dialog ref={dialogRef} onClose={onClose}>
    {/* focus is automatically trapped inside <dialog> */}
    <button onClick={onClose} aria-label="Close">×</button>
    {children}
  </dialog>
);

可见的焦点指示器（切勿移除轮廓）：

:focus-visible {
  outline: 3px solid #2b6cb0;
  outline-offset: 2px;
}
:focus:not(:focus-visible) { outline: none; }

第 4 步：验证和测试

1. 更改后重新运行 axe 扫描，并确认严重和高危违规项已解决
2. 测试键盘导航：Tab → 可访问所有交互元素；Enter/Space → 激活按钮；Escape → 关闭模态框
3. 使用 VoiceOver（Mac）进行测试：按 Cmd + F5 启用，通过 Tab 和箭头键导航；确认购物车更新会被播报
4. 使用 WebAIM 对比度检查器 检查颜色对比度——正文文本需要达到 4.5:1，大号文本需要达到 3:1

最佳实践

• 切勿移除焦点轮廓——仅使用 :focus:not(:focus-visible) 对鼠标用户隐藏轮廓，让键盘用户仍能看到焦点
• 优先使用语义化 HTML——操作使用 <button>，导航使用 <a>，表格数据使用 <table>；ARIA 属性无法修复非语义化标记
• 使用真实屏幕阅读器测试——自动化工具只能发现 30-40% 的实际问题；最常见的组合是 NVDA+Firefox 和 VoiceOver+Safari
• 触控目标至少设为 44×44px——这也有利于行动不便的鼠标用户
• 编写描述性按钮文本——“添加到购物车”合适；“点击这里”则不合适；屏幕阅读器用户会通过按钮和链接文本进行导航
• 为所有产品视频添加字幕——以自动生成的字幕为起点，但要核实产品名称和价格的准确性

常见问题

问题	解决方案
购物车数量徽标只播报“3”，没有上下文	使用 aria-label="3 items in cart" 包裹，或使用 aria-live="polite" 区域，在发生变化时播报完整上下文
未播报颜色样本的选择状态	使用 <input type="radio">，并用 <fieldset>/<legend> 包裹样本组；屏幕阅读器无法识别 div/span 的点击处理程序
模态框焦点未被限制	使用原生 <dialog> 元素（浏览器支持率超过 96%），它可免费提供焦点限制功能
未播报表单错误	为错误摘要添加 role="alert"，或在每个出错字段上添加 aria-invalid="true" + aria-describedby
覆盖层无障碍应用导致冲突	安装任何覆盖层应用后都要彻底测试——它们有时会破坏自定义主题 JavaScript；安装前后都使用 axe 验证

相关技能

• @responsive-storefront
• @checkout-flow-optimization
• @mega-menu-builder
• @search-autocomplete