如何为屏幕阅读器表达多个价格？

Question

我们正在努力使屏幕阅读器可以访问我们的电子商务网站，并且在定价方面存在冲突。当产品打折时，我们的类别和产品页面列出了多个美元金额：

1. 原始价格（删除线）
2. 折扣价（客户实际支付的费用）
3. 节省（原价-折扣）

是否有任何标准方法可以为视障用户传达所有这些信息？我们不想遗漏任何东西，但也要避免使产品列表过长而无法遍历。

目前，VoiceOver将我们的价格读为“价格，9.99美元” [TAB]“销售，7.99美元” [TAB]“节省2美元”

我们正在考虑将所有内容重新标记为一个语句，以使用户不必查看每个价格。 “原价$ 9.99，现价$ 7.99，节省$ 2”

上面的工作吗，或者有更标准化的方式来传达这一点？

Answer 1

据我所知，没有真正的标准可以准确地告诉您应该如何显示价格信息。 您可以根据自己的具体情况找到最佳配方。 只要所有内容都清楚地写在文本中，就可以了。

您必须绝对避免的事情是仅通过视觉格式提供（隐式）信息。 例如，在没有明确说明价格是原始价格并且当前有折扣的情况下进行价格调整，会给屏幕阅读器用户和可能看不到调整价的用户带来可访问性问题。

因此，基本上，您可以通过文字说明所有内容，从而走在正确的轨道上。

现在，根据我自己作为屏幕阅读器用户的经验，从您的示例开始，我会说：

• 先给出折扣价，再减去原始价格，因为我要支付的是优先寻找的信息。
• 要精明，并以简明扼要的方式提供完整的信息。示例：“ $ 7.99而不是$ 9.99，节省了$ 2”。
• 不要先省钱，因为很容易将其视为过度的营销手段。示例：“节省20％！用$ 10代替$ 12”对比“用$ 10代替$ 12节省20％！”

Answer 2

@QuentinC在信息顺序方面有一些很好的建议（首先是最重要的-您要支付的价格），但在OP中困扰我的一件事是用户为何选择 tab

或者也许这只是一个术语问题。我认为通过 tab ，您的意思是向右滑动以移动VoiceOver焦点。

如果决定用一个大句子来考虑一件事，那么解析所有这些信息将变得更加困难。 VoiceOver用户可以将其转子更改为“单词”，然后向上/向下滑动一次以浏览单词以收听信息，但这并不是强迫他们这样做的最佳用户体验。但是，事实上，您提供所有这些信息确实很重要，因此对您来说是个荣誉。

此外，当您向右滑动时，VoiceOver会在元素边界处停止，因此，如果出现类似情况：

<div>
  <span>hello</span>
  <s>there</s>
  <span>world</span>
</div>

您将听到“你好” 向右滑动“那里” 向右滑动“世界”。

如果您只想轻扫一次即可听到“你好，世界”，那么您将需要无证件（因此不受官方支持）“文本”角色。

<div role="text">
  <span>hello</span>
  <s>there</s>
  <span>world</span>
</div>

请注意，即使和是语义元素，它们的含义也不会传达给屏幕阅读器。处理该问题的一种方法记录在“ Short note on making your mark (more accessible)”中。

Answer 3

  

上面的工作吗，或者有更标准化的方式来传达这一点？

您应该通过向屏幕阅读器介绍太多信息来避免打扰您。

我并不是说这是一个标准的解决方案，但是您要考虑的解决方案只是忽略使用aria-hidden的旧价格：      $7.99 <div aria-hidden="true"> ($9.99) </div>

通过这种方式，屏幕阅读器用户将只获得新的价格，并真正获得了辅助功能。由于文本是删除线，因此我认为WCAG不需要在此处进行语音替代。