购物车多价格场景的无障碍优化问询及代码改造方案

核心结论 #

不能直接隐藏旧价格——这部分信息是促销优惠的关键组成，视障用户有权知晓原价和优惠幅度。正确做法是给每个价格添加明确的语义标注，让屏幕阅读器能清晰区分各价格的含义。

官方规范依据 #

主要遵循WCAG（Web内容无障碍指南）的两个核心准则：

• 1.3.1 信息和关系：要求页面的结构、关系和含义能通过代码而非仅视觉呈现，不能只靠颜色、删除线这种视觉提示传递语义。
• 3.3.2 标签或说明：确保用户能获取每个内容的清晰标识，避免歧义。

代码改造方案 #

推荐结合语义化HTML和ARIA属性，同时保留视觉样式，兼顾视觉和屏幕阅读器用户：

<!-- 旧价：用<s>标签语义化表示已删除的内容，加上aria-label明确说明 -->
<s class="old-price" aria-label="旧价格：99美元">$99</s>

<!-- 当前价：用aria-label说明是未促销的常规价格 -->
<span class="regular-price" aria-label="常规价格：49美元">$49</span>

<!-- 促销实付价：用strong标签强调，aria-label明确是促销后实付价格 -->
<strong class="promo-applied-price" aria-label="促销后实付价格：29美元">$29</strong>

额外优化：如果担心aria-label不够直观，也可以添加视觉隐藏但屏幕阅读器可见的文本（通过CSS实现），比如：

<s class="old-price">
  $99
  <span class="sr-only">（旧价格）</span>
</s>
<span class="regular-price">
  $49
  <span class="sr-only">（常规价格）</span>
</span>
<strong class="promo-applied-price">
  $29
  <span class="sr-only">（促销后实付价格）</span>
</strong>

对应的视觉隐藏CSS：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

这种方案既保留了视觉上的清晰呈现，又让屏幕阅读器能准确播报每个价格的含义，彻底解决视障用户的困惑。

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